CHiPS

Concept | Responsive Web Design

Summary

A redesign of CHiP's website that focuses on improving the user experience for volunteers at both the desktop and mobile breakpoints.

View Prototype

Activities

Competitive Research
Feature Analysis
Screener Surveys
User Interviews
Affinity Mapping
Archetype Development
Prototyping
Usability Testing

Tools

Figma
Miro

Team

UX Designers (3)

My Role

UX Researcher
UX Designer
Interaction Designer

Timeline

November 2020
2-week sprint

The Challenge
Our team was charged with redesigning the website for CHiPS, ensuring that it was both usable and built with the needs of the primary user in mind. Our final product would also need to be built for both a desktop and mobile viewport.

Discover

Our team started research by reviewing CHiPS' current website and learning more about who might use it. Based on the site's messaging and content, we decided to focus on the experience of current and potential volunteers. We screened over 25 individuals looking for those with extensive experience in volunteering. We interviewed 6 to learn more about their needs as volunteers and used another 5 for usability tests on CHiPS' existing website in later research.

Our user interviews were incredibly helpful, providing us the following condensed insights:

Define

Using our research findings, we crafted a persona to guide our design thinking. Let's meet Monica:

Monica has some clear needs from the non-profit sites she visits, which we broke down into three key tasks for testing:

As mentioned earlier, we ran usability tests on the existing site with screened candidates. We learned most of the site was user-friendly, but lacked functionality that our volunteers were expecting. The single biggest issue was the sign-up process for volunteers. The image below shows there isn't an option to sign up online and the sign up form is buried within the body of the page.

Develop

With our initial research complete, we crafted the following problem statement:

A picture of our problem statement, which reads: 

People want to volunteer at non-profits that align with their values but are limited by their existing commitments.

Monica is struggling to personally connect with the organization and find times to volunteer that fit her busy schedule.

How might we help her engage with the organization so she can find the trust and confidence necessary to volunteer during times compatible with her schedule?

We took our synthesized findings from user interviews and initial usability tests to build our version of CHiPS' site in a medium fidelity prototype, testing specfically for the ability to sign up users for a volunteer shift.

In hindsight, this was an error. While this allowed us to focus on the biggest issue from our initial usability testing, we missed an opportunity to test other aspects of our design, namely how someone like Monica would connect with CHiPS' staff and/or volunteer team.

Our testing on the mid-fi prototype did confirm that the volunteer sign-up process was significantly improved in our updated layout. Users were quick to find the shift they wanted, signed up easily, and felt like the process was intuitive, all things they cited as challenges in initial testing. With these results, we moved into high fidelity designs for our desktop and mobile viewports.

Deliver

Unlike our previous prototype, the hi-fi mock focused on the initial three tasks we identified. All of our testers found the prototype to be intuitive to navigate, which was appreciated given how much of the navigation was changed to highlight key tasks users want to complete on non-profit sites. These changes included:

Users were able to complete the first two tasks successfully, with all users learning about how much CHiPS had raised and successfully signing up for a volunteer shift.

The third task, however, revealed a gap in our test prep. We had succeeded in creating several connection points for Monica and her fellow volunteers, but had failed to create a focused place for volunteers to connect. As a result, users for this task gave us a variety of answers that could work, but weren't tagged as the optimal choice.

Takeaways & Next Steps

While we had succeeded as a team in making great strides to update CHiPS' site, I felt like I failed to catch some relatively easy mistakes. I noticed how much more focused my following projects' usability tests were and I fully credit this experience with improving my research methodologies.

When it comes to our design, we'd look to iterate on the following items:

Non-profits like CHiPS depend heavily on their sites to draw attention to their causes and the needs of the organization to affect change. This redesign showed me just how valuable UX is to ensuring those needs, and the needs of users like Monica, are met at every step of a volunteer's journey.

View Next Project