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.
My Role: UX Designer, Researcher and Ideation Workshop Facilitator.
The Team: fully remote team of 6.
Ana - UX Designer (Qatar)
Rommy - UX Designer (Netherlands)
Flo - UX Designer (Taiwan)
Kristina - Implementation Director (Thailand)
Dipesh - Chief Technology Officer (India)
Lakhan - Developer (India)
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.
Deliverables
Research insight & findings concerning competitors, user types and behaviour
Personas and scenarios
Experience map and user journeys
Information architecture
Design and usability recommendations for improvement
User flows and screen flows
Product sketches and wireframes
High fidelity mock-up
Prototype of design
A final presentation to the client which summarizes the UX work
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….
Everything starts with a good User 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.
Eureka! 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 …
One of our personas, 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.
Mapping out Michael’s experience
Because we needed to better understand Michael's current pain points, 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 this 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.
The second attempt was to put the 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 interact 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 High Fidelity Wireframes
Let’s fast forward lots of iterations, as well as our Low and Mid-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.
Therefore our team suggested an Accessibility Review since the current colours did not pass the accessibility check.
To provide a sample of what accessible screens would look like, I designed the following ones.
Accessible design sample
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. I am extremely grateful.”
— Kristina Blundon, Director of Implementation Fidelity at The Contentment Foundation.