Click buttons/ navigation bar to start the Interaction 👇🏻
We made three main redesigns based on our research findings.
( Reference section 01 for more details)
⛳️ Redesign 1:
NavigationBased on the new information architecture, we redesigned the navigation. We replaced the click dropdown menu with a dropdown menu on hover to enhance the navigation experience and let users switch between pages more efficiently. Different designs for hero sections in primary, secondary, and tertiary pages also help to improve the clarity of information hierarchy.
Besides, after carefully considering the user personas, we kept only the "Donate" button on the global navigation bar and moved the membership CTA button down after the mission statement section.
⛳️ Redesign 2: Card layout
To create a more natural browsing experience, we reorganized information and replaced the walls of text with a card layout - a more consumable size of information that help visitors find contents they need. We made other hard-to-read sections (such as the Q&A section) into expandable cards. The new card layout also helps build a clear visual hierarchy of each page.
⛳️ Redesign 3: A new style guide
Before applying any visuals, we discussed with our client to come up with a brand tenet. With the tenet in mind, we created a visual identity based on their previous brand guidebook.
Based on the guide, we made several adjustments to the visual system 😎
▪️Our clients were also concerned that the pink was slightly light with the white text inside. Tested users connect large areas of pink with a sense of feminity. We adjusted the original primary pink to be darker and more neutral to make the text more readable.
▪️We added the dark navy as a secondary color to create an eye-catching visual contrast and also some bright gradient colors for other decorative purposes.
▪️We played with photos and illustrations, re-edited their existing film photos, combining them with the color palette to generate hero images.
▪️To keep the site fun, we applied a mixture of different shapes and arrangements. The combination of an overall clean layout with the right amount of lively elements creates a vibrant and spirited feel for the user.
