A RESPONSIVE WEBSITE REDESIGN

CHiPS

I worked with a team of UX Designers to help CHiPS, a non-profit organization located in Brooklyn New York, with a website re-design. Our goal was to create a new responsive design that enhances the users experience on desktop and mobile. To accomplish this, we first researched users and tested CHiPS original website for areas of success and points of friction, then crafted a persona and journey map to help guide our team through design solutions, and finished with usability testing of our high fidelity prototype. The following case study features highlights of our process and results.
introducing

Our UXDI Team

Seth Pritchett
Galina Bystrika
Shavon Bernard
Dana Richards
OUR SUPPLIES

Methods

User Interviews
Affinity Mapping & Synthesis
Persona Crafting
Journey Mapping
Design Studio
Usability Testing & Reporting
Prototyping

Tools

G Suite
Miro
Slack
Figma
Zoom

My Role

Interviews
Research
Synthesis
Design
Testing
Prototyping

our plan

1

Learned more about charitable donors through research and interviews, then tested the success of CHiPS original website

2

Utilized persona crafting and journey mapping to discover our opportunities for design solutions

3

Drafted design solutions based on the needs, wants and opportunities of our users

4

Tested the function, navigation, and user control of our high fidelity prototype

1. Interviewing Charitable Donors & Testing CHiPS Original Website

Our team surveyed and screened 34 people to find and interview 6 charitable donors who contribute their time and resources to non-profit organizations’ websites. For the interview, we focused our questions around the frequency of use, engagement level, device and feature preferences of their favorite experiences. From these interviews we gathered the following insights.

Insights We Uncovered

Charitable Donors

We found that charitable donors rely on their desktop computer and mobile devices to engage with the homepage, volunteer forms, and donation payment process to accomplish their goals.

TESTING THE ORIGINAL

CHiPS Website

Our team used these insights to craft a discussion guide and test the homepage, volunteer form, and donation payment process of CHiPS original website. Since CHiPS website not designed to be responsive for mobile, we tested the CHiPS website on desktop only. With 5 charitable donors as our test participants, we focused our research around the find-ability, usability and clarity of those 3 primary pages. Our test results showed that all 5 participants succeeded in find-ability testing, but struggled with usability and clarity. Highlighted below are the results of our testing.

HOMEPAGE
VOLUNTEER FORM
DONATE PAYMENT

2. Defining Our User & Discovering Opportunities To Help

Our team used the results of our research, interviews and testing with charitable donors to explore and define the behaviors, needs, goals and pain points they experience when engaging with websites of non-profit organizations. We captured our findings in the following persona and journey map as a way to help our team maintain focus on our user as we worked through design solutions.

Introducing our persona

Meet Anna-Grace

Key points for anna-grace

Goals

Sign up, volunteer and donate resources online

Needs

To quickly and easily find the volunteer form and complete the donation payment process.

Pain Points

Volunteer opportunities go unfulfilled without clear scheduling. Donors have limited resources and expect receipt confirmations when contributing.

learning more about

Anna-Grace's Journey

Highlighting Anna-grace's journey

Lows

Signing up to volunteer can be difficult when availability and scheduling is unclear

Highs

Friend refers him to new job
Hired after interview
Succeeds in completing and submitting volunteer form and donation process

Opportunities

Provide quick access, clear communication, and confirmation receipt to volunteer form and donation process

Defining The Problem & Finding Our Opportunities

· Anna-Grace wants to know that she can quickly and easily sign up to volunteer and donate resources to a non-profit organization.
· How might we help Anna-Grace accomplish her goals to volunteer and donate support to CHiPS?

3. Designing A New Responsive Website

Now that our team had researched the problem space, tested CHiPS orignal website, and discovered more about Anna-Grace, it was time to turn our attention toward designing a new responsive website that will enhance Anna-Graces’s experience and meet her goals. The problem is our team had just 3 weeks to research, test and present a prototype. And with just 9 days left, we focused on our persona and journey map to help guide us through the UX iterative design process as we developed our solutions from low-fidelity wireframes to hi-fidelity prototype. The following designs feature the final homepage, volunteer page and donate page.

EXPLORING AND DEFINING OUR

Design Solutions

homepage

When creating the homepage, our team utilized our testing results by placing the Volunteer and Donate page links in the top navigation. In addition we condensed the amount of overall content to highlight important elements and avoid information overload Anna-Grace experienced in the original design.

Desktop

Mobile

Volunteer

From our previous test results, the link for CHiPS orignal Volunteer Form was difficult to identify and the usability didn’t function as intended. To solve this our team chose to limit the amount of overall information and highlight only key actions Anna-Grace would make when looking to sign up as an individual, in a group, as a minor, or if it was court ordered.

Desktop

Mobile

donate

When our team considered the test results of CHiPS original Donation Payment Process, we found that clarity and placement of the Donation Payment Process is key to Anna-Grace. As shown here, we’ve highlighted this by placing it prominently at the top of the page while also promoting clarity by reducing the amount of the page’s overall content.

Desktop

Mobile

4. Testing

As we moved through the iterative design phase, our team continued to test the success of our solutions with participants. Below is the link to the test script we used and new high-fidelity and responsive design prototype for desktop. Here we focused on testing find-ability, usability and clarity of the Hompage, Volunteer Form, and Donation Page.

Test Script

Follow our test script to see how Anna-Grace volunteers and donates using CHiPS new responsive website.

View

Prototype

Use the test script to explore our team’s new responsive high-fidelity prototype for desktop.

View
High-Fidelity

Usability Test Report

Recap

When our UX Design team first interacted with CHiPS non-responsive website, we knew there were plenty of opportunities to enhance the experience over our 3 week project timeline. Through research we found that charitable donors use both desktop and mobile devices to access non-profit’s websites where they rely on the homepage, volunteer form, and donation page to accomplish their primary goals. Then our team used these insights to test CHiPS original webesite. The results showed that participants experienced friction with too much information being presented at once as well as major usability issues with the volunteer form. Additionally, our results showed success with findability and clarity of the homepage and donation payment process. From our research and testing, our team crafted a persona of Anna-Grace and a journey map detailing her experiences as a volunteer and donor. From this we developed a deeper understanding of what Anna-Grace needs and discovered opportunities that could help her reach her goal of volunteering and donating while using any device she owns. Through design iteration and testing, our team delivered a high-fidelity prototype that enhances Anna-Grace’s experience and accomplishes her goals.

Next Steps

Enhance design of top navigation and add CTA buttons to help findability and clarity

Add feature for donation receipt confirmation to email

Complete high-fidelity prototype for mobile and conduct usability testing