Website Update & New features

Educate2Envision

My Role

UX Designer

Team

Joe Millea - UX Designer & User testing
Prashant K. - UI Designer
Katia G. - E2E Director and Primary Stakeholder

Tools Used

Figma, Google Suite, Zoom (User Interviews)

year

2021

The Problem

Educate2Envision, a non-profit that helps start schools in rural Honduras was implementing a new initiative to partner with clients in the coffee industry. Additionally they needed a usability audit of their website.

The Solution

Update existing website to be more usable and easy to navigate. Create a redesigned coffee partners page to help launch E2E's new partnership initiative.

A long green arrow that slides in from the left

User Research

Usability Testing | Journey Mapping | Personas |  User Stories

Stakeholder Goals

  • I was given a list of stakeholder objectives to establish what was working and what needed updating.

Usability Test

  • Based on the stakeholder needs as well as my own analysis I created a usability test to measure KPIs, and content understandability.

Personas

  • I developed personas based on the audience of E2E as well I my own previous experience working with non-profits & education.

User Stories & Journey Mapping

  • Lastly, user stories and journeys were created to show stakeholders exactly what needed to be changed on the existing website.

Click to View Research Details

Distilled User Journey

Research Results & Pain Points

Link to Miro board with distilled results

Patterns & Themes

  • 80% of participants were partially confused by the layout of the “Our Approach” page. The information needs to be more clear.
  • 100% were confused about how the coffee pages fit in. This feature needs to be highlighted more prominently.

Priority '0' Insights

  • Based on the theme that: the ‘our approach’ page is not clear and is not visually consistent, an insight is: the ‘Our Approach’ page needs to be redesigned.
  • Based on the theme that: located and understanding how coffee is involved is difficult, an insight is: Coffee partners/communities need to be part of the parent information architecture.

Priority '1' Insights

  • Based on the theme that: users were unclear as to what specifically E2E does, an insight is: real-world examples need to be more prominent.

Long green arrow that slides in from the left.

Design

Icon representing wireframes
Icon representing User TestingIcon representing prototyping

Content | Wireframes | Micro-interactions | Developer Handoff

Content Development for Coffee Partners

Updated Content & Layout

  • Based on the user testing the content was refined to meet the user needs
  • They layout was iterated on and rapid user testing was done to allow users to easily scan the content
  • To facilitate the needs of the stakeholders a simple google doc was created to allow for multiple team members to iterate on the content.

Wireframes

Iterate...then Iterate Again!

  • While the content was being created wireframes with various layouts were refined along with the content
Original
Version 1
Version 2
Version 3
Final

Micro-interactions

Discoverable & Delightful

  • To ensure that the content was discoverable and delightful micro-interactions were established.
  • This included button states, scrolled animations and drill-down modals where necessary.

Button States

Default State
.primary-button {
 padding-right: 30px;
 padding-left: 30px;
 border-radius: 95px;
 background-color: #ff7c2a;
 -webkit-transition: color 200ms cubic-bezier(.19, 1, .22, 1), background-color 200ms cubic-bezier(.19, 1, .22, 1);
 transition: color 200ms cubic-bezier(.19, 1, .22, 1), background-color 200ms cubic-bezier(.19, 1, .22, 1);
 font-family: 'Muller Bold', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
Hover State
.primary-button:hover {
 background-color: #f7d34f;
 color: #000;
Pressed/Active State
.primary-button:active {
 background-color: #fee27c;
Try It! Click this button.
(it doesn't link to anything)
Learn More

Scroll Animation

Modals

Developer Handoff

Make it Easy

  • Include notations where necessary
  • Prototype of scroll animations
  • Code & Usage guides
  • Clear delineation of the user flow
A long green arrow that slides in from the left

Let's Work Together!

Thank you! Your submission has been received and I will be in touch in the next day or so!
Oops! Something went wrong while submitting the form.
Joe Millea
joe.millea@gmail.com
763.607.7880