Improve the Main Landing page of 'Mutual Aid World' app.

[Erioldoesdesign]

This is an epic which collects the issues which are around improving the main 'landing page' once a user hits the Mutual Aid World web app.

In both mobile views, tablet and desktop.

https://mutualaid-757f6.web.app/

[joycekimdesigns]

I did some competitive research to see what other similar websites had on their website to see what we are missing. I started mapping out what the page would be for desktop and tablet views, but wanted to focus on mobile views first.

While doing an audit on the the current landing page, I noticed four major points that I thought should be addressed along with information we could possibly add.

Wireframe options: Option 1 ![Uploading Wireframe 1.jpg…]()

Option 2

Option 3

Option 4 Expanded View:

Figma File: https://www.figma.com/file/EmaLouXw7xH1qp7LjTAww5/Mutual-Aid-Feed-Folks-Main-Landing-Page?node-id=0%3A1

[thoughtsky]

I did some competitive research to see what other similar websites had on their website to see what we are missing. I started mapping out what the page would be for desktop and tablet views, but wanted to focus on mobile views first.

While doing an audit on the the current landing page, I noticed four major points that I thought should be addressed along with information we could possibly add.

Wireframe options: Option 1

Option 2

Option 3

Option 4

Expanded View:

Figma File: https://www.figma.com/file/EmaLouXw7xH1qp7LjTAww5/Mutual-Aid-Feed-Folks-Main-Landing-Page?node-id=0%3A1

Really good job there! I personally really like Option 2. I think it provides the necessary clearness and is straight to the point!

[Erioldoesdesign]

Hello @joycekimdesigns there's some definite improvement here regarding the general UX layout for sure. I think critically, having a key branding colour that is well contrasted with white/light greys will help with accessibility as well as generally, how easily users read the content.

If it's okay with you, I'll drop some comments directly in your Figma file but also summarise them here in another comment too.

Just to note your research is excellent! very thorough! 😄

[joycekimdesigns]

Hi @Erioldoesdesign this link should work, sorry about that: https://www.figma.com/file/EmaLouXw7xH1qp7LjTAww5/Mutual-Aid-Feed-Folks-Main-Landing-Page?node-id=0%3A1

I'll wait for your feedback before I start working on it again, thanks! 😃

[joycekimdesigns]

Based on the comments I received, I tried adding some color to the design to have a better feel:

It stood out to me that dividing up the sections with a box made the page feel really choppy, and didn't feel very welcoming despite the colors. I decided to explore the curves in the logo and tie that into the design of the page: A:

B:

C:

D:

E:

F:

[Erioldoesdesign]

Just updating a comment here saying myself and Joyce spoke about:

1. How this could be developed with CSS shapes that might make it lighter file size wise and 'responsive'
2. We Also spoke about how it could be done through SVG.
3. I suggested Joyce work on a 'simpler' shapes version with more standard 'circles and triangles and rectangles lines' as an 'easier to dev' option.
4. We spoke about a 'footer' issue here: https://github.com/factn/Resilience-Design/issues/47
5. We spoke about the next work to focus on.

[joycekimdesigns]

3/26/21 Meeting Recap Participants: Eriol & Joyce

• Discuss what developing design with CSS shapes mean
• Increase size of smallest dimensions (minimum 40px)
• Fonts can change (some options: Lato, Fira, Open Sans...)
• Drop shadows can be done in CSS
• Next sizes to explore: Tablet (portrait and landscape)
• Refer to https://www.figma.com/file/GLg0zPNnwMEGIb9TytCrxQ/Resilience-App?node-id=37375%3A286
  • MVP v1: things that didn't get implemented
  • MVP v0: use things from here
• Discuss Footer Info, see Issue #47

[joycekimdesigns]

Based on feedback and in an effort to simplify the shapes, I have worked on a few more designs. FYI, font and tablet size have not been explored yet. Those changes in addition to using information from MVP v0 will be added once a direction is set.

Design D.1:

[joycekimdesigns]

Design D.2:

[joycekimdesigns]

Design D.3:

[joycekimdesigns]

Design D.4:

[thoughtsky]

Hey! Absolutely great job. Personally I think D.2 cuts it. It has a clear separation of sections and the visual language is clear. Only thing that confused me was the "Donate" section having a button called "Volunteer". I know there is some discussion around the terms but wouldn't volunteer involve helping out "physically" while donating would be another way of helping out?

[Erioldoesdesign]

Agreed! D2 is the one I like with the circle at the bottom for the call us info.

So I think the next part of this work is to find the rote through to development. @utunga any ideas?

[joycekimdesigns]

5/5/21 - Hi All, I've added iphone, ipad, and desktop views for the landing page. iPhone:

[joycekimdesigns]

iPad:

[joycekimdesigns]

Desktop:

[Erioldoesdesign]

LOVE THESE!