Reimagined onboarding

I designed this solution for The Contentment Foundation, an educational NGO that offers a wellbeing learning platform to schools internationally.

This project was focused on the platform’s onboarding redesign since users seemed to be unable to complete it successfully and many support tickets were being raised.

Read full case study on Medium ➞

My Role UX Designer, Researcher and Workshop Facilitator

Team Fully remote team of globally distributed people

Duration 3 weeks

Tools Figma, Miro, Trello, Zeplin, G Suite (Drive, Slides, Forms), Slack, Zoom

Problem

A long onboarding process - 19 steps - without any guiding assistance for the user, which caused frustration and many open support tickets for the business.

Challenge

To make the onboarding process as simple as possible to serve the global user base while retaining/rewiring the conditional business logic behind it.

TCF is a globally-minded organization working with a globally distributed team. Plus each member of our design team was based in a different country, so matching all of those different time zones and availability was definitely a challenge.

Outcomes

✓ Designed features such as “progress bar”, “guided tour” and “revamped subscription page” removed roadblocks for their users

✓ 26% reduction in onboarding length

✓ Rewired flow meeting user's feedback while retaining business logic

✓ Heuristics compliance

✓ Design system

✓ Final High-Fidelity mock-up handed over to developers

A glimpse of the design process…

Good impact starts with good UX research…

We could not start designing anything really before listening to TCF's users and understanding their take on the current onboarding. That's the reason why as a team we conducted user interviews and laid the main insights on a Miro board, ready to be categorized and summarized in the next phase.

AHA! Listening to users attentively will always pay off

After spotting trends and findings patterns with the help of an Affinity Map, I found out 4 main user’s pain points concerning TCF’s onboarding process:

the platform's navigation
lack of flexibility
lack of guidance
their verification process

Despite these specific onboarding issues, our team got positively surprised by the level of engagement of TCF’s users. They all seemed personally engaged with the overall service provided by the NGO.

And Michael was born, our proto-persona

Michael is a School Principal that needs to quickly and efficiently onboard his team to the learning platform because he wanted them to benefit from the learnings in the Wellbeing Curriculum as soon as possible.

Time to map out Michael's experience

We needed to better understand Michael's current pain points, so we created an Experience Map.

Diving deeper into it, we could see that the main problem was in the highlighted area in yellow, where most of the issues have been hiding secretively.

This exercise helped us build empathy with Michael and start thinking about possible features for the new onboarding experience.

Our first attempt to address the challenge was...

...to conduct a Design Studio with our client, to brainstorm all the possible features that the onboarding could have to satisfy users needs.

One of the ideas we had here was to provide a journey experience, giving our users clarity from start to finish, so that they could feel in control of every step.

From this, a progress bar on top of every page could be one of the possible ways to achieve this goal.

Time second attempt was to visually the e-e experience on paper

After doing some feature prioritisation, we started sketching screens on paper.

We did this to visualise the entire experience and foresee possible improvements based on the “big picture”. These sketches were also the starting point for some usability testings and initial iterations.

...and observe how users interacted with it.

Next, we conducted Usability Tests using Low and Mid-Fidelity wireframes. The intention was to find out what users were thinking about this newly designed onboarding flow and to iterate according to their feedback.

On this image on the left, you can find the demographics for the usability tests.

Final Wireframes

Let’s fast forward lots of iterations, as well as our lower fidelity wireframes. Below you can find four High Fidelity Wireframes that tackle each one of those 4 user’s pain-points: platform’s navigation; flexibility; guidance and lastly, the verification process.

Guided Tour to assist users during their first time on the platform.

Progress bar to improve navigation and SMS as the second verification option.

Simplified and Revamped Subscription Page.

Welcome Pop Up clearly indicating next steps.

Suggesting an Accessibility Review

Due to this projects’ timeframe and scope, these designed screens follow the client’s current style guide, which is not accessible.

To provide a sample of what accessible screens would look like, I designed the following ones.

Accessible design sample

Final Prototype

Client's feedback

"This was a great experience to understand our users. Thank you for sharing this great design. We are definitely looking forward to implementing this."

---- Lakhan Samani, Full Stack Developer at The Contentment Foundation

“The onboarding redesign was a fantastic experience. Seeing the final prototype was very powerful. It was clear that you listened intently to our educators and imagined a process that would support their every need. Your recommendations will help to increase accessibility so that millions of educators worldwide will have access to these tools.”

---- Kristina Blundon, Director of Implementation Fidelity at The Contentment Foundation