EarthWise
Project Overview:
EarthWise is a non-profit environmental group. The client requested an updated website to better showcase their company, improve branding and increase traffic to their site.
​
Goal:
To create a clean, easy to navigate website with a cohesive brand theme.
​
My Role:
Lead UX designer and researcher
​
My Responsibilities:
User and market research, paper anddigital wire-framing, low and high-fidelitymock ups and prototypes.
​
Understanding the User
User Research/Pain Points/Persona/Problem Statement
Summary of User Research
I interviewed the client to understand their needs and desires for the website moving forward. We discussed difficulties with their current site and created a list of desirables for the updated site. I also conducted an audit of other environmental company websites to better understand the market and user needs. I noted that sites with visual clutter and over-saturation of information were overwhelming and difficult to navigate.
Pain Points
1
Site Organization
Poor information flow and use of heirarchy
2
Accessibility
Overwhelming visuals impacting usability and accessibility
3
Theme
Improve brand identity and overall website theme
Persona
Ivan Frasier
Age: 30
Education: BS
Hometown: Olympia, WA
Family: Single, cat
Occupation: Founder of EarthWise
Goals:
-
"I would like to have a well organized company website."
-
"I would like to teach earth-friendly practices to others."
-
"I would like to easily organize volunteer events."
​
Frustrations:
-
"Not getting enough traffic to my current website."
-
"Promoting volunteer events is difficult."
-
"Creating a cohesive brand theme throughout the site."
Problem Statement:
Ivan is an environmentalist who needs an
informational website, because he would like
to promote his non-profit environmental company.
Initial Design Phase
Paper and Digital Wireframes/Low-fidelity Prototype/Usability Study
Site Map
A basic site map was created to help organize site information.
Paper
Wire-frames
The main ideation process began with paper wire-frames of the homepage. Care was taken to create clear hierarchy of information and clean navigation which paved the way in creating an easy user interface to reach many types of users.
Digital
Wire-frames
Once the best elements and layouts of the paper wire-frames were chosen, digital wire-frames where created to begin finalizing design aesthetics and site function. Both website and mobile app wire-frames where created.
Usability Study
An unmoderated usability study was implemented at this stage to assess website content and user flow through purchasing an item from the site shop. 5 participants of varying ages, sexes, and technological background completed the tasks and provided feedback at their convenience via written responses.
Usability Study Findings
1
Calendar
3 of 5 participants suggested the addition of an events calendar on the volunteer page.
2
Navigation
2 of 5 participants felt the text items in the header menu where too close together making for poor readability.
3
Appearance
2 of 5 participants remarked that having navigation cards for all main pages on the homepage would improve accessibility to these items.
Refining Designs Phase
Mock-ups and High-fidelity Prototype
Mock-ups
Adjustments to the layout and design of the site were made according to feedback from usability study participants, then mock-ups where created to begin designing a cohesive theme across the site.
Before study
After study
In this example, the header menu was updated to allow greater distance between page links for improved readability and the updated design was also changed to include cards for each main page of the website for improved navigation and user flow.
Before study
After study
In this example, the updated design was changed to include an events calendar for users to see future events and the thumbnail events where changed to "featured" events.
High-fidelity
Prototype
A high-fidelity prototype was created for the main user flow of navigating to the site's shop and completing a purchase.
Mobile site
design
Consideration of mobile site design was also completed to enhance usability across platforms.
Accessibility
Considerations
1 / High contrast color theme
Color palette was chosen to include high contrast for better visibility while also maintaining an environmental feel to meet brand standards.
2 / Navigation
Clean navigation and user interface created to improve use across platforms, devices and multiple types of users.
3 / Communication
Simple language and iconography used to be understood by users with disabilities or English as a second language, thus improving site usability.
Takeaways
Impact/
One participant quoted, " I love the clean navigation and overall feel of the site. It seems to embody the brand well and the brand is recognizable across the site."
​
Takeaways/
I learned to not underestimate the importance of planning and creating a site map in order to better organize site information before attempting to create an visual ideations.
Next Steps
1
Usability Study
Complete the full website, along with mobile platform designs, then complete another usability study for full functionality.
2
Refine Site
Using usability study findings, make final refinements to site.
3
Finalize Site
Finalize site with client and complete hand off to development team.