user research
THE PROBLEM: Smaller local nonprofit organizations do not have enough money or resources to spend on creating an engaging website. Without user engagement, this affects the volume of donations given to the charity and also limits the number of volunteers and donors.
THE SOLUTION: Create a redesign of the Variety website by designing a better donations process, highlighting events and current news, and improving UI interactions for users.
MY ROLE: UX Designer, Creative Director, UI Designer
GROUP MEMBERS: Sharon Navarro & Katelin Riley
TOOLS: Adobe XD, Adobe PhotoShop, InVision, Miro, Media Coder, Zoom, Canva, Google Drive, Google Office
USABILITY TESTING
We began by interviewing different people to go through the website and identify any comments about navigation, layout, button interaction, and the overall look and feel of the process to check out the site and also utilize their donations process.
COMPETITOR ANALYSIS
We conducted a Competitor Analysis between competitors of Variety such as St. Jude, Dream for Kids, and Ronald McDonald Foundation. We were able to extract features from each competitor we liked as well as identify weaknesses to ensure that we avoid them or can improve that pain point through our design.
USER PERSONA
We identified Stacey Taylor as our User Persona in order to get a better understanding of a typical user on Variety's site. Stacey Taylor is a mother and working professional that has compassion for others and wants to contribute some of her inheritance to a good local charity.
INTERVIEW WITH VARIETY ORGANIZATION
We conducted an interview with Variety's Executive Director Leigh Burke to get a better understanding of her organization's goals and mission when utilizing their website and what we can do to design with her goals in mind.
USER TESTING FOR ORIGINAL WEBSITE
We began user testing on the original site. We wanted to examine the paint points and identify areas of the design we can improve by using data from user interviews and using "I Like, I Want, I Wish" method. This allowed us to find key areas to improve when conceptualizing our prototype.
USER SCENARIO
There's 4 Phases Within the User Scenario:
Phase 1 Finds a local Charity focused on children with mobility issues
Phase 2 Is able to find events and can donate money
Phase 3 Can donate on monthly basis. Honored her father.
Phase 4 Bought a ticket for event.
STORYBOARD
I created a storyboard to emphasize Stacey's user experience through her actions of wanting to donate her inheritance, looking up local charities, discovering Variety, going onto their website, donating on the site and checking out tickets to an upcoming event at Variety. This allowed us to illustrate a typical user journey to inform how we approach our design.
USER FLOW
Creating user flow allowed us to examine the typical journey for our users when visiting the site and wanting to donate and check out tickets for an upcoming event. This allowed us to identify key pain points and areas of the site to emphasize when thinking about our web and mobile prototype.
LO-FI SKETCHES
We created sketches to get a general idea of how we wanted the new design to look and function.
HI-FI PROTOTYPING
Then I created a hi-fidelity prototype using Adobe XD to implement a new design solution for Variety's web and mobile application.
Following the low fi sketches our next goal was to add color, text, images and interactive components.
Our storyboard, journey map, Executive Director interview, user testing, competitive analysis had given us our first goals, problems to identify and leads on what our customer - Variety DC wanted.
Our first achievement was to get a video on the home screen. This was difficult as all we initially had was a Youtube link. After much investigation and work, we were able to cut it and have it as our main banner. This was incredibly important as the one consistent positive comment of the website were the “smiling kids”, so we wanted to showcase that more.
USABILITY TESTING
After finalizing the initial mockup of our new web design, we were able to conduct usability testing to gather data on how to best iterate our designs to ensure the user experience is most optimal when visiting the Variety website.
HI-FI PROTOTYPING FOLLOWING USER TESTING
We used this data to extract key areas of our design that we can improve and iterate and also utilized this data to inform how we approached our mobile prototype as well.
MOBILE PROTOTYPING
Initially our mobile prototype and web prototype felt disconnected in their design development as there was some inconsistency in the branding between the two. There was too many conflicting styles happening!
So iterating the mobile design to adhere to the web prototype was crucial when completing this project.
FINAL CONCLUSION
People want to feel engaged as they go through the Charity website, reminded of who and why they are there, encouraged to help with specific recommendations. It is important to keep the website fun, but also serious about the primary goal of making money for Children with severe mobility issues.
In looking forward, we will continue to streamline the website and mobile prototypes. Working to get users flowing with ease and motivation to interact, donate or take an invested look into the events that Variety is hosting.