Challenge
Redesign the intake flow for volunteers, students, and parents signing up for We All Code to improve the drop-off rate.
Solution
A new intake flow that clearly and inclusively guides the user through the sign-up process fully developed by HTML and CSS.
Team
A team of three designers - Yong Shan Lee, Hugo Hsiao and myself, with We All Code’s CEO as an advisor Ali Karbassi.
Problem Space
At We All Code, volunteers teach coding to youth ages 7-17. They intake about 2-3 new volunteers a week, however of those, about 80% only volunteer once. The intake process on the website lacks clear UX flow. Additionally, form fields for users to complete prompt sensitive information about gender, race, ethnicity and other data collection without reasoning and inclusivity.
The team and I set out to understand the recruitment and intake process for volunteers, students, and parents, design a UX flow following We All Code’s branding guidelines, and implement solutions towards better user engagement.
Research
Competitive Analysis: Best Practices for Inclusive User Experience and Engagement
Key findings:
Allowing users to customize their gender identity allows for more inclusivity
Multi-selection for race/ethnicity questions allow for more inclusivity
For those with learning differences, frame questions around how they can be helped/served
Progress bars, walking user through the process allows for better retention
User interviews + usability testing: pain points
Key findings:
Volunteers don’t have a route from the homepage to sign up as volunteer, and they have a hard time finding all the required steps.
Parents cannot easily find classes they’d like to register their kids for and are required to register a second child even if they don’t have one.
Students end up meeting with different mentors each time, so they don’t build a rapport.
Usability testing with a potential volunteer. Open fields means the user can write in anything without guidelines or boundaries.
“I didn’t even see that I had to do a background check... I completely missed that”
Analysis
unraveling the volunteer journey’s navigational challenges
There are several steps a volunteer has to go through with different tasks to complete, however the flow makes these easy to miss and causes confusion about where and when to register for classes.
Through journey mapping, it became clear that it would be important to have a visual walkthrough of steps as the user is completing them and showing which steps have been completed. Additionally, the team and I would need to provide some form of explanation as to why We All Code is asking for certain information so that users have an understanding of why the information is important.
Design Principles for Inclusive and User-Centric Form Development
Through our interviews with parents, volunteers, and students, as well as our research into gender and race diversity and inclusion in form design, we developed the following design principles:
Clear reasoning and transparency of data collection
Differentiation between different users’ roles
Implementation of guidance and placeholder text
Straightforward and clear flow
Inclusivity
Visual cues
Information Architecture: streamlined and distinct steps
The new signup flow became the following, where there are now distinguishable steps for each flow.
Wireframes: enhancing user guidance
By creating the initial wireframes on Figma, we realized that we could fill the empty space on the right side of the desktop version with some of the storytelling and explanation of the data collection. For mobile, we decided that having an “i” icon could save space and allow the user to understand more about each field if they choose to.
UI design: brand integration and cohesion
Using We All Code’s branding guidelines, we created three clear options for the user’s role, and connected those colors through each flow for cohesiveness. Additionally, the top progress bar provides an overview of steps with color indicating where the user is in the process.
Coding journey
All of the coding was done in HTML and CSS using Visual Studio Code. We began the coding process on Replit which made collaboration very easy and instantaneous. However, we found there to be too many connection errors that were impeding with our process. So, we switched to GitHub version control. This was much more challenging, as with three different developers working simultaneously on the code, there was a lot of merging and resolving conflicts to be done. At least I can say I’m now a pro!
Reflection
Throughout this 10 week fellowship working with We All Code, I really appreciated the opportunity to learn how, as a designer, to ask for sensitive information in a thoughtful and respectful way, and implement that into the intake flow. I believe the change in how the questions are displayed makes a difference in users’ comfort answering the questions, and ultimately their desire to engage with the We All Code community.
Through this project, I have also gained more confidence in my coding skills and feel accomplished to have brought our ideas and mockups to life through the code.