UX/UI Case Study OVERVIEW
Having witnessed the effect that the bushfires had on the Australian people last year, we believe that the service of the non for profit Tradies for the Bushfires Rebuild provides a great value to the community because of its focus on connecting skilled volunteer tradespeople with people who needed to rebuild their properties after the bushfires.
Problem Statement
Tradies for the bushfire rebuild was designed to help connect registered tradies who want to help with communities and people affected by the most recent bushfires. We have observed the manual multistep process to create an account and register to request a services results in long wait times for fire affected communities, unable to access the help they need. How might we streamline the volunteer application system so that tradespeople are successful in efficiently pairing with the communities they want to help?
Tradies for the bushfire rebuild was designed to help connect registered tradies who want to help with communities and people affected by the most recent bushfires. We have observed the manual multistep process to create an account and register to request a services results in long wait times for fire affected communities, unable to access the help they need. How might we streamline the volunteer application system so that tradespeople are successful in efficiently pairing with the communities they want to help?
The Solution
Redesign the website in a responsive layout, create a menu section and consolidate registration forms to enhance the user experience.
Redesign the website in a responsive layout, create a menu section and consolidate registration forms to enhance the user experience.
My Role
As one of the main UX/UI Designers I was involved in all phases of the project but my key responsibilities were:
User research - Conducted user interviews to helped develop more specific insights about who our user would be.
As one of the main UX/UI Designers I was involved in all phases of the project but my key responsibilities were:
User research - Conducted user interviews to helped develop more specific insights about who our user would be.
Competitor analysis - To gain strategic insights into the features, functions, flows, and feelings evoked by the design solutions of the competitors.
Design volunteer registration / requesting help form - Create UI style guide for the forms
Usability Testing - Planned, conducted and prioritisation matrix for design iteration.
Contributors (UX/UI Designers): Clint Mogoai, Alex Langdon and Chloe Payne
Design Process
Research
Objectives
● To understand how a user feels about donating to charity.
● How users register to volunteer their services to charity organisations.
● User understand how the volunteer process works through browsing the website.
Methods
● 1-on-1 semi-structured interview over Zoom (5-10 minutes per participant)
● Questionnaire to stakeholders
● Online survey posted on social media channels
User Insight
The questions raised during the interviews asked the users to describe past interactions with charitable organisations and non-for-profits, to uncover any pain points they may have encountered in their experience. We also asked them to navigate through the site in its current state in order to locate any major issues the site is facing. With this information we aimed to develop more specific insights about who our users are and what they want from this site.
Information Analysis
Reflecting on the information we gathered, we began developing solutions to the specific issues raised by our participants. We concluded that it was most important for this site to connect skilled tradespeople and volunteers with the people whose properties were destroyed in the bushfire, grant the users access to a database that allows volunteers to find upcoming working bees and volunteer opportunities, give users the ability to donate money as well as materials to help cover the cost of the rebuilding and streamline the registration process to have tradies signed up in a matter of minutes, ready to assist. From here it was a matter of defining our user and how they might interact with the site.
Definition & Ideation
User Persona
Meet James, he’s your classic Aussie tradie with a keen interest in doing his part to help out those who need it. Like many others, James has the skills to help, but he doesn’t know where to begin.
Storyboard
James’s story will hopefully be a lot like many others, turning his passion to lend a hand to those affected by the bushfires into action. Using the new and improved ‘Tradies for the Bushfire Rebuild’ site, James can register his services in minutes and be connected directly to the people that need his help the most.
Flow Chart
From here we started to look at how we might start rebuilding the site by mapping out a flow chart.
Site Map
Through our initial user testing we knew we needed to focus on streamlining the form section of our website and adding a donation section as they were the key focus areas for our users. With this in mind we condensed the website to 3 main call to actions - here to help for volunteers, need some help for those seeking assistance & donate for everyone else. These became the primary actions on our website and informed our original wireframe design.
ProTotYPES
Sketches/Wireframes
Originally focused on the primary navigation and homepage layout for the desktop and mobile versions. Because we don’t have many functions we wanted everything to be easily accessible and from our initial website testing the header navigation was always the first option for users when searching for the information they needed.
Style Guide
A crucial decision for us was around the imagery. In our initial user tests one point that came up several times was the powerful images, however they were quite somber with bushfire destruction and struggling communities. We wanted to keep the imagery striking but also keep the mood lighter and more hopeful, looking at how we could help people and not reminding them of the terrible experience of the bushfires. This was also how we chose our colour palette, the blue we decided to keep from the original website and we added the orange as together they stood out, which was important for button visibility, but they helped to keep the mood of the website bright. We aimed to keep the font clear and the copy writing succinct to keep the focus on the call to actions.
Prototype
First version of the Tradies for the Bushfire Rebuild homepage redesign. We also streamlined the forms for both people registering to volunteer and people seeking assistance. Our forms doubled as a sign up and onboarding process so users only had to go through the input process once and we broke up the form into sections with a progress bar to encourage users during the process as there was information required that we had to include.
User testing
Objectives
Gain insights on how users interact with the design when completing tasks focused on the sites main functions. Also to get general feedback on site design/layout.
Key Feedback
Navigation
● having multiple ways to get to the home page
● having sign up & log in on the header navigation
Forms
● while they were broken up into sections they were still quite long
● some of the section labels were confusing to users
Iterations
What we changed
With all of that in mind we made more changes; as you can see here with the header navigation, (log in & home) and made the forms a multi-step process with limited inputs in each section which has the best results with user testing. After a few more stylistic changes as well
FINAL THOUGHTS
Our focus was to streamline the application process and create an efficient volunteering system that can be accessed by many. We also implemented a donation feature for users who want to assist but can’t offer their time.
A few things we learnt during this process were:
Designing forms is challenging and forces you to be creative when trying to get users to provide all information you require but also finding a way to keep the form engaging, so that users continue through to completion.
Designing forms is challenging and forces you to be creative when trying to get users to provide all information you require but also finding a way to keep the form engaging, so that users continue through to completion.
Also Testing is one of the most important stages, you really don't know how well your design works until people not attached to it try it out. it also makes you humble to know your initial idea may not always be the best method for the desired outcome.
This project showed us the importance of collaborating as a team. As more hands make lighter work which ties in well with the overall theme of Tradies for the Bushfire rebuild.
Key Takeouts
● Well designed forms are crucial and can be the difference between users completing or opting out.
● Well designed forms are crucial and can be the difference between users completing or opting out.
● Prioritising feedback from testing and having time to incorporate the suggested changes.
● Testing is so important to the process and helped us not be bias towards our designs and ideas.
● People genuinely want to help others in need but are usually put off if the process is time consuming or difficult to understand.
In conclusion we feel as though we have achieved our goal and that will hopefully be represented by the increase in volunteer registrations and also donations made to the organisation. Our next steps would be to design the next process and focus on connecting volunteers to upcoming opportunities once registered.
