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.
Role
UX & UI Designer
Tool
Wordpress and Elementor
Time Lapse
1,075 Hours
My process
Research
(Founder interview & Competitor Analysis)
Ideate
(Sketching & Low-fidelity wireframes)
Hi-fidelity
Designs
Publish Website
The challenge
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.
Conducting Research
Stakeholder Interview
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.
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.
Key Requirements
-
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):
-
About page
-
News page
-
-
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
Information Architecture
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.
Ideate
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
Before
Current
Design Changes
1
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.
2
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.
UI Disparity
Using contrasting colors and copy between each CTA allows users to easily differentiate between them.
Primary CTA
-
Yellow to grab user attention. (main focus)
-
Located in Header, Hero section, and pages that receive the most traffic.
Secondary CTA
-
Red to comply with brand guidelines.
-
Placed in sections and pages with subsidiary information.
3
Hero section
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.
Current design.
Previous design
4
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.
User (view) flow
Let's Recap!
Using whitespace, I provided the website content with more breathing room.
I structured the website layout with a focus on UI elements that presented justification for donations and pave a way to increase donation revenue.
I simplified the Information Architecture which abridged the pathway for donors to learn how their donations are being spent.
