How to build a delightful onboarding experience?
A mobile and desktop onboarding experience designed for Chatterbox during a 3-week sprint. A client project completed during a UX design bootcamp.
Chatterbox hired us to re-think their customer onboarding process.
Who are Chatterbox?
Chatterbox are an e-learning platform working with marginalised groups from around the world to help teach languages. Their language tutors are refugees, single parents and people who identify as ethnic minorities or belong to other underemployed groups.
I. What is the business goal? Why did they hire us?
1. Automation and Scale
Their current onboarding requires human interaction and it is long. An employee guides new customers through the onboarding process to set up a profile and book in a class with a tutor. The whole process takes about 20–30 minutes in duration. As Chatterbox scales they are looking to release this bandwidth and create an onboarding that new students are able to complete on their own without manual support. They are also looking to reduce the length of the process to 15 minutes.
2. Highlight Social Impact
New users currently have no overview of how they contribute to a social impact unless they reviewed the enterprise’s website to learn more. There’s an opportunity to highlight the social impact during the initial interactions with the product.
3. Improve Overall Delight
Currently users feel somewhat unmotivated throughout the onboarding process. They don’t feel extremely excited to come on the course and start their journey with Chatterbox.
4. Consider Mobile Experience
Chatterbox is currently hosted on web only. Our goal was to build for mobile and desktop alike.
Before I introduce the target users and we dig into their needs, please meet my team:
We attended a General Assembly UX bootcamp in 2021. We equally contributed to every stage of the design process — the user research and design (sketches, mid-fidelity wireframing, high-fidelity prototype). We used Figma as graphics editor. Two of us have a background in social sciences — Alice graduated as an anthropologist and me (Dora) as a sociologist. This background was very useful for the research part of the project. We conducted semi-structured user interviews and user tests, summarised the findings and iterations, and supported the qualitative research with a survey. Cam is a web designer whose expertise helped us excel and Izzy was a fantastic copywriter with her background in humanities (English).
This fantastic team made us come up with an engaging creative solution! Read more to find out about the suggested design.
II. Whom are we designing for? Meet the target users!
We wanted to understand more about the main struggles and pain points of the users while they onboard to Chatterbox. Why isn’t the current process intuitive and delightful?
Our research was based on a combination of usability testing of the current onboarding platform and semi-structured interviews about e-learning. We conducted 11 usability interviews (approx 45mins each) and used affinity mapping and “assumptions” as a methodology to collate our data into themes. In addition to the interviews, competitive and comparative research was undertaken to analyse different websites and apps onboarding processes. The key insight of the interviews was the following:
Based on our findings we identified the following executive insights. We need to…
- Highlight the social impact and clarify the ethos of Chatterbox.
- Introduce signposting to educate users on the structure of their language course.
- Simplify the onboarding process.
- Increase overall excitement.
To showcase the struggle of the users I want to introduce Olivia, the persona, who represents a typical user of Chatterbox.
III. Problem Statement
Follow Olivia’s journey below to understand her main pain points during the onboarding process. Based on our research and observations Olivia’s problem is the following:
Olivia needs to be able to independently complete Chatterbox’s onboarding process whilst learning about the course structure and the positive social impact of the business so that she can launch into the course feeling prepared and motivated.
IV. Design
Now that we understood Olivia’s journey and main struggle, we came up with 4 key “how might we” (HMW) questions to address her problem and identify deliverables.
The HMWs were brought through into a design studio with our client, and the outcomes of the studio were implemented in our designs. Our design addressed the key executive insights at all stages. Some snapshots of the development process with the key deliverable highlighted:
The final prototype we delivered to our client:
We developed mobile first:
V. Next Steps
Some aspects of the current onboarding could be further developed along with the below ideas.
1. Milestones students go through (completing week 1, receiving first feedback, completing first assignment etc.) could be highlighted with some creative delight.
2. Moments between coaches and students could be highlighted at the matching, the first message and first live class, and the last live class stage.
3. There is room to increase excitement about the final graduation.
Key challenges
- Understanding the current platform and our role
One of the main challenges was to get our head around the client's needs. Chatterbox was going through a rebranding and they were moving away from the platform’s current design. They wanted to re-design the customer onboarding which currently ran until the user reached the “study area”. This is where they brought us in. It took some time to understand what changes they wanted to implement and how. How far should the onboarding go? Should a tour around the study area be part of it? What specific sections did they want us to improve? We made sure we got clarifications on the grey areas. After a few client meetings and a design studio, we understood what they needed from us and we started our research in confidence.
2. Chatterbox’s focus shifted during the design process
Chatterbox’s main focus was employing refugees to teach languages. During the course of our sprint, their focus shifted, and they started to employ other underemployed groups such as people with disabilities. This had an impact on our development as the initial ideas were centered around refugees and storytelling about their journey. Based on this shift we removed the increased focus on refugees.
3. No access to the new style guide
A UX designer was already working on the mid-fidelity prototypes of the new “study area” while those assets were not signed off yet. We couldn’t get access to these assets. We had to create our own wireframes for the tour around the “study area” and use the old style guide. It would have been helpful to get access to the new wireframes so that we could have worked with the new assets. Our wireframes are usable, but when they eventually get implemented at the end of 2021 they must be revised and matched to the new design.
Key learnings
Test, test, and test!
Every individual in the team had great ideas for design solutions during the project. Sometimes we had different opinions about the right direction. I learnt that opinions and views can generate great ideas while only testing can show which idea is working and which not. We tested every level of our design (low/mid-high-fid) and that justified or made us discard our solutions. Do we disagree? Let’s test it! :)
I have improved my leadership and communications skills. In UX it is key to be able to communicate assertively, to make yourself heard with allowing room for discussion and disagreement. I have learnt how to facilitate meetings in my previous role and I used these skills in the client meetings and in the team meetings. 3 of us took turns as a facilitator during the 3 weeks of the project. I successfully guided the team through the design process from sketches to high-fidelity during the second week.
How did “I” contribute to this project?
In the research part of our project, I took charge of summarising the comparative research and I conducted 3 user interviews out of 11. When we collated the insights I took charge of creating an assumptions table and marked the key trends. The main objective of the assumptions table was to justify and falsify the assumptions we had about the user’s behaviour. We collectively identified key trends by affinity mapping and moved the executive insights into a design studio with our client.
Based on the outcomes of the design studio Alice created a master sketch (low fidelity prototype) which we tested with 5 users, I conducted 2 tests. We improved our design based on the iterations we saw during the testing and went ahead with creating mid-fidelity prototypes. I created the loading page, the tutor page, and the overlay tour pages in mid-fidelity for desktop and mobile alike. We tested the mid-fid prototype with 9 users, I conducted 2 tests. We improved our design and moved onto creating high-fidelity. We tested the final design with 5 users and made final improvements, I conducted 1 test.
Thank you for reading — if you enjoyed the above please get in touch! :)
