For the final project of the Netflix UX/UI Design Foundations Bootcamp, I took on the role of project manager as well as user experience designer for my team. By using trello i was able to keep track of all the tasks that still needed to be done, and with figma and miro the entire team was able to redesign the navigation of a local non-profit website.
Scroll-through of the current Little Red Dog home page
Purpose
My team was tasked with choosing a feature to redesign from a non-profit website. We began looking at non-profits local to Orange County, California (where we were all located) that were in major need of an update. After comparing a few websites, we decided to redesign The Little Red Dog. Their homepage in particular was a mess- it was cluttered with random images, forms, and other widgets that served little purpose. They also utilized a hamburger menu on the desktop website, which made navigation tricky to figure out.
Process
Research
We created a proto persona to represent a potential user of The Little Red Dog based on our previous knowledge to gain a deeper understanding of our user. Kyle is an animal lover who also enjoys giving back to his local community. He wants to know he’s supporting a good cause, but doesn’t know where to start. He also dislikes poorly designed websites because they detract from the its credibility and his primary goal is to support trustworthy organizations.
I looked for similar non-profits in Orange County and found two others. Then I performed a competitor analysis to determine the strengths, weaknesses, opportunities, and threats of both of these companies. I discovered that while these two other non-profits have websites more modern designs, they are functionally very similar. All these non-profits were also impacted by the pandemic, and now they are attempting to get back on their feet.
Our team got together to do an evaluation of the website’s appearance, content, navigation, and functionality. We ended up liking a few things such as the icons and color schemes used, which we ended up keeping in the redesign. But there were many aspects of the website that seemed to lack purpose or were difficult to find.
3 User Interviews
6 Survey Respondents
Compiling all our data from our user interviews into an affinity diagram, we discovered that people want to involve themselves with credible non-profit organizations that share similar values as themselves.
Therefore, we believe that people want to be able to easily get information about non-profit organizations before making a decision to donate and that we might be able to help if we redesign the website’s navigation bar and create a more identifiable donation flow.
We might do this by changing the navigational hierarchy and making navigation options clearly visible. Doing this will allow our product to quickly inform more users about The Little Red Dog’s mission and increase the number of donations received.
Define
From there, we were able to create a value proposition canvas, which would evolve into our final Value Proposition.
The Little Red Dog is improving its website usability to help animal lovers to easily gather enough information to make a confident donation, adoption, or fostering of an animal.
Ideate
Storyboard
We created a user experience scenario, then visualized it by making a storyboard to help us further understand how a real user may interact with our redesigned website experience.
My team now had an idea of how a user could use the updated website, but we aimed to redesign the entire homepage, navigation included. To decide what should be kept and what should be removed, we performed card sorting and then created a site map. With the site map, it was very easy to create a user flow diagram showcasing where a user navigates to perform a donation.
From there each member of the team worked separately to create a version of what we thought the homepage should looked like. We came together to discuss and combined the elements we liked best to help create our low-fidelity prototype.
Low-Fidelity Prototype
Low-fidelity Mobile
Low-fidelity Desktop
My team was finally ready to move onto prototyping in Figma, and to start, we created a Low-fidelity prototype to get a feel of the structure of the redesign. One thing we wanted to keep was the color red as a major part of the color scheme. This color was an important part of the name, so we felt it should be kept as the most important color of the website.
Mid-fidelity Prototype
We then updated everything into a mid fidelity prototype. We added images, exact copy, and updated the footer and header to make them visually pleasing and easy to navigate. We added more interactivity to this prototype and simulated the donation flow with auto-filling form fields.
Mid-fidelity Desktop
Mid-fidelity Mobile
Testing
As a team, we conducted usability tests with our desktop and mobile mid-fidelity prototypes in order to see what we could improve.
Key Discoveries:
Information on the monthly donation page felt overwhelming
Payment selection buttons on mobile were too small
Hamburger Menu had too much content
Easy to find the donation button
Likes that most important information is above the fold
We took all this feedback into consideration to create our final prototypes. In addition, my team created a UI style guide to define the final fonts and buttons.
High-fidelity Mobile
Here is a look at the final design my team came up with. We took the feedback we received from the usability tests to update the design. Most notably this final prototype has bigger buttons and is more interactive.
High-fidelity Desktop
View our full prototypes on Figma!
Desktop prototype can be found here.
Mobile prototype can be found here.
But wait… there’s more… testing!
My team did one more round of usability tests to get feedback on our final design. While we did not have the time to update it further, this feedback could still help the website if it were actually redesigned.
Most notably, our testers noted that the differences in the donation pages were a bit jarring. This is something my team struggled with quite a bit over the course of the redesign. There are two different donation pages- one for a single donation, and one for a monthly donation. However, if you decide to become a monthly donator, you get special perks, which the page explains to you. It is hard balancing showing a lot of information on the monthly donation page with just the donation form on the one-time donation page.
Future Opportunities and Next Steps
Finally, my team got a chance to reflect on the entire process of redesigning a non-profit website. Not everything went exactly as planned, but overall I learned a lot and there is still so much more that could be done!
Next Steps:
Present the updated website to the non-profit
Prototype out the rest of the website
Perform more rounds of usability testing to continue to refine the redesign
Revisit the color choices made in the design
Takeaways:
Results from usability testing always surprised us- you can never predict how a user will actually react to your prototype
It’s important to be able to adapt when met with unforeseen circumstances