ONE VOICE
A responsive website redesign for a non-profit organization in West Los Angeles that helps families and students who are struggling in poverty by providing financial aid and emotional support.
Role
Lead UX & UI
Designer
Tools
Figma, Figjam,
Optimal Workshop,
Discord
Project Type
Responsive
Redesign
Time Frame
3 weeks
(110 hours)
OVERVIEW
BACKGROUND
CONTEXT
One Voice is a non-profit organization that is comprised of four different programs: the Holiday Program, the Scholars Program, the Family Assistance Program, and the Barbara Stevens Summer Camp Program. The main goal for their website is to recruit volunteers and to receive donations.
THE CHALLENGE
One Voice users are hitting major pain-points, specifically, feeling lost under the ‘Volunteer’ section of the website, as well as hitting confusion when attempting the donation process.
THE SOLUTION
Restructuring One Voice’s Information Architecture will help alleviate user pain points and help users better understand where they are within the website, creating an easy and accessible user experience. By re-establishing the site map and categorizing labels to user’s mental models, users will be able to easily navigate the site while knowing exactly where they are with no confusion.
RESEARCH OBJECTIVES
SIGNIFICANT OUTCOMES/RESULTS
In implementing a site redesign, One Voice’s business goals were positively impacted. By empathizing with donors and volunteers and discovering their mental models, I was able to design a clear, impactful, and user friendly experience that eliminated frustrations and confusion.
EMPATHIZE
RESEARCH
I wanted to understand the pain points and goals of previous and potential One Voice volunteers and donors. To uncover these goals, I employed 2 distinct research methodologies.
1. COMPETITOR ANALYSIS
Key similarities:
All organizations are seeking donations
All organizations strive for creating a better future
All organizations display their various programs offered
All organizations focus on poverty/the impoverished
Key differences:
Competitor organizations do not repeat images
Competitor organizations display consistent buttons (shape, size, color, etc.)
Competitor organizations have clear donation process
Competitor organizations match logo color to brand colors
2. USER INTERVIEWS
I conducted 9 user interviews with participants ranging from 32-41 years old. 5 participants identified as female, 4 participants identified as male. All participants had either volunteered or donated to a non-profit organization before. 3 participants had volunteered with One Voice at their food drive in years past. Through Affinity Mapping, I was able to find common themes:
The volunteer page created confusion
Users struggled to find active volunteer roles to sign up for and were confused by the images associated with the positions listed
Users didn’t understand copy on the buttons
Donation page caused confusion due to inconsistent color palette and separate buttons with different copy leading to the same thing
Inconsistencies with the site led user distrust
Mobile version felt incomplete with lack of labels/not responsive
DEFINE
WHO IS OUR USER?
I synthesized the insights gained in the interviews to create representative personas to humanize the user and to guide later design decisions. My research led me to identify two user personas: Dan, ‘the donor’, and Valerie, ‘the volunteer.’
Creating these specific personas allowed me to eliminate any personal bias I may have had initially started with. The most crucial things for these users were rooted in their personal and social needs which include understanding what the non-profit organization does to help others and wanting to provide some sort of service to help, whether that be in volunteering or donating. Their motivations also helped me identify them as separate user categories.
EMPATHY MAPS
Based off of my primary research, I was able to dive deeper into my user personas and map out what my personas say, think, do and feel when ordering ice cream online.
IDENTIFYING THE PROBLEM & DEVELOPING SOLUTIONS
Once I was able to determine user goals, motivations, and current pain points, I not only found a problem through Point of View Statements, but also turned it into How Might We...? questions to then solve for a solution.
PROJECT GOALS
Before making any design decisions, I mapped out different business and user goals to showcase common themes and technical considerations. I then met with the stakeholders at Once Voice, presented my findings and reviewed all considerations to make sure that all parties were aligned before proceeding.
BUSINESS GOALS
Increase number of online donations
Increase number of volunteer sign-ups
Provide clarity on who One Voice is, what they do, and who and how they help
Help people in need
Provide clear understanding of core 4 programs
USER GOALS
Donate money quickly and easily
Sign-up to volunteer with no confusion
Volunteer for active roles
Understand what One Voice does/who they help
Navigate website easily
FEATURE SET
To prioritize the features that went into my product, I thoroughly reviewed my research synthesis and personas in order to support my user’s goals. The 'Must Haves' are features that my client and all/the majority of users stressed that they needed to improve their donation/volunteer experience where as the 'Nice to Have,' ‘Surprising and Delightful’ and 'Can Come Later' are features that aren't as important to the user experience in this moment.
INFORMATION ARCHITECTURE: CARD SORT
To get a better sense of how users think about and organize topics relating to volunteering and donating to a non-profit/charity, I ran a card sort where I created 15 different cards with 4 predetermined categories, all of which were taken from One Voice’s website. I then asked 7 participants to sort the cards into the categories that made the most sense to them, or even create a new category if they felt that was best. The insights drawn from this exercise informed the early conception of the sites information architecture.
Key Takeaways:
Two new categories were created -- “Start Your Own Fundraiser” and “Account”
Fundraising topics were confusing for participants to categorize, with some feeling they fit under both "Give" and "Volunteer"
Participants had difficulty distinguishing "Give" vs "Volunteer" which indicates a need to better differentiate these sections with clear, distinctive labeling and content
TREE TEST
To get a better sense of how users navigate a non-profit organization’s website when given specific tasks to complete, I ran a tree test where I created 4 different tasks to test the find-ability of topics within the site. I then asked 9 participants to navigate in a way that made the most sense to them. Along with the card sort, the insights drawn from this exercise informed the early conception of the sites information architecture.
Key Takeaways:
The majority of participants expected to find Fundraising under the topic of Give
The majority of users would expect to find ‘Send a Care Package’ under Give
I can also conclude that the other two tasks are correctly labeled within their topic as is
IDEATE
STRATEGY
SITE MAP
After conducting a card sort and tree test, I was able to create a provisional blueprint of the site’s IA. Restructuring One Voice’s original site map, I created an updated site map to visualize how the site’s content might be organized and structured to reflect potential user’s mental models based on the research I conducted.
Originally, One Voice had 4 categories within their navigation; Our Programs, Volunteer, About, and Give
At first glance, it seemed easy enough to navigate through the original site, but once users were tasked with specific goals, they were confused and felt lost within the site. For example, when users tried to sign up to volunteer with One Voice, once on the volunteer landing page, they were only given the options to fundraise or to send care packages. With all users stating that neither of these options felt like actual volunteer roles and were not what they were expecting to see on this page, I relied on my card sort and tree test to help mitigate any confusion, to determine user’s mental models, and to create a more enjoyable and easy user experience.
Redesigned site map:
Sitemap Changes:
By providing One Voice’s active/in-person volunteer opportunities under volunteer, users won’t second guess where they are within the site or feel as if they clicked/tapped on the wrong category and will be able to sign up for volunteer opportunities quickly and easily
Nesting ‘Fundraise’ and ‘Send Care Packages’ under ‘Give’ allows users to find different ways that they can give back to One Voice quickly and easily
In creating a separate ‘Donate’ page, users will be able to navigate to donate to One Voice in a very clear, concise, fast and easy click, making it a more enjoyable user experience
USER FLOWS
To help visualize the decision points and potential pathways that users may take in order to complete functions within the product, I created a user flow centered around signing up to volunteer for One Voice’s Holiday Food Drive.
Once the user is on the Volunteer Page, they will have the option of which volunteer position to click on
After the user has chosen their desired volunteer option, they will be directed to fill out an application
The user will be prompted to enter their their details, then if the details they entered are correct they will move along to submit their application, and if not, they will be redirected to re-enter their details
TASK FLOWS
To center on each specific task, I created task flows to focus on one singular path. From my user flows, I created 5 task flows. The 2 task flows shown below are as follows:
Signup to volunteer for One Voice
Learn how to donate clothes to One Voice
LOW FIDELITY WIREFRAMES
Once I identified the key pages I was designing for, I took pen to paper to sketch out different possibilities of site design to then translate into wireframes.
In my research I found that 100% of users sign up to volunteer and donate on their desktops due to the ease of filling out form fields, etc., however, One Voice’s current site isn’t responsive so redesigning their site for mobile was also an important task for their livelihood
Because users were confused by the lack of visual hierarchy on the volunteer page, I sketched a clearer and more cohesive design where users can clearly distinguish what volunteer opportunities are available along with more concise button copy to create an easier experience (Volunteer Signup Screens)
Through sketching, I experimented with different ways to make the donation process more straightforward and easier for donors to pick where they want their money to go and explored different ways in which to educate users how to set up a Facebook fundraiser for One Voice (Donation Flow Screens and Facebook Fundraiser Screens)
Testing low fidelity wireframes helped me discover that I need to use use descriptive imagery to eliminate any user confusion
DESIGN
UI DESIGN
MID FIDELITY WIREFRAMES
After running a usability test on my sketches, I digitized to mid fidelity wireframes to ensure that the product was structured in a way to support and facilitate user goals before committing to high fidelity and to leave room for flexibility in my design.
Because I was working directly with One Voice, it was important to make sure that the product was structured in a way to support and facilitate user goals as well as their business goals. While designing the wireframes, I kept the following considerations in mind for desktop:
Since it was important for users to understand who and what the organization does, making sure the homepage represented One Voice’s values while also giving distinct and concrete information was important
Users were confused in the difference between ‘Give’ and ‘Donate’ and by creating a landing page for each to differentiate the two will clear up any confusion
Considerations I kept in mind for mobile:
First Screen: Because One Voice’s original site was not responsive, interviewees were unsure what each image represented on the mobile programs page
On One Voice’s original site, users had to tap the image and land on the next page to see what that image represented
The addition of labels will clear up confusion
Second Screen: Providing users with clear information on how and where to donate items will help increase tangible (clothing and furniture) donations to One Voice
One Voice’s original website did not provide a phone number, address or any information as where people could donate physical which created a lot of frustration from current users/donors
LOGO, COLOR PALETTE, & UI KIT
Since One Voice has been an organization for over 20 years, my client wanted to keep their color palette, typography, and logo as is. Constrained to their previous choices and business decisions, I worked within their desired wants and goals. With the clients wants and goals in mind, I created a UI Kit since there wasn’t an existing one to work off of.
Adamant about keeping their logo as is, without making any major changes, I kept the logo as my client wished by keeping the turquoise, but changing the flat black to a dark blue to provide more cohesion within their existing color palette.
Due to my client’s color palette and button inconsistency, I built a cohesive component library to better improve overall consistency within One Voice’s product.
HIGH FIDELITY PROTOTYPES
With the color palette and component library updated, the re-design of One Voice’s mid fidelity wireframes evolved into high fidelity prototypes. Because this was a responsive redesign, below are screens of both desktop and mobile.
Desktop
Homepage: I wanted to keep the homepage simple, but educational — it is important for users to be able to understand who One Voice is and what they do within seconds of being on the site
Donation Page: Because One Voice has users choose where they want their donation to go, I created a visual by using imagery to help users remember which program was which to help them make the decision
Mobile
Homepage: I created a responsive web redesign so that the One Voice website can be viewed from any size screen
Program Page: In order to create the most user friendly experience, I redesigned One Voice’s Program’s Page with titles so that users would know what each picture represented before tapping
Family Assistance Program Page: In redesigning this page, per my client, I was held to constraints such as keeping a large amount of copy. Although heavy with copy, I used imagery, color consistency and clearly labeled buttons to make this a more enjoyable experience
TEST & ITERATE
INTERACTION DESIGN
USABILITY TESTING
Once I had my high fidelity mockup of the site, I recruited 5 participants to test my prototype made in Figma. My goal was to see if users could successfully complete 4 task flows to test the ease and usability of the product. All 5 users that participated in this moderated test have donated to a charity online and/or have signed up to volunteer with a non-profit organization through their website. Their tasks:
From One Voice's homepage, make a donation to the Scholars Program (desktop)
Sign up to volunteer at this year's Holiday Food Drive (desktop)
From One Voice's homepage, learn how to set up a Facebook Fundraiser (desktop)
Learn more about the Family Assistance Program and how to donate clothes (mobile)
Findings:
All participants were able to complete their tasks, however, ease could be improved.
IMPROVEMENTS/ITERATIONS
I prioritized my feedback to make changes to my designs based on usability tests and standard design practices.
Desktop homepage adjustments:
Original One Voice Homepage — First Round of Updates
Based on my new sitemap, I updated One Voice’s navigation as well as designed a prominent ‘Donate’ button in the navigation to allow users to quickly and easily find where to click when wanting to donate.
Users struggled to understand what One Voice did based on their original tagline so I created new copy to concisely summarize who One Voice is as an organization, what they do, and how they achieve it.
I added a clear CTA that was absent from One Voice’s original site design. On the original site, users mentioned that they weren’t sure where or how to donate or if One Voice’s site was even set up to do so, so in adding a donate button in the navigation and a clear CTA, confusion will be eliminated.
In redesigning One Voice’s homepage, I made sure to follow UX Design best practices and provide insight/links to other categories within their website, something that all users stated that they craved. For example, providing upcoming events information as well as volunteer opportunities from the homepage (other than just the navigation) is something that user were looking for and expected to see originally.
I redesigned the footer and made sure that the colors passed accessibility testing because it did not on One Voice’s original site.
Desktop homepage adjustments:
First Round of Updates — After User Testing
I redesigned the navigation to have a hover dropdown so that users would be able to determine within seconds that fundraising was under give rather than guessing where it was. All participants stated that they were unsure and that a hover feature would make them more confident and save them time.
I changed the footer color back to One Voice’s original footer color, but made sure that all copy passed color contrast/accessibility testing as One Voice’s current site did not.
Desktop volunteer page adjustments:
Research participants felt the most lost when on One Voice’s original volunteer page. Once directed to this page, they were unsure if they had accidentally clicked something different since they weren’t directed to One Voice’s volunteer opportunities. Showcasing One Voice’s active volunteer opportunities will clear up any confusion and allow users to easily sign up and navigate within the page/site.
Users voiced frustrations that the copy next to the images was hard to skim. In my iterations, I originally made the copy into bullet points, but it actually felt too clunky so I decided to bold the headline so that user’s eyes would be drawn to that area first.
From One Voice’s current site, I made sure to create a clear grouping between photos and its copy since all users were confused on the original One Voice website and mixed up which picture belonged to which text. Also, creating clear and consistent buttons without too much copy helped users decipher what was what.
Mobile programs page adjustments:
One Voice’s original site does not have labels on their specific program cards which caused a ton of user frustration. In order to determine what the picture represented, users had to tap on the picture and be redirected to that specific page. This caused issues for users, even causing anger for wasted time. I created labels to improve ease and usability.
I used new and different pictures since users were thrown off by the repeated stock images.
I made the donate and volunteer buttons consistent and more prominent since in their original state they were small, the type was tiny, and the padding was off.
I improved accessibility by increasing font size.
I redesigned the footer by making sure the new colors passed accessibility testing.
FINALIZED DESIGN
Click below to view my finalized design in an interactive prototype. After iterating on my designs based on user and business feedback, I found that ease and accessibility were greatly improved.
The 3 flows that I created for the desktop MVP:
Make a donation to the scholars program
Sign up to volunteer at this year’s Holiday Food Drive
Learn how to set up a Facebook fundraiser
The 1 flow that I designed for the mobile MVP:
Learn more about the Family Assistance Program and how to donate clothes
REFLECT
FINAL THOUGHTS
DECISIONS, STRUGGLES & LESSONS LEARNED
Designing within my client’s constraints, (color palette, logo, typography and specific copy,) as the lead designer on this project, I found ways to improve the user experience while staying within the constraints set by the stakeholders at One Voice. Starting this project, I was worried because the stakeholders weren’t knowledgeable when it came to their product which I initially saw this as a negative. For example, when I had certain questions regarding their Information Architecture, they said they didn’t know and to do whatever, however, I was unsure where to turn. But quickly this turned into a positive.
Realizing that all I had to do was turn to my research to decipher my design decisions gave me confidence and allowed me to step up and take charge as the lead designer. I stopped asking questions and instead, referred to my research — presenting to the One Voice staff while being able to defend and back up my design decisions with my findings.
OPPORTUNITIES
Met with One Voice several times to present my research findings, project goals, and to map out future steps
Presented my final prototype to the entire staff in-person
Will work directly with a developer for a true handoff
FUTURE CONSIDERATIONS
If I were to do this project again, I would be less timid and more sure of myself from the start. Being able to rely on my design decisions from my research will give me confidence for future projects. If I were to have more time, I would complete more user interviews, along with gaining more participants for a card sort and tree test to ensure that my findings are widely dispersed around the community and not just based on a small number of individuals.
Although One Voice is waiting on funding to implement my designs, it would have been ideal to work with a developer early on to ensure that we are all in alignment and that each element and feature is implemented as intended.