Client Project: An Onboarding Redesign for an Educational Platform
A UX redesign of The Contentment Foundation onboarding process
Overview
This website design was developed in a 2.5-week design sprint as part of the last assignment to graduate the User Experience Immersive course by General Assembly.
The main goal of this assignment was to explore the design of the onboarding process of The Contentment Foundation (TCF) learning platform, a non-profit that offers a Wellbeing curricula to educators, children and their families. They help schools track, measure, and improve their wellbeing by using science-based measurement tools and are rolled out to 60+ schools in 11 countries.
The following case study will take you through each step of my design process following the double diamond method: Discover, Define, Develop and Deliver.
The Brief
To make the onboarding process of the learning platform as simple as possible to serve the global user base while retaining/rewiring the conditional business logic behind it.
“Essentially our users need a way to efficiently onboard on the school platform because it will reduce the friction for non-tech savvy users to manage the data effectively without burning out.”
By reducing the number of onboarding steps, re-organizing them and re-designing the user experience.
Expected KPI: to achieve significant growth in their users engagement with the platform.
Please meet my Design Team…
The entire 2.5 week design sprint was conducted by the three of us, by dividing responsibilities and working closely to achieve the best end result for the business and the user.
Discover
The Discover phase is where we explore as much as possible and gather insights that we would later on start to filter and refine.
Understanding the Current Onboarding
To get started, TCF shared a number of documents in a Google Drive folder to help us understand their current onboarding process.
We had two days to carefully read it through. We then listed around 25 questions and emailed them to the team, so we could discuss it in our first briefing meeting, covering aspects that were not completely clear to us.
Some of the key questions I asked were:
- What would you say are the top five issues in the onboarding process that lead to people contacting the support service? Could we have access to the open cases data from the last six months?
- What is the most common device that users make use of to access the platform?
- Is “The Contentment Families App” different from the main “School Platform” or is it the same?
The client helpfully answered all of our questions providing a good ground to get started with our design process.
Competitive Analysis
By what percentage do you think COVID-19 has disrupted Mental & Neurological services around the world? A staggering 78% of countries reported disruptions in workplace and school mental health programs in a recent survey by the World Health Organization.
Given this heartbreaking circumstance, what were TCF’s main competitors doing to stand out in the mental health learning segment?
To answer that question we researched six competitors, grouped the data and the table below shows you what we found:
By doing this feature comparison we could clearly notice that “Focus on Families” is a competitive advantage for TCF as it stages a more holistic approach to the school’s wellbeing and is not commonly found in their competitors’ offerings.
Preliminary Heuristics Review
One of the best things to do in order to create a thorough design is to consider what experts in this field have created. Accordingly, we asked ourselves: How would the current onboarding flow compare with Jakob Nielsen’s Heuristics?
The answer is.. average! From the many inconsistencies we found, these were the main ones:
Usability Testing
Another good way to find opportunities for improvement is asking for user feedback! So we did it by asking some users to go through the current onboarding screens and walk us through their thoughts. This is what they said:
This initial usability test gave us great insight into what would be TCF user’s main pain points.
User Interviews
To investigate it further, our team conducted a total of eight user interviews, all of which were contacts provided by TCF. Below you can find our method:
Using Miro we registered our insights from each interview on sticky notes. We colour-coded them to be able to identify users, since we would combine these sticky notes by similarity on the next Affinity Map phase.
Affinity Map
To spot trends and find patterns we created an Affinity Map, a great design tool to compile findings from multiple interviews.
My suggestion to my teammates was to create categories based on the interview questions and group insights related to them. We did it and next we summed up the overall insights per category.
After tidying up the map and sticky notes, we narrowed them down to a handful of key insights related to user’s main pain-points:
In a nutshell, users required additional support with navigating the onboarding process in two critical areas, namely accessing their personal wellbeing survey and analyzing the plethora of information it provides.
On Guidance, they believed that the platform experience can be improved by offering initial onboarding explanations.
On Flexibility, they believed an offer of multiple payment options should be considered.
Lastly, expediting the password verification process would allow users to access materials effectively and efficiently, leading to improved psychological wellbeing.
Define
Remember that we talked about filtering and refining insights? Here we would start defining who we would be designing for, and what their current experience would look like today, with a clear problem statement and pain points.
Persona
Based on research, we created two Personas: Michael Brown and Carla Jones. Michael represented the School Principal and Carla the Teacher. Because each one of them has a very different access on the platform, my teammates and I agreed that it would be important to cover both in our design.
I was responsible in the group to create Michael by reading our user insights, as well as his Experience Map and initial Problem Statement.
Mapping their current Experience…
Since the current onboarding flow has 19 steps without any guidance, we could understand why they were having these issues.
And narrowing down their Problem Statements…
“Michael needs a way to quickly and efficiently onboard his team to the School Platform because he wants them to benefit from the learnings in the Wellbeing Curriculum as soon as possible.”
“Carla needs a way to familiarise herself with the School Platform because she is eager to start improving her student’s well-being.”
Develop
In the Develop phase we started to ideate all the possible solutions as well as testing our MVP along the way, doing constant iterations according to feedback.
How Might We (HMW) & Design Studio
After clearly understanding and empathising with Michael and Carla’s disappointments and frustrations, we started brainstorming possible solutions making use of the“How might we” tool:
- How might we create a quick and efficient onboarding experience for Michael?
- How might we facilitate the onboarding process for Carla?
Following, we had a Design Studio with the client to ideate on possible features that would tap into these 2 HMWs. I volunteered to facilitate this virtual design studio with the client as I have had previous experiences with facilitating workshops in my previous HR role.
Feature Prioritisation
We would love to implement every single idea. However, that would not be very smart from a business point of view. The goal here was to implement as few features as possible in order to launch a MVP (Minimum Viable Product) and test whether the user experience had been improved or not.
So we decided to prioritise the following features in order to tackle the main pain-points.
Sketches
These are some of the first screens sketched out on paper. It was important to do this so our team would visualise what the experience would look like and start digitising from there.
Usability Tests
Time to put our prototypes to be tested by users and hear from them what was intuitive and what could have been improved. So we ran tests with the following group of people:
As we go through the Low-Fidelity prototype I will be sharing some iterations we did following their feedback.
Deliver
This was the final design stage, where we continued to do more user tests and iterations to make sure our product would be user centered and would provide a good experience.
Digital Wireframes
To tackle the length of the user flow, we reduced the number of steps by combining some of them, as you can see on the screen below. This shows just one page for sign in and sign up.
On the next one, we created a guided tour so users would have more support throughout their experience.
Last but not least, I had the idea to introduce a progress bar, so users would know what to expect next.
On the Guided tour, users were confused about whether to interact with the “onboarding section” on the left side of the screen or “main section” on the right side. So when we moved to High-Fidelity we ended up moving all of the input fields to the main section, thereby reducing complexity.
On the main home page, my idea was to add another progress bar to make it more clear to users that the Wellbeing content would only be available after completing all the previous steps (a business requirement). This would tackle one of TCF’s main support ticket issues.
Answering Michael’s need to add another payment method and Carla’s need to have another verification process, we suggested these two solutions: add invoice and mobile SMS.
Responsive Design
To meet the brief, we mocked up what the designed screens would look like on Mobile and Tablet frames so TCF could have ideas for a responsive design. However, for the purpose of this project, we focused on the desktop version for the prototype.
Final Prototype
The moment everyone was waiting for… the final prototype!
This final design reduces a staggering 26% of the onboarding steps, meeting the brief to make it simpler and easier for the user.
Using Figma, we created this prototype to replicate what Michael and Carla’s experience would look like:
If you prefer checking each screen at your own pace, please check their new onboarding experience by clicking here for Michael and here for Carla (Teacher).
Next Steps
Moving forward, we recommended that The Contentment Foundation:
- Build mobile and tablet prototypes to test responsiveness
- Consider accessibility of designs
- Test, test, and more tests!
- Consider aligning the onboarding process of Families App to that of the School Platform.
Client Feedback
“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.
“I would like to add that 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.
Thanks for reading!
If you would like to check other UX design projects or get in touch, please visit my portfolio. See you there!
