When users don’t know what you stand for…
Client project | 3 week sprint | UX/UI | Group of 4 | E-learning platform
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.
However, they had a headache of a problem.
When using the platform, users rarely recognised the impact and values of using Chatterbox’s learning platform, and not only that, the users had a difficult time navigating the site and finishing classes, which lead to many dropping off the site without ever finishing!
Chatterbox came to my team asking us to help them solve the arising issues, and to help them find a way to promote to their users that their participation is incredibly important in helping the lives of their marginalised employees.
Brief
- Goal is to reduce UX friction on the core functionality of booking lessons, studying, and joining classes
- Review the entire information architecture across the platform
- Create more recognition of the positive social impact Chatterbox has across the platform
My role
- 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
Click on link below to watch my video walk-through of the final prototype.
https://www.youtube.com/watch?v=L-IGNRFcdEU
1. Discover — Who are Chatterbox’s competitors and who are their customers?
Competitor research, User research, User pain-points
Competitor Research
We did a competitor analysis because we wanted to see what was out there and to get a better understanding of the market and find features, we thought could help solve the user’s problem on Chatterbox.
User Research-10 participants
- Examined existing research and affinity mapping
- Conducted 10 user interviews and affinity mapped the results
- Cross-referenced both to uncover similarities and patterns that emerged
We also looked into some stand-out quotes to help us put our qualitative findings into perspective. Here are some of them below.
One thing we found was the lack of input on Chatterbox’s particular situation. Chatterbox’s USP is they recruit disadvantaged people, exclusively refugees, to help make a meaningful social impact by giving them a place to work and boost their employability.
This functionality is underrepresented on the current platform, leading users to overlook their specialty. The lack of commentary from their research data and our own research showed this. We realised the perspectives we learned from the interviews it was important to resolve this issue.
2. Define — What problems are we trying to solve?
user persona, problem statements, HMW (how might we) statements, dot voting, sitemap, and user flow journey
We created a user persona to help guide us and help to focus on what our user problems, goals and needs are.
HMW statements and Design Studios
Before the development phase, I hosted a few design studio sessions to help us come up with solutions to our problems. To prepare for the studio session, we had a rapid HMW thinking session, where we came up with different HMW statements that best sum up what our user problems are. We then dot-voted to see which statements worked the best.
Due to time constraints, the design studio session we hosted with the Chatterbox team completed 2 of the 4 HMW statements. So I will be explaining the 2 statements only.
During our first set of user interviews, we realised there weren’t many comments from the users about Chatterbox’s social impact or about the coaches. so in our designs, we thought about:
- video thumbnails to introduce the coaches
- wording to encourage and remind our users of their positive role in creating a powerful impact with Chatterbox
- more illustrations and pictures to humanise and bring personality into the user journey
There was a lot of user feedback on confusion during the onboarding and study area, users didn’t know where to click next or what to complete first. So here are our ideas:
- Organise the layout of the study area so it is visually easier to see, to show clearly what the next or current lesson is
- Use progress percentage trackers to encourage and direct the users
Site Map and User Flow Journey
Another thing we did was to reorganise the sitemap and simplify it, due to the many responses from user feedback. Users had a huge problem finding their way through the navigation of the site when they got to the ‘study area’ page, and tasks were unclear on top of that.
This led to an increased drop-off rate.
To tackle this, we decided to streamline the process. We also changed the global navigation, so that users can click through the site quickly, and access important items more easily.
The ‘study area’ is the page where users go into after completing the onboarding process. It is where users can access their learning materials and resources and book lessons with their language coach too.
We also created a user flow map to show the journey that our user persona would go through. This is to help us check that our user can use our product smoothly, and there are no bumps on the way. This will also help to organise our prototype for later on so that we can show our design in a structured way at the very end.
3. Development — Developing ideas and problem solving
Design iterations, developing into hi-fi prototype
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
Some things we included to improve the design for the Booking Live Practice page:
- box shapes to make visually scanning the page easier so that users can know what to do next
- reducing the number of items on the top of the page where directional content is, so it’s even easier for users to understand what to do next
- inactive states on buttons
- adding instructional paragraphs to further guide the users
- overall layout less packed to allow breathing space within the spaces around the content
4. Deliver — finalising the prototype and demo!
In this phase, we dusted off the high-fi prototype and made sure it was all ready for the demo.
View my walk-through video of the final prototype here
We sent a list of recommendations to the Chatterbox Team during the hand-off so they can adapt their design process in the future.
I also created a style guide for the hand-off to Chatterbox. Here is a picture of it below. I mainly used the colours and guides that were given to us by the Chatterbox team and added a few minor changes so they can adapt the design as easily as possible.
I also created rules for how the pages should look. Here is an example of the rules for the onboarding page layout.
Reflections
- Teamwork Dreamwork: As this is my last project during my time studying in General Assembly, I learned a lot working in a group and individually. I think I can back up with real examples that I do enjoy working in a group/team as I think that solving a solution works better when there are multiple minds in it together, not to mention it feels great when we can team-build together too.
- Industry Sectors: 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)!
- Struggles: Our group hit a thinking block and that was difficult to manage as it was hard to stay motivated because the problem seemed too difficult to solve properly during the Define phase. We found that it was really hard to design a layout with all the elements that were needed whilst making it as easy for the user to understand the process of learning. 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!
- Justify every decision you make with research and data! Don’t go down rabbit holes — let research guide you.
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
Thank you for persevering to this point! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!
