Austin Humanists at Work Case Study

Overview

Austin Humanist at Work is a local non-profit organization that has been around since 2014.

Our team was challenged to redesign the existing website into a user friendly design that users can easily interact with.

‍
MY ROLE
‍
UX/UI Designer
UX Researcher
DURATION

3 weeks
TEAM
‍
4 UX/UI Designers
TOOLS
‍
Figma, Miro, Trello, Adobe Photoshop

Problem

How might we improve Austin Humanists at Work’s website design so that potential volunteers, donors, and those seeking resources can successfully navigate and engage with the non-profit based on iterative usability testing.

Solution

Simplify the website design with the users in mind by adding three solutions:
Add two call to actions for a Donation and Volunteer button on the homepage
Redesign the Donation Page with clear CTAs and less text
Redesign the Volunteer Page to have a sign-up form located directly on the site

Impact

User Research

We started our user research process by interviewing 5 total users and conducting a survey to pinpoint and understand who our users are.

User Survey insights

User Interview Insights

During our user interviews we found out one key factor. Users needs transparency when it comes to getting involved with a non-profit organization.

Synthesize & Empathize

After our team interviewed 5 users and conducted the survey, we created an affinity diagram and a empathy map. This helped us understand and empathize with our users' goals and pain points.

Define our User Persona

After synthesizing our user research data and creating our empathy map, we were able to define our user persona and create a storyboard that ideally portrays Audrey’s interaction with Austin Humanists at Work’s website.

Research on the Current Website Design

The next part of our research was to understand how users like Audrey interact with the current website. To understand the user’s expectations and pain points, we conducted a heuristic evaluation on the current website, created a competitor analysis, and performed usability testing.

Heuristics

By performing a heuristic evaluation on several webpages, it allows us to really study the current website design and as a group discuss some potential user interface recommendations.

Competitive Analysis

Creating a competitive analysis allowed us to understand the strengths and weaknesses of different direct and indirect competitors.

Current Website Usability Testing

Last research we conducted a usability test on the current website. During this usability test, we asked users to perform 4 tasks they had to complete while navigating through the website.
Frustrations noticed during usability testing

- Users could not easily navigate the site

- Users could not figure out how to sign-up to volunteer

- It was unclear what the organization’s goals and mission were
‍
- Users were unable to consistently find where to donate money

Prioritizing on Features to Redesign

With the data gathered on the usability feedback, heuristic, and competitor analysis, we created a feature prioritization matrix to help us narrow down on the features we wanted to implement on the redesign for the website.

Mapping out User Flow and Establishing our Navigation

Last step before we start wireframing, we wanted to establish the user flow and created a site map on how the new navigation bar should look like.

Designing & Testing the experience

Low-Fidelity Wireframing

With all the user research gathered, we each created sketches of the homepage, donation page, and volunteer page. We then dot voted on which aspects of everyone’s sketches we wanted to incorporate.

Low-Fidelity Usability Testing

To remain consistent, we performed the same usability testing tasks on our prototyped low-fidelity wireframes.
Frustrations noticed during usability testing

- Navigation bar seemed to cluttered

- Social Media should be located only once on the page.

- Volunteer sign up had no submit button.

Mid-Fidelity wireframes and Usability Testing

We went back and designed our mid-fi wireframes with the low-fi usability feedback in mind.

Then to remain consistent, we performed the same usability testing tasks on our prototyped mid-fidelity wireframes for desktop and mobile.
Frustrations noticed during usability testing

- Users found our initial drop-down menu design on the item donation page to be too dense and visually inaccessible.

- Users were confused that the donate call to action only led to a monetary pop-up donation option. They rather it take you to the donation page, so that they know their different options in donating to the non-profit.

Starting our High-Fidelity Wireframes

In our low and mid-fidelity we mainly focused on the user flow and information architecture excluding design elements so that we could get feedback pertaining specifically to the UX of our redesign rather than stylistic components.

We are now ready for the UI development process, for the first steps we decided on some color palettes using color theory while keeping accessibility in mind as a basis and each created moodboards of what we interpreted the redesign to look like. We then dot voted and came to a consensus on our vision.

First Round of High-Fidelity Wireframes

Using the consensus of our vision for our redesign and the mid-fidelity feedback, we iterated and prototyped our first round of high-fidelity desktop and mobile wireframes.

A/B Testing

During our dot voting, we decided we wanted to perform two A/B testings on our high-fidelity wireframes. One for which logo suits the website better, and the second one focusing on the color palette for our call to actions.

5 Second Usability Testing

Another test we performed on our high-fidelity wireframes is a 5 Second Usability Testing. For this test, we only allowed the users to take a look at our home page for 5 seconds and they were asked some questions after the 5 seconds were up.

High-Fidelity Usability Testing

Of course the last test to remain consistent, we performed the same usability testing tasks on our prototyped high-fidelity wireframes for desktop and mobile.
Frustrations noticed during usability testing

- No frustrations noted really on the navigation, but users did comment how the drop shadow was too much for our CTAs.

Final Redesign vs. Current

Finally, we gathered all the testing data and feedback on our high-fidelity wireframes and iterated our final version of our website redesign for Austin Humanists at Work. Check out and compare the redesign vs. the current website.

Current Website

Final Website Redesign

Mobile Website Redesign

Conclusion

Through a lot of research and multiple testing, we were able to integrate a user friendly design where users were no longer reading through paragraphs of text to find what they were looking for. Three main things we incorporated that users wanted:

1. Redesigning the Donation page to have less text and clear call to actions for different ways to donate.

2. Adding a sign-up volunteer form directly on the Volunteer page.

3. Add clear transparency on the non-profit organizations mission, donations, and what the volunteers will be doing.

Lessons Learned

1. Don’t be afraid to suggest some design decisions. I had good input and suggestions to certain design aspects, but I just need to be more confident when voicing my ideas. Everyone’s ideas and suggestions should be heard and discussed.

2. Project Management is essential. It is important to understand who is working on what tasks during the project, and what tasks are completed. Having good project management through the entire process allows us to be more efficient with our time and helps meet our deadline