top of page

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.

​

Screen Shot 2023-01-26 at 7.00.55 PM.png

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.

beard-man.png

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.

Low-fidelity
Prototype

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.

bottom of page