top of page

Eyes Open International

MacBook Pro 16.png

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

Time Lapse

 1,075 Hours


My process



(Founder interview & Competitor Analysis)



(Sketching & Low-fidelity wireframes)





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.


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

Competitor analysis.png
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.

Information Architecture.png


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

Frame 18.png
Hi-fi Desigs
Design Changes


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.

Google Chrome - Light.png
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.

Frame 6.png

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. 

Frame 14.png

Primary CTA

  • Yellow to grab user attention. (main focus)

  • Located in Header, Hero section, and pages that receive the most traffic.

Frame 13.png

Secondary CTA

  • Red to comply with brand guidelines.

  • Placed in sections and pages with subsidiary information.


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.
Google Chrome - Dark.png
Previous design
EOI original landing page.png


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
User view flow.png
Frame 12.png
Group 30.png
Frame 15.png

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.  
PixelBook Go.png
The website is Live. check it out!
bottom of page