Mobile App Onboarding Project
Threadflip is an online marketplace that makes it easy for people to swap clothing. Threadflip came to EchoUser to redesign their mobile onboarding experience. Their usability studies indicated that new users didn't understand core features well and got lost when they first arrived on the app. It led to decrease in new user sign-ups. The goal of the project was to address these issues by redesigning the onboarding screens so they better conveyed Threadflip's value proposition and core features for new users.
Lengths of the project: 2 months.
My role: I teamed up with another UX designer. We were responsible for the entire design process from interaction design to visual design.
PROJECT OUTCOME
We successfully redesigned Threadflip's onboarding screens so they were visually appealing and helpful for new users to quickly grasp the value proposition and core features. Additionally we maintained the ability for existing users to skip the onboarding screens and go straight to the sign-in screen with one tap.
Preliminary Research
Threadflip already gave us their user research findings indicating that new users didn't understand core features well and got lost when they first arrived on the app. My main focus was the onboarding flow so I started by looking at the existing screens. This helped us zero in on potential usability problems, pain points and opportunities where we could interject beneficial information for new users. I identified two main areas where such information could be provided (they are highlighted in the diagram below).
Ideation phase
After proposing the ideas to Threadflip, they wanted us to further explore the first design. Now that we had a better understanding of the problems and opportunities, I started exploring different ideas:
- Change copies, images and layouts
- Condense the multiple onboarding screens into one
- Remove onboarding screens all together, but provide some tutorials to get new users familierlize with the app (see the example below)
- Placing call to action buttons on each of the onboarding screen
An example of the slides I presented to Threadflip to narrow down the proposals to one idea.
High-fidelity wireframes
After a few rounds of iterations, we decided to go with the first idea which was to change copies, images and layouts to illustrate core values to new users. Once I solidified the interaction design, I created high-fidelity wireframes. Below is a clickable InVision prototype to demonstrate the new design.
Below is one of the final hand-off slides we presented to Threadflip.
