Responsive Website Redesign for New Alternatives, an LGBTQ+ Non-Profit Organization

 

Timeline
2 Weeks, Jul-Aug 2020 (Remote)


Team
Jasmine Brown | Marta Fernandez

My Role
Research, Experience Design,
Visual Design

Methodologies
Responsive Design, Screener Surveys, User Interviews, Persona, Journey Map, Sketching, Wireframing, Prototyping, Usability Testing, Iterative Design and Testing

Tools
Figma, Miro, Zoom, Zeplin, InDesign

Overview

We were tasked to do a responsive redesign for a non-profit organization’s website to resolve any usability issues in light of current events.

New Alternatives is a non-profit organization dedicated to increasing the self-sufficiency in LGBTQ+ homeless youth and young adults by enabling them to transition out of the shelter system and into stable adult lives.

As the landscape of volunteering is evolving in the wake of COVID-19, local non-profit organizations must now find ways to connect with their communities digitally and need assistance to revamp their web presence.

The primary goal of this project was to resolve any usability issues occuring on New Alternatives’ responsive website for their primary persona.

New_Alternatives_Responsive_Mockup3.png

Research

As part of research, we used screener surveys to first screen the right participants to interview. In our interviews, we were looking to understand users’ experiences and behaviors with using non-profit websites.

We sent out a short Google Forms survey to 29 people to screen potential users to interview. We wanted to interview participants who are interested in supporting LGBTQ+ or homeless youth issues. We asked questions such as their frequency of interacting with non-profit organizations and the ways in which they contribute (e.g. donate, volunteer, or fundraise).

We reached out and interviewed 5 people on Zoom and was looking to understand how they use/interact with non-profit websites and identify goals and pain points to improve their experiences. Doing user interviews produces qualitative data and it allowed us to follow-up with them and ask ‘why’ to understand the motivations behind their actions.

Synthesis

Affinity mapping helped us see common trends among the people we interviewed. These insights helped us to create our persona.

We affinity mapped on Miro to gain emerging insights and themes after our user interviews. This aids in the development of our persona and helps us focus our design efforts on solving the user’s problems.

New_Alternatives_User_Insights.png

Persona

New_Alternatives_Persona_Matt.png

Problem statement: Matt found a non-profit organization he wants to support. He is having a hard time finding the information he needs to feel comfortable donating. How might we provide more credibility so that Matt can find the information he needs?


Usability Testing

Usability testing New Alternatives’ current site helped us discover that users were not able to easily find testimonials on the site since it was in multiple places.

We did one round of usability testing on New Alternatives’ existing site to discover any usability issues the site may have so that we can improve the experience for our primary persona by observing their behaviors and discovering expectations.

The results of our usability test

Testing with 4 users, we found that users can successfully accomplish 3/4 of the tasks we asked them to. The task that was difficult was finding the testimonials. This is because the site currently has it in two pages: Client Services and Get Involved. It also lives alongside other text on the page, which makes it not stand out as much.

New_Alternatives_Original-Site_Usability_Testing.png

Design

We added the mission and stats on the homepage so users can easily and quickly see results and proof of past successes. We also added a page for testimonials.

We added the mission and stats on the homepage so users can easily and quickly see results and proof of past successes. We also added a page for testimonials.

High-Fidelity Mockups for Desktop and Mobile Breakpoints

New_Alternatives_Desktop_Mockup.png
New_Alternatives_Phone_Mockup.png

Results and Takeaways

 

Putting the testimonials into its own main first level navigation made it easier for users to find it.

• We usability tested our hi-fi mockup with 4 users and found it easier for users to find the testimonials in the “Our Stories” page.

• I learned the importance of putting information above the fold on a homepage to convey clear messaging.