Firefighters Charitable Foundation Redesign
A whole new design in less than 3 weeks.
Our team of four was given the challenge to do a website redesign in 2.5 weeks! We chose the Firefighters Charitable Foundation because we felt compelled to help fire survivors after witnessing a devastating loss of homes from a recent wildfire in our area.
We wanted to help others who also felt the urge to get involved.
We wanted to update the site to make it visually pleasing.
We wanted the site to be easy to use on desktop and mobile.
Ultimately, by updating the site our hope was that the number of donations and volunteers would increase so that more survivors could get the help they need.
Time for research.
We each conducted 2 user interviews, using an interview plan that I wrote, in order to get a better understanding of our users and the problem. I was curious about how and why people decide to contribute to a cause in hopes to find insights to encourage more people to use the site.
Key Take-Aways:
most people prefer to donate to local organizations
many prefer to connect with trusted organizations that they find through family, friends, and social media
the biggest obstacle to volunteering was time
people wanted to know WHERE their donation is going
The findings presented a challenge; We needed to figure out a way to add a local aspect to our national site.
Click the button to see the full interview plan that I wrote.
Time to get ideas.
Set the mood.
We all set out to find some new inspiration for our new design by creating mood boards. We found that when we compared our boards, we were on similar pages as far as the mood. We had similar colors and we chose images that were more uplifting and bright rather than sad and dark. This proves our intrinsic desire to show the work the organization does in bright light rather than from a place of fear.
Tell a story.
From our user insights, we created a user persona to help us contextualize our site. We used the storyboard method, using our persona, as a guide towards a solution. Then we collaborated on a Miro board by doing an affinity map to find relevant themes in our user research and the "I like, I wish" method to come up with some great features. We prioritized the ideas using a matrix. All of this work helped us get closer to a solution.
To the drawing board...or Figma board.
Wireframe it.
After all this researching, generating ideas, and moving to a solution, we could finally start working on the website. We started creating low-fidelity wireframes based on our research. We conducted user tests to see if users could contribute locally. They could, but not easily. So, in the mid-fidelity wireframes, we added another major button, but users were confused by the directions on both buttons and they didn't know which one to choose. We also picked a fun color, melon, that passed accessibility testing as well. However, an overwhelming majority of users disliked the color. We made the directions more concise and clear on the buttons in our last iteration. Now users could easily decide what to do. Check out the iterations of the homepage.
Style it.
We collaborated to create a style guide to make the design of our site cohesive with a modern look. We each took a task such as finding images and icons, designing buttons, ensuring accessibility with colors, and choosing typography. Initially, we chose a fresh melon color but it didn't test well. So, we decided to stick with a classic fire engine red and a charcoal color that gives a dependable and trustworthy feel.
Design, test, iterate, repeat
Prototype it.
All of our work culminated in a working website prototype that we built in Figma and tested using A/B testing as well as user testing. Our user flow was created for someone who would like to get involved locally and order two hygiene kits for the Superior fires in Colorado. Or, someone could choose to "Donate Now" to go straight to donating. Click the button to check it out!
Learn from it.
We are so proud of the dramatic improvement we have made on this site from the original to the most recent iteration. We learned that working in a group was both challenging and rewarding. We had to blend all our individual design processes into a group design process. We also had to figure out the best way to communicate with each other. We found that we all learned something from one another and that we were able to work quickly when we all put our heads together. Frequent communication and flexibility were both keys to making it work.
Next steps
We would like to continue to build the remaining pages of the desktop and mobile versions of the site. We would continue to test as we go to ensure that users can easily find their way.
To view the complete case study, please click the button.