Chatterbox is a language learning platform that is specifically unique because they exclusively hire marginalised workers who are refugees to teach foreign languages to students.
This is so that they can positively impact their language coach's lives by helping them earn a living and to improve their hirability.
Client Project | 3 Week Sprint | UX/UI Designer | Website | Group of 4 | E-learning
Brief
Review the entire information architecture across the platform.
Create more recognition of the positive social impact chatterbox has across the platform.
Goal is to reduce UX friction on the core functionality of booking lessons, studying, and looking at learning resources.
My Roles
-
User research and analysis, creating the problem statement.
​
-
Drafting sketches and wireframes to do user testing and reporting findings.
​
-
Conducting design studios with users and with the Chatterbox team.
-
Creating the new Site Map diagram.
​
-
Overseeing the design process and manage the different iteration process.
​
-
Bring the low-fidelity prototype to high-fidelity, and prepare for the demo presentation.
Process
Discover
Understanding the user and getting an idea of the problems they face, and the market space.
We conducted user interviews, competitive research, and figuring out the user pain points.
Define
What problems are we trying to solve?
Pin-pointed the user’s main frustrations and goals using various methods and tools.
Built an idea to understand the happy user journey.
Develop
Design iterations, developing into hi-fi prototype
Conducted many usability tests and some design studios to narrow down the best design for each page.
Key Research Findings & Methdologies
Discover Phase
After we conducted 10 user interviews and analysed data from existing research and used affinity mapping skills to find out what the pain-points and high-friction areas were, my team and I decided on the core areas to focus on the in the redesign.
​Main Tools & Methodologies Used:
-
User Interviews + Surveys
-
Competitive Research + Analysis
-
Affinity Mapping
-
Stand Out Quotes
Define Phase
I used many different approaches to define and set up our main goals of this project. I ran a HMW & dot-voting workshop with the Chatterbox team, their co-founder, Guillemette and UX designer, Nora. In this workshop we brainstormed possible solution approaches with sketching, discussing and voting.
​
We also took the time to pin-point the friction areas in the original existing site map and architecture of their onboarding journey, as well as the learning & booking space in their website.
​Main Tools & Methodologies Used:
-
User Persona
-
Problem Statements
-
How Might We Statements
-
Dot Voting Sessions (workshops)
-
Sitemapping
-
Mapping out 'happy' User Flow Journey
How Might We statement session result. Bottom right are the final HMW focuses we voted on, and you can see the other statements that were considered (top left).
How Might We - Design Studio session result. Solution brainstorming results from HMW prompt. Ideas to include certain features to engage users.
Development Phase
Prototyping from low - high fidelity on Figma. The agile methodology was used quite aggressively at this stage, because of the time constraints we had. By adopting this approach I was able to navigate hard to design areas and problematic areas, with flexibility and it allowed me to test frequently with users to make sure the design solved the problem areas, and on track with keeping my team up to date with changes and results.
​Main Tools & Methodologies Used:
-
Design Iterations
-
Developing from low to high-fi prototype
A reminder of our design goals.
.png)
Design iterations from low fi to high fi (onboarding booking a live practice page). Pointing out key features we improved or added to aid in improving the user experience of this section of the onboarding journey. Click to magnify view.
Somethings we included to improve the design for the Booking Live Practice page:
​
-
Clearer call-to-action buttons.
​
-
Improve the layout by adding easy-to-see pill-like shapes, and condensed the page so users don’t have to scroll.
​
-
Inactive state buttons so actions are clearer.
Iterations (low-high fidelity)
Click to enlarge picture
Conclusion
Reflections
My experience
I really enjoyed working with a live client, especially one which has such a unique value as a company.
​
I was already interested in working in the non-profit and e-learning sectors, so Chatterbox really was the best mesh of the two (even though they weren't a non-profit organisation).
What I learned
Rapid methodology & User testing
Our group hit a designing block and that was difficult to manage as it was hard to stay motivated, because the problem seemed too difficult to solve properly. But once we made it out of the block by using rapid small iterations and many user testing to back-up with data, we started moving forward and built our momentum back up!
Final product walk-through
Words from Chatterbox
“We were very pleased with the execution of the project! The team developed a deep understanding of the user needs and opportunities. They tackled every UX steps well, created their own hypothesis based on relevant observations and interviews.
I liked how they involved us but operating independently while creating different ownerships within themselves. It showed great collaborative skills.
Their presentation was flawless! This whole project was a great addition to our product team.”
— Guillemette Dejean, Co-founder & COO of Chatterbox