Suggestions for new homepage design

Created on Friday 19 June 2020, 08:56

Back to task list
  • ID
    31753
  • Project
    Metabolism of Cities
  • Status
    Completed
  • Priority
    Medium
  • Type
    General administrative work
  • Tags
    2020 Launch Sprint
  • Assigned to
    Aristide Athanassiadis
  • Subscribers
    Aristide Athanassiadis
    Carolin Bellstedt
    Guus Hoekman
    Paul Hoekman

You are not logged in

Log In Register

Please join us and let's build things, together!

Description

When we go live, we will have a new landing page. It currently looks like this, with the idea that we use the homepage to show more than anything what kind of projects we engage in. But it doesn't have to be like that. We are open to suggestions of other setups.


Key questions to answer:



  • What exactly should the homepage do (show our project? show the latest updates? give a general idea what we are? encourage people to join? all of the above?)

  • Once we figure that out, what content should we show here exactly? We can easily pull in stuff from the different databases (e.g. the Project List, Contributor list, News, or Events), but I'd need to know how many, and how to show them (photo or not, short text intro or not, date or not), and where

  • What general layout do we use? Big photo header? (if so, what photo?) Do we use multiple columns? If so, how many? Do we use "cards"? Any other design elements?


Guus is available to help with the front-end work to make this looks nice, but it would be great if someone can help figure out how this should be set up. The more detailed you provide instructions, the better. You can make some drawings in any program of your choice (in an image editor, on paper, in a spreadsheet, etc etc). It is also VERY helpful if you have sample sites and screenshots of specific elements you want to use.

Discussion and updates


New task was created


FYI I have changed the design a bit, showcasing 6 projects prominently and including quick links to the sub-sites. I don't think we're quite there yet, but feel free to have a look and comment...


Task was assigned to Aristide Athanassiadis


Status change: Open → In Progress


The homepage is the first contact for people to the entire MoC ecosystem. That means that they (very different people ranging from students, researchers, policy makers, etc.) need to understand what we do and ideally easily find the information they are looking for (considering that they come with something specific in mind).

Our second interation of our website (for some it was the first) can be seen here https://archive.metabolismofcities.org/ That homepage, showcased all of the elements we had in the website.

The third iteration (after a lot of consideration), opted for another route. We decided to explain with a little text, what we do, why we do it and how to get to the info (and then it was up to the viewer to find the info within the navigation menu). During that period we considerably included more info (especially multiplicity) and many other things so it became difficult to get around this wealth of info

This fourth iteration, we have decided that MoC is mostly a medium and platform that helps to develop projects around UM. So our content is now segmented into specific websites (and perhaps audiences). The idea is now that we would focus and promote more on our projects and community and each segments has its own.

As such the homepage should be the aggregator of info from these projects and aiming to redirect. Right now, we have some text which is our mission statement (with links to the subsections except about) and six projects. We will undoubtely, need to add some more elements (latest event/dataset/post on any forum/etc.)

Here are some elements (and I don't know yet in which order)

  • I think would be nice (be able to see the projects either by clicking left or right or they are automatically scrolling horizontally. See example (https://www.metabolic.nl/ and https://start.edgeryders.eu/).
  • Mission statement
  • Latest ... (news/events/dataviz/video/etc.)
  • Link to our social media feeds
  • Forum (or part of it)
  • Stats (on how many datasets we have, how many contributors, how many ...)

To the other questions of Paul:

  • For the projects, what you have implemented already seems really nice (photo + short text) but I would take out volunteers and prototype site button. As soon as they click you go to the project.

  • For the general layout, we might want to move away from the scrollable page as we had now as it did not perform very well when scaled down. So I would say a mix between 1 column and more depending the section. A very nice and playful implementation is again https://start.edgeryders.eu/, we can now move away from the "insipirational quotes" we had before (see comment from Bernelle https://new.metabolismofcities.org/forum/32008/)

That's it for now I'm available for more input but I guess this is a first draft

I liked the scrollable element of the previous homepage


Status change: In Progress → Completed


Great stuff Aris! I'm a big fan of your overview and your ideas also sound very good. I don't yet know if this is specific enough for Guus to set up a homepage, but we'll see. In any case let's give people till the end of today to provide any additional feedback. But this looks like a very good overview to me!


Yes you're right. I mean, perhaps the easiest would be once we have all the ideas, to briefly chat with Guus on this while showing some examples (for instance via uber)


OK great. Given our crazy tight deadline this may be an option early morning tomorrow, so he can set it up tomorrow and I can make it functional on Sunday. Guus feel free to chime in and let us know what works best from your side.


Sure. no worries.


> he can set it up tomorrow and I can make it functional on Sunday

Yeah that works for me!


Aris I made some improvements to the homepage based on your suggestions.


Hi Guus, thanks for that!! Ok many great things already there. Starting from the top

(note we will have to figure out the logo situation) I like the picture (the size might be a bit too tall) as it represents differents bits of the metabolism of a city. The navigation banner up top should be either more opaque or of another colour.

The text "we are a ..." is not 100% visible but could work (in some place of the picture the contrast is not great).

(note What font are we using for the "headers"? would we want to use the same font as the logo -> Montserrat? Might be nice to have some consistency) Also for the titles should we use all caps?

For the section Featured projects perhaps we would need to change the bg colour (I much prefer the blue one to the white one). For the boxes of the projects, could they all have the same height? As of now, if I understand well, the project in the middle is highlighted and gets a bit bigger but as sometimes the other boxes are anyhow bigger, so it a bit weird. Could we make the arrows left and right a bit bigger and include the dots underneath also at bigger display sizes? I see they only appear when on mobile versions (and also make the dots a tiny bit bigger).

After that we probably don't need the mission statement another time.

In the what we do part could you add some colours in the four boxes (either the top part, or the outline, I don't know yet).

The three action boxes (discuss, get together, get things done) can go below the What we do section (perhaps). Where the statistics are.

Could you change the colour of the "stats" and latest news sections to a darker grey with no separating line.

(note to us, I don't know whether we want another section from our social media feed?)

For the follow us section, perhaps could you do the icons a bit smaller and also add an option to subscribe to our newsletter? The banner itself could be a bit smaller.

I think these are some generic comments at the moment.


This is all starting to look quite magnificent. Thanks to the both for all the work on this already!!


Aris I don't mind implementing your changes, but I can see this turning into a permanent discussion because everyone has an opinion. For example, you said: "I much prefer the blue one to the white one". That's fair, but someone else will think differently. I'd like to avoid a situation where next week people will want me to change things and I have to waste hours simply because people's tastes are different.

So, I'd like to do one of two things:

  1. Get their input today (saturday) and make a final list of things that need to change that I can implement tomorrow
  2. I implement your changes, you become dictator of the homepage and shoot down anyone who wants to make stylistic changes

Of course if things don't work I'll fix them, but things like fonts, sizes, colours, etc... most of that is just personal preference and it's impossible to make everyone happy.

This might sound a bit intense, but it's incredibly frustrating to have multiple people give contradicting input and it's a situation I absolutely want to avoid.


Hehe, absolutely fair enough. We had the same issue for the logo and it was an impossible task.

What I propose is a hybrid. Last time we needed someone to collect the input and make the final decision. So let's give everyone a chance to provide input today and I'll try to make a synthesis and list of priorities.

Does that sound ok to you and everyone?


Sounds good to me, thanks Aris.

I don't know if people are reading these messages though but I'm gonna leave that to you. Whatever is here tomorrow morning I will implement.


You're right, I'll write an email now. Thanks to you Guus!!


Hey Guus, no diverging messages so far (also sent an email). In case I receive anything within an hour I'll let you know else, free to move forward!


OK great.

I made the changes you asked for.


Hi Guus, that looks really nice.

Some additional comments but which are not necessarily up to you to fix.

1/ We need to have a consistent logo. So far, the red is the official one, so let's have this one two times 2/ The text of our mission statement, we should add the last bit which was cut (if I remember well "in a context-specific and socially just manner") 3/ We should swap the order between "featured projects" and "what we do" 4/ We might want to change the image of the featured projects. Perhaps we should make a picture of one colour taking the entire frame with the logo and that's it (instead of showing a website). This is up for debate

Other than that, I really like it!!! New homepage for the win!!


Thanks Guus for the changes indeed.

I will now take these additional changes further as we can't demand more from Guus at this point.

The homepage is coming along very nicely and it's a great update from what we have atm. I most say that in my view the previous version with the lighter backgrounds actually looked better. But let's go with this one Aris otherwise we have an eternal debate. I figure something out from my side.

For the points:

  1. I'll make the logo change
  2. I'll change it.
  3. I would personally keep it as-is but I'll make the change for you
  4. I'll leave that to everyone to debate. You can change the images themselves by managing the project section - they will update automatically on the homepage.

Ok cool.

Thanks again Guus and thanks Paul as well.

For 3/ not 100% convinced but it is more logical. For 4/ let me try to experiment. Do you know where the logos from Carlos are located? Also, the geometrical shapes where they done by Carlos or somehow automatically?


Check the design hub for our design info.

Those headers themselves were designed (colors, logo, background pattern) by Carlos. For the background patterns he used SVG Backgrounds. However I suggest we don't revisit that at this stage unless there is a better argument than "I prefer A over B". Or we have a solid system for voting on things of sorts.

This whole design component is very tricky as it's quite subjective.

For 3./ please make the call and let me know what you want to do. Lacking time and a good system for consensus, right now I figure let's just go with what you prefer.


Changes 1./ and 2./ have been applied.


Hey Paul, thanks.

I don't want to change the logos, I want to use them as a picture for the project page. But this could be a lot of experimentation with voting.

For point 3, let's go for "what we do" first.


OK noted. I have now changed the order (#3).


I'll now work on making the dynamic components (forum posts, news, etc) actually pull in the right info.


Okay the latest news and forum posts are now properly pulled in. For forum posts we actually look at the three most recent topics and then show the last message in each topic, so we don't have three messages about the same topic appearing individually...

The contributor/database/city count is pending but it's a bit tricky to actually properly define that for now -- let me see how things look at the end of the day.


That looks cool Paul. There is just some <p> floating around in the latest news


Thanks Aris; the floating <p>s have been fixed.


This is all coming together VERY nicely! Happy that Aris took over the reign here - thanks for that.

For point 4, about images of the featured projects. I understand what you mean Aris and I think we could move there eventually, although I don't mind the screenshots too much. Let's hold off on those changes until we have the bg images/colors and logos of the subsites fully sorted out. Just saw Carlos' email about slowly coming back and browsing the site to see where he can help. Let's see what he says.


Hey Paul, a small thing about the homepage. Can you add some space between the news items (when looking at the website from a mobile device) see


Hi Aris,

All the mobile adjustments are not my cup of tea. Can I suggest that we make a new task called "Adjustments for mobile devices", and we collect all the required changes in there. Then we can ask Guus to batch-process them a week or two from now. Does that work for you?