Eyes Open International
I redesigned the website layout for a non-profit org. fighting human trafficking and simplified navigation to improve their content organization and achieve a more modern look.
UX & UI Designer
Wordpress and Elementor
(Founder interview & Competitor Analysis)
(Sketching & Low-fidelity wireframes)
Eyes Open International (EOI) has struggled with content organization in the past and asked me to modernize their website while maintaining brand consistency. I payed careful attention to how my design choices would continue to reflect the purpose and impact of EOI.
My goal was to streamline the EOI website interface. Due to the vagueness of that statement, I met with the Founder and Project Manager to determine project goals, learn more about EOI, and adjust my process to achieve the desired outcome for this project to set some objectives.
1. Make the donation core loop a primary action to get users to donate.
2. Use whitespace with simple and minimal design choices to attain a modern look.
3. Effectively distribute information to be easily digestible and less overwhelming.
Success, in relevance to this project, is defined as a website in which the organization's purpose is understood, information is easily found, the path to make a donation is clear.
I understood that I would be taking on this project with some constraints and limitations so I did my best to quickly learn and familiarize myself with wordpress features.
Retain original copy
Maintain brand consistency
Competitor website analysis
I studied large non-profit organizations with similar causes and how they structure their website to help define a successful layout.
I noticed that most non-profit organization include the following elements on their websit:
A prominent call to action button located either in the header or hero section.
Clear navigation (must haves):
Hero section including a brief description of the organization
Companies in which they’ve partnered with represented by their logos.
Social media links
Two column footer including contact info
I restructured the navigation by removing elements that contributed to the overcrowding of the site and reorganized content into similar groups under relevant pages. The current site map has less pages and is not as busy, making the navigation simple and easy to follow.
Low Fidelity frames
I designed three different versions of the landing page. The differences between each page are highlighted in blue. After receiving feedback from the stakeholder, I landed on version C.
Hi - Fidelity Designs
Top menu navigation drop down design
I restructured the navigation by simplifying the Information Architecture of the website to make it easier for donors to find the information they need before making a donation.
I decided on a drop down menu design which is most commonly used for sites with a plethora of info.
The color red is used as a visual cue to signify donors of the current page and is also used when hovering over a menu option.
Call to action button (CTA)
Donate button is a core loop design and in the color yellow to capture user attention.
A prominent CTA that leads to donations is a key requirement for a non-profit organization, such as EOI, because donations will contribute to their purpose of promoting human trafficking awareness and preventing labor & debt bondage.
Using contrasting colors and copy between each CTA allows users to easily differentiate between them.
Yellow to grab user attention. (main focus)
Located in Header, Hero section, and pages that receive the most traffic.
Red to comply with brand guidelines.
Placed in sections and pages with subsidiary information.
Impactful image and copy that informs user of EOI's purpose and provokes an emotional response that will encourage users to donate.
The hero section can have an effect on a user's decision to donate which is why I included a provoking image and statement that clearly convey what EOI aims to acomplish.
Layout and elements
The Landing page layout is designed to quickly guide the user's view through all important elements that may influence their decision to donate. The visual hierarchy of elements is based on how users naturally scan a page, from left to right, to draw their attention to the main focus.