DoSomething.org
Develop the onboarding flow for the youth activism digital platform resulted in 20% boost in member’s conversion rate
DoSomething is a non-profit organization based in New York City that fuels young adults from 13-25 years old to make positive changes.
With a driven mission to become a leading youth activism digital platform, my team was eager to support members in every step of their activism journey. Following that purpose, we had the idea of building a dashboard that helps our members set goals and track the impact of volunteering.
Location
Nov 23 — Mar 24
Time
Team
New York City
VP of Product and Engineering
A senior UX Designer
A Graphic Designer
User Interviews
Usability Testing
Affinity Diagramming
Wireframing
Prototyping
UX Design
BACKGROUND
Our members need a quick, and easy onboarding to guide them to use our digital platform for their volunteer experience
After members create the account, new members will land on a blank dashboard with no programs curated for them. Our team sees that is confusing and discouraging for users to use the platform. Therefore, my task is to create an onboarding quiz that collects relevant data from our users and personalizes the dashboard's content for them.
How might we create a quick and easy onboarding flow and ask questions relevant to our member’s civic journey?
How might we tell our brand stories through onboarding?
IMPACT
The solution is a quick, easy, and meaningful onboarding flow.
Following the design challenge and after doing some research, I delivered a quick, easy, and meaningful onboarding flow to our team within 3 months with great impact on the team:
30s
+2K
30s Onboarding Experience
I tried to keep the onboarding at most 5 questions to make sure it is quick and easy for members to complete
MVP launch for more than 2K users
In May 2024, the onboarding flow will be launched to mass users.
DISCOVERY
Identify business requirements and stakeholder’s expectations
In the first month of the internship, my goal is to understand the business requirements of the onboarding. Therefore, I read old documents, did competitive analysis, and had discussions with other stakeholders.
Reading Documents
After reading documents about user feedback, I organized them into use cases and user stories. Then, I learned some must-have questions to personalize the dashboard:
What inspires you to join DoSomething?
What issues do you care about?
What activities do you want to be involved in?
Competitive Analysis
The mutual things about the onboarding of other websites:
At most 5 questions
A progress indication
Quick and easy — Takes about 1' to finish
DISCOVERY
Then, I led a meeting with my stakeholders to discuss my findings as well as organize their expectations using HMW questions:
How might we create a quick and easy onboarding?
How might we tell our brand stories during onboarding?
How might we create a meaningful onboarding with questions that benefit our organizations and relate to our member's experience?
Transform stakeholder’s expectations into UX flow
DEFINE
1st round of wireframing
After many iterations on the UX flow, I sketched some wireframes on paper with must-have features learned from competitive analysis.
02. Turn the wireframes onto digital space using Figma
Then, I turned those sketches into low-fidelity screens with their features on Figma.
01. Paper wireframes
DEFINE
2nd round of wireframing
From the wireframes, I went back and forth with my senior designers to receive feedback on which features were important to keep developing.
Positive feedback
Quick and easy to interact
Opportunities for improvements
My senior designer asked some guiding questions that had me brainstorm some more ideas for better onboarding which not only guide users about our platform but also tell our stories:
Are there any ways to tell our brand stories?
Do you think of any fun interactions?
IDEATION
According to the feedback, I brainstorm some of the ideas
With this guiding question, I brainstormed solutions by separating each screen to see whether there was any opportunities to answer that question.
01. In the first feedback from Sophie — How can you tell our brand stories through onboarding?
In the question "What activities do you want to participate in?", I think about adding our member's feedback to show new members what it is like to join DoSomething. Therefore, I played with those ideas in our design system.
At the beginning of the onboarding, I also add a welcome screen. In this round of iterations, I experiment with the layout of the design system.
02. In the second feedback from Sophie — How do you add some fun interactions to engage our members?
In the question "Do you want to track your impact?", I sketched some more interesting ways for members to set their goals such as sliders rather than filling the form.
IDEATION
Finalize the UI according to changes in UX flow for the prototype
When I made sure that the final visual of our interfaces followed the design system, I led the all-team meeting to share with my stakeholders including the program and research team members, my product manager, and a director of the product team to ask for the final round of feedback. With different perspectives and purposes, the UX flow changes slightly:
Welcome to DoSomething Community
What do you hope to achieve by joining DoSomething?
What issues do you care most about?
How would you like to track your impact?
What kinds of activities are you interested in taking action?
Newsletter subcription
WIREFRAME
Usability testing on the prototype
Then, I planned on testing the usability of the onboarding with our members to see whether the content of the questions is related to our members’ situations and whether the interaction is quick and easy.
We recruited 8 members to join the interviews, which were conducted through Zoom in 1 hour. Users share screens when they interact with the onboarding. Here are our research goals:
Research goals
Overall flow: How do users feel about the overall flow?
Content of questions: Do they have difficulties understanding the meaning of questions?
Usability of the flow: How do users interact with each question?
Synthesize the data with affinity diagramming
After the 8 interviews, I rewatched every video to take note of the sentiments and thinking-out-loud comments about the flow and organized them into the affinity diagram.
WIREFRAME
Iterations for MVP Launch
After consolidating the data, there are some changes that I need to adjust on the UI according to the UX insights:
01. In “Issue question”, I add a short description of the issues so that our members understand their selections.
7/8 users said that a short description of the topics makes it easier for them to choose because they often wonder whether there are any smaller topics included in those issues.
Before
After
02. In the “Activities question”, I briefly describe the activities so that our members understand their selections. Previously, I added the member’s feedback about the activities.
7/8 users don't notice the member's feedback in these cards. Instead, they're confused about the title and curious to know more about what that activity means.
Before
After
DELIVERY
Deliver the final design to the development team
The team agree on changes to the flow. Then, I book a cross-functional team meeting to share the updates on our product and ask for the final feedback before finalization for MVP launch.
My director agreed to push the flow into the next sprint to launch for MVP. My senior designer updated the interfaces with some changes to make sure that they met the requirements of our design system before launching.
02. Collaborate with graphic designers to ensure graphics for the UIs are on brand
Next steps
01. Plan for MVP launch
I collaborated with a graphic designer to create the pictures to ensure the interfaces were on-brand.
LESSONS
Lessons to move forward
01. Play with layout is a key to transforming wireframes into prototypes successfully
As my main task is to design the user interfaces for the onboarding flow, I started wireframing with many sketches, playing with the layout, and organizing each design element on a screen. During the process, my senior gave helpful feedback in the form of guiding questions. This brought me closer to my goal of creating a fun, quick, and easy onboarding.
02. Actively involve my team members in the project
From discovery, I tried to understand the impacts of onboarding on other teams. Therefore, I led some cross-functional meetings to learn more about whether our research and marketing team needed to collect any information.
03. Present ideas and insights to other team members
Presenting my ideas and insights is the biggest lesson from this internship. I practiced public speaking and learned to tell the story through data so that our stakeholders could understand our decision and participate in a product conversation.