_edited.png)
Warrior Wagons Inc.
Live
Website redesign for an organization supporting pediatric cancer patients to boost volunteer participation and secure new hospital collaborations
Website Redesign | Information Architecture | Social Media | UI/UX Design | Market Analysis
Project Overview
CONTEXT
Aimed to create a more engaging and user-friendly website for Warrior Wagons, helping to raise awareness, attract volunteers, and build partnerships.
The existing website lacked clear navigation and effective outreach tools, making it difficult for users to engage with the organization’s mission.
Role
Collaboration
Timeline
Tools
UI/UX Designer & Researcher
Competitve Analysis
Ideation + IA Redesign
UI Design
Usability Testing
Design Team
Development Team
Stakeholders
Volunteering Team
11 Weeks
April - Jul 2023
Figma
Miro
Canva
Filmora
OUR CLIENT
Warrior Wagons Inc is a non-profit organization dedicated to supporting young pediatric cancer patients and their families by providing personalized wagons to hospitals.
Founded as a gesture of gratitude for their son, the initiative has grown to include coordinators and volunteers across seven locations.
PROJECT ACHIEVEMENTS
Increased regular website visitors by 31%
Boosted social media traction by 23%
Reduced website abandonment rate by 12%
Since the completion of the project, Warrior Wagons has partnered with two more hospitals and more volunteers have joined the non-profit.
The organization continues to grow and spread its good cause.
Problem Statement
Why was the redesign required?
To uncover the need for a redesign, the team conducted interviews with stakeholders and the volunteer team at Warrior Wagons, gaining insights into their interactions with the website.
These conversations revealed the challenges they faced while navigating the site and highlighted missing features that could better support their mission and improve user engagement.
The problems the team discovered were:
Lack of a strong professional identity to effectively promote Warrior Wagons
Poor user experience leading to higher abandonment rates
Limited strategies to raise awareness and strengthen connections with hospitals and coordinators
The team designed the following solutions:
Created a promotional video and pitched social media strategies to gain traction
Improved website navigation to reduce confusion and clearly communicate the organization’s mission
Redesigned the website to better promote the non-profit and expand its audience
Solution
The first step was to update the design system.
The team opted to update the key components within the color scheme and typography to give the interface a more polished and professional appearance.
Red Salsa
#E60B03
The intense red felt jumpy and too bold, making it difficult for users to focus on content. High saturation caused eye strain.
Sunray
#DB9801
The yellow-orange hue has low contrast against white, reducing readability. It created a dated or less professional look.
Black
#000000
The high contrast with the bright other colors made the design feel harsh and unbalanced.
Lava Red
#C0150D
A deeper, muted red maintains energy without overwhelming the user. It provides better contrast without causing eye strain.
Goldenrod
#ECC94B
A softer yellow improves readability, creates a warm, welcoming feel while maintaining a professional tone.
Off Black
#000@80
By reducing the opacity, the black elements appear less harsh, improving visual hierarchy and creating a more modern, sophisticated look.
We chose Oswald for its bold clarity and Rokkitt for its structured yet warm feel. Together, they enhance readability, create contrast, and establish a professional yet approachable identity.
Next came the 3 main problems
Problem: Lack of a strong professional identity to effectively promote Warrior Wagons
01
Action: By analyzing the existing website and discovering several pain points, the team found that the visual style of the website lacked a sense of structure and system. There was no proper hierarchy of information and many pages consisted of redundant information.
Solution: We structured the website by designing Information Architecture.The content of the pages are concise and easy to navigate.We enhanced the visual style and presented proper information hierarchy.
Problem: Poor user experience leading to higher abandonment rates
02
Action: Team analyzed the scope of improvement in existing social media platforms, by studying other NGO paltforms, observing the currents trends and interpreting how to get further audience engagement.
Solution: The solution comprises of a series of Instagram and Facebook carousel posts on tips for families, and adding to "Highlights/Timeline", showcasing important aspects of Warrior Wagons' work. Another suggestion made was to host interactive live sessions once a month to facilitate Q&A and foster community engagement.
Problem: Limited strategies to raise awareness and strengthen connections with hospitals and coordinators
03
Solution: The team identified potential areas to partner with the Hospitals. Showcasing a highlight of the journey of Warrior Wagons, the team created a video showing what the organization does, their mission and helps with future collaborations.
Warrior Wagons Inc.
Wireframe Iterations
Low/Mid Fidelity Iterations
Usability Tests
Challenge: One of the challenges was to ensure that the site was intuitive, engaging, and accessible for both volunteers and donors.
Action: The next step was to conduct usability tests to better understand user challenges. I was responsible for running five usability tests, each consisting of four key tasks aimed at evaluating navigation, donation flow, and overall user experience.
5 participants
02 Existing volunteers
03 New users
33 Mean age
4 tasks
-
Testing the ease of donation flow
-
Evaluating the discoverability of hospital locations
-
Measuring the clarity of the volunteer sign-up process
-
Testing the visibility and accessibility of contact details
82.4% Avg. success rate
Following design changes were made based on the test findings:
NAVIGATION BAR
Changed "Donate a Gift" to
"Donate a Wagon"
Changed "Our Partners" to
"Find Us"
By making these changes, the navigation became more intuitive, improving user flow and providing clearer context for visitors.
DONATION PAGE
Participant Quote:
“I like this idea. I have been telling them for a long time, I think people should be able to donate a gift like this”
After 3 design iteartions and 2 test rounds, the team came up with the following Hi-Fi wireframes.
My Takeaways
Takeaway 1
Aligning design with stakeholder needs
The key challenge was deeply understanding the client’s pain points and translating them into a user-centered solution that directly supported their mission and goals.
Takeaway 2
Leveraging community engagement
I recognized the importance of activating existing supporters to drive awareness and increase engagement, ensuring the design facilitated greater traction for the nonprofit.
Takeaway 3
Opportunities for further impact
Given more time, we would have focused on designing the “Shop for Warriors” page to enhance fundraising efforts through a seamless merchandise experience.
If you liked what saw, let's connect and create something together!