Onboard with Chatterbox
A UX Design client project with the startup company Chatterbox. The project had the aim to design and develop an onboarding experience for Chatterbox’s students (3-week sprint).
Who is Chatterbox?
Chatterbox is a social enterprise. They offer marginalised workers meaningful employment as foreign language coaches, improving their overall employability and well-being. Their platform provides socially impactful blended language learning programs with personal coaching for the learners.
The team.
This project was part of a four-person team within the General Assembly UX Design immersive course.
My role
Throughout the final week and a half of the sprint, I took the facilitator role to keep the direction of the project which had been losing its focus. I presented and implemented the design studio which took place virtually on zoom with the Chatterbox team.
I took lead throughout sections of the design process, coming up with innovative ways to get Chatterbox’s message across, implementing the main animation of the Chatterbox logo which is seen throughout.
…
DISCOVERY
The brief.
Due to Chatterbox scaling in size, we needed to find a way to automate their current onboarding process while ensuring the students are still getting a thorough and intuitive experience. The main things we needed to consider were:
- Automate and scale their current onboarding. (Currently, a member of the Chatterbox team would have to go through the 30mins onboarding with a new user on a video call).
- Highlight social impact. (This had previously been explained in a 1–1 call with a member of the Chatterbox team).
- Improve overall delight throughout onboarding. (Chatterbox wanted the new users to feel excited by the program).
- Consider the mobile onboarding experience. (Chatterbox’s users were predominately business men/women on the move, they wanted the onboarding to be accessible if the user wanted to do it quickly before work or in a break).
- Signposting. (Highlight why certain questions were being asked and the relevance to the user — again this has been explained by the video call from a Chatterbox team member).
Goals.
The main goal was to scale and automate their current onboarding experience, this was our main focus as we felt the other deliverables would be included throughout the onboarding process.
Researching Chatterbox’s Competitors.
It became obvious that there were lots of language platforms and apps out there. Lots being very successful, however, none had the two of the very unique selling points that Chatterbox has:
- You as a user have your personal coach.
- In being a user you’re positively impacting the community.
This however was currently unclear in their present onboarding.
We looked at the onboarding of other language platforms (seen below). None of them however had this sense of delight that Chatterbox wanted us to create.
It was clear that the onboarding from competitors was used mostly as a tour for their app. Chatterbox wanted us to implement both the tour and the explanation of the company and the course, so we had to take a different route to the generally stereotypical language platform onboarding.
User Interviews/ Testing.
We did not have any access to Chatterbox’s current data of users opinions on their current onboarding experience so we decided to test other language app users on Chatterbox’s current onboarding to see what was picked up such as:
- What do they understand about the course and its structure?
- What did they learn about Chatterbox?
- What did they learn about their coach?
After we conducted semi-structured interviews to work out what language app users wanted from these platforms.
We drew up an assumptions table before testing the present onboarding, and the results below highlight there was much to improve on. The highlighted section showed that all 11 users were:
- Unaware of Chatterbox’s social impact.
- Did not understand the program structure.
- Did not understand the landing page.
- Did not understand how they were matched with a tutor.
Main insights from Usability testing current platform.
- Unclear why AI matching questions are being asked.
- No overview of how the user contributes to social impact.
- Unable to tell how much time commitment is required.
- Unmotivated throughout the onboarding process.
- Confusion over the booking section.
- No understanding of how the blend of e-learning and live coaching will work.
Executive insights.
From the research and the brief we chose to narrow down the findings to highlight the main areas to focus on:
Target Audience.
From discussing with the client their main users were from big firms who were interested in the positive social impact of Chatterbox. We learnt that their current users are working professionals within large companies or enterprises. Users cannot currently just sign-up; they have to go through the sales team to initiate onboarding.
Based on our research, Olivia became the persona we took forward to make all our design decisions, an amalgamation of all the user insights gathered. Her needs and pain points were taken from the user testing we had done from Chatterbox’s current onboarding.
The user journey above highlights the specific areas in which our user Olivia was getting stuck and ultimately frustrated in the current onboarding process.
Summary of research insights.
Again justifying the focus of our research on these specific areas:
…
DEFINING
Becoming the User:
“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.”
How Might We…
We wrote out some possible statements which we wanted to then implement in our design studio. We tried to encompass all the ideas we wanted to solve.
…make our users aware of the social impact during the onboarding?
…educate the users on each of the stages throughout the onboarding process?
…give a greater insight into the tutor's personalities and their past experience in teaching?
…simplify the interface to make the experience less overwhelming for the user?
….
DESIGN
Design Studio.
We conducted a design studio with our clients to get a better indication of what their vision was for the site. We used the how might we statements above to design screens.
Sketch Prototype usability testing.
The first iterations of our sketches were tested on 5 users. There were some common themes to iterate on that came up.
- Option to watch video should be optional.
- The study plan is confusing.
- Signposting needed to be improved.
Icon.
One of the sections I personally developed was the creation of the icon which is seen throughout the tutor matching process. I knew that the users had responded well to the ‘filling up’ effect of an icon. Initially, it was a profile of a person but became the Chatterbox logo.
Iterations to the prototypes.
The wireframes and sketches were iterated on keeping the executive research insights in mind, as a recap these were:
- Social impact and Clarification of Chatterbox’s ethos.
- Signposting/educating users on the structure of the course.
- Simplification of the onboarding process.
- Increase overall excitement.
Social impact:
Our new introduction screens gave a greater insight into the Chatterbox mission. Our usability tests showed that many users skimmed past reading the brief information given about refugees due to the slightly cluttered visual design- and those that did read it, still do not have a full overview of what Chatterbox are doing now. As the social impact is a large part of what makes Chatterbox stand out from other platforms, it is important to show users this is not just ‘another platform’ for language learning.
Overall excitement:
By providing this information, we, in turn, increased the user's excitement- they are not just learning a language, but by doing so, are contributing to something larger than themselves.
Signposting and simplification:
Users were confused as to what they were committing to with Chatterbox. They were aware that the course structure went into a lot more detail once the user hits the study area landing page, but we wanted to try to give a simplified version to educate the user on the structure of the course.
Signposting and simplification:
We added explanations for users about why questions are being asked. This ensured the user is no longer thinking this information is irrelevant, so in turn, they will put more thought into filling this information out.
Overall excitement:
Increased by the gamification sense of the icon filling.
Social impact:
From the design studio we realised that this simulated ‘loading page’ of the world map added to the developing excitement of the user but equally incorporating both a social impact feature of Chatterbox within this loading page equally added to this feature.
Overall excitement:
When testing it on users in both the sketching to high-fidelity stages is clarified that they enjoyed the suspense of the matching process that this animation added.
…
DELIVERY
Style guide
Chatterbox has a style guide which we implemented throughout our hi-fidelity prototype. However, we made one suggested change to the colours used.
We took the accent colours from Chatterbox’s new style guide,
particularly the prevailing purple. Their style guide used Camel JR and Big Camel, however, these felt very outdated and intense, we altered the hue of Big Camel, which we called ‘Baby Camel’. This we felt was an effective background to showcase the new accent colours, and our accessibility testing also showed this to be more appropriate, overall feeling more modern.
Solution
We developed mobile-first for the high fidelity prototypes, however, we did make a high fidelity prototype for desktop too.
The design process described above resulted in a high-fidelity prototype of the app made using Figma. Some of the key flows of the app are shown in the GIFs below.
How did we meet the brief?
- Fresh visuals to keep users engaged and excited.
- An understanding of Chatterbox’s mission, and how users make an impact.
- Clear signposting and wording so users understand every step of the onboarding process.
- A tour of the study area and guidance through the first booking, so users do not miss a thing.
- Excitement to come on the course and start their journey with Chatterbox!
Client views
- They were very happy with the outcome, they really liked the colour addition and are considering altering their style guide to make it more modern and fresh.
- They want to implement the onboarding.
- Only one thought was perhaps there was too much writing on the screens — but they also understood they wanted to get a lot of information about social impact across so it would be hard to cut the content.
Next steps.
- Milestones students go through (such as completing week-1, receiving first feedback, completing the first assignment.) This was not focused on initially as we felt the onboarding process should be prioritised.
- Moments between coaches and students. (This was starting to be addressed in onboarding during the matching process).
- Increase excitement about the final graduation.
Key Learning
- I took the facilitator role throughout the final week and a half of this sprint. This taught me how to allow everyone to get their ideas across but not take too long deliberating over choices. I learn to be assertive whilst working in a team.
- There was lots of presenting in this project. I previously had taken more of a backseat to present however I pushed myself and became the primary presenter in both the design studio and the final client presentation. The response was very positive which made me feel much more confident in my presentation skills.
Thank you for reading this far!
Let me know if you have any questions or comments on my designs for Casper Sleep.
And/Or
If you’d like to have a chat about anything design related I’d love to hear from you!
