Looking for design tips: Elliot for Water Homepage

Design Lounge
1

Hi you all,
I’m Gio, I would like to introduce to you Elliot for Water, a search engine that donates water with your searches.
Elliot is of course open source and transparency and openness are strong values for our startup.

We are in the process of redesign the website, starting from the home page.
I’m currently taking care of it but I’m more of a developer than a designer (I’m a former designer but I don’t design anymore since 10+ years.)

I would really appreciate your tips on how to improve our design.

Current version: elliotforwater.com/

Some mockup:

elliot-mockup2
elliot-mockup21447×3381 445 KB

elliot-mockup1
elliot-mockup11908×3560 497 KB

elliot-mockup3
elliot-mockup31451×4747 535 KB

Longer explanation:

Why restyle?

  • We need to improve our communication. Right now new users that land on our page doesn’t have a simple and clear explanation what the project is about and how they can help.
  • We need a more attractive design. So far it looks outdated.

What elements must be on the page:

  • we need to have the explanatory video (I heard nowadays video are even more powerful than images and would make sense to put the video as early as possible, from a UX perspective. What do you think?)
  • explanation of the project and how it works
  • newsletter signup

Some context:

  • we are more than open to change our brand colors (primary and secondary) but struggle to find the perfect ones. We think makes sense to stay around blue/azure because of the water but we like also something warmer like yellow since Elliot comes from Elio/Helios, the sun’s god and it means life, the life we can support with our water projects.
  • we do not have a design yet. We had someone helping out with the design, that’s why we have some custom illustrations, but not anymore.

I appreciate a lot your inputs!

1 Like
2

Hey, @designbygio I’m new here, and I would love to contribute to this really interesting project. On the other hand, I believe every redesign project is a great opportunity to do things better than in the previous iteration, so rather than simply start giving my out-of-context opinions about the mockups, I suggest finding some time for a little sync before, in parallel if you have this design project in a web-tool like Penpot or Figma please feel free to invite me there (hello@maximo.design), or send the SVG what better works for you.

1 Like
3

Hey, @designbygio I just created an ¨unofficial¨ team in Penpot to explore this a bit further and I also already started a normal Audit exercise over there, as a way to gain some holistic context visualization of the current situation and the proposals you shared here. For now, I just navigated the website and the external stuff while taking screenshots of everything I found. It would be great if you could jump there to take a look and please lmk if anything missing there.

My next steps will be to analyze everything and elaborate the first set of questions for you about the project in general and the redesign motivations too.

If you or anyone else here want to join the unofficial Penpot team for this project to take a look, leave comments, and maybe contribute… just send me your email here or by DM, by email works too, also I’m always at Matrix (You're invited to talk on Matrix) for more real-time interactions.

image
image571×528 40.2 KB

4

Hey @maximogomez thank you very much for your interest and your work already!
Excuse me for the display in my response, is busy time at Elliot For Water right now :slight_smile:
feel free to invite me to the Penpot tech@ellitoforwater.com, I’m more than happy to have a look and further discuss the redesign ideas you have with you.

1 Like
5

Hey Gio,
some short pingbacks:

  • Why the wave’s shape is not stringent? The line flattens/kinks at some points. This seems physically wrong.
  • Why the blue in the logo is greyish and becomes a cyan peek while the color shades are not really related to eachother? This is not what a wave would do and look like.
  • Why the fonts are only centered, but not aligned together , weighted in size and shape?
  • Why the color/shade of the footer is not well related to the main blue?
    …

Only if you asked.
Have a good time and many success with the project!
Matthias

1 Like
6

Hey @Matthias thank you very much for your time and questions
They helped me already to understand how some stuff is perceived.
I believe my main problem is picking colors and spacing…

We decided to go for a way softer redesign and wait for an actual design to give us an idea how to proceed :slight_smile:

1 Like