Mangahigh is a UK based Maths Games Edtech company with products used by more than 5.000 schools and education departments all around the world.
The TE23 project started with the request to provide users with bulk action tools for Mangahigh’s main products ‘Teacher Experience’ and ‘Student Expeirence’. Both are Mangahigh’s main products – online platforms through which teachers and students from all around the world interact by assigning games and quizzes that students work with to improve their understanding of maths concepts. Both products carry multiple technology and legacy issues to this day.
As Lead Product Designer, I worked directly with the VP of Product, Developers and other designers, reimagining all of our products to meet the demands and expectations of a new generation of clients and users after the challenges placed on society after the global pandemic of 2020.
Project Proposal
Design Strategy document. A summary of the research and proposed solutions.
As a continuation of the Registration & Onboarding project, this new project codenamed ‘TE23’ (short for Teacher Experience 2023) has as its main objectives:
Reducing Churn: Analysis
Originally, the brief provided by Product Management presented numerous reasons gathered from churning users and customers feedback of recent years.
These worked as a starting point to start the research, which later on helped develop an informed strategy.
It is a bit time consuming adding activities/assignments with the same end date to all of them and having to change the due/end date individually.”
Teachers are time poor and even though these folders are a great idea, I would not use them cause of the amount of time it takes to apply.
It would be extremely useful to be able to select multiple assignments to assign to a clas
The TE23 project involves improving the user experience of teachers for all regions, specifically of the Platform Teacher Experience, with the hypothesis that improving the overall user experience will have a direct and measurable impact on sales, generating “x amount” of revenue and reducing churn by “x amount”.
Research suggests features such as Bulk Assign and others have been requested by Sales Team, based on feedback from actual customers.
These features have been requested for the TE23 project, but the data provided by Product, such as feedback from users, is outdated and scarce. This doesn’t present evidence enough that a particular feature within TE will have direct and measurable impact on revenue and churn. Besides, the proposed feature and the suggested strategy doesn’t provide any proof coming from direct user experience sources.
In order for the Design Team to produce design alternatives that reflect customers needs according to more recent/updated information, as well as specific needs from the Sales Team which would help them present our products or other needs they may have, it is required by the Design Team to run further interviewing and surveying of main project stakeholders.
Objective
Methodology
In order to find common behavioural patterns from our customers and users, It was decided to use the following techniques:
Survey Results
The Survey results helped the Design Team define Personas and find common painpoints across their user flow.
These findings were essential to produce a design strategy.
Customer & User Survey
Sample: 78 teachers from around all regions
A survey was designed and ran among all regions, aimed towards teachers and heads of schools with the following objectives:
Interviews
A) Head of Sales and Sales Representatives: Americas, APAC, Brasil, Asia, NZA
Live Semi-Structured Interview: 12 questions x 5 min: 60min approx.
Structured Email Interview: 8 questions.
Goals
Understand if main reasons for customer churn, low revenue, are directly influenced by the problems in the Platform Teacher Experience product.
To understand stakeholders expectations from our products, their mental models, preferred and ux patterns our stakeholders are used to.
How do we become part of teachers’ journey? We want teachers to be able to miss us!
Most teachers have to assign many tasks in one go after selecting it. We can further these by recommending similar activities to assign so its more easy for them.
Teachers have limited time in Mangahigh. We don’t want them to waste that by assigning tasks over and over again.
Teachers would like to assign activities based on what topics they are teaching in different terms, we can assign in advance, and they could potentially assign topics for the whole year and break it down.
Teachers are organised – this is what I’m doing in week 1, week 2 etc and would be great to assign 10 weeks activity etc so when they’re in MH they just need to focus on analytics.
B) Customers & Users
A semi-structured interview with Alison, a former user who kindly gave us specific feedback on her main reasons for leaving the product.
I find assigning tasks on Mangahigh really time consuming. I generally assign three tasks per kid, per week.
Thematic Analysis Document
Analysis of Research: Surveys and Interviews
The introduction of the concept of Personas is new to the company.
Due to this issue, during the Registration and Onboarding project it was important to at least count with User Types to identify general user behaviours.
From this, the company is moving towards the adoption of fully fleshed Personas to work with.
User Type to Personas
It was essential for this project to identify users behaviours deeper than ever before in the company.
The results from the user survey and stakeholder interviews helped us identify the following ongoing reasons for churn:
A) Designed for the Improviser
Mangahigh’s Teacher Experience evolved very quickly in a short period of time.
Its evolution led to a product aimed not only for seasons users, but all those who would only want to assign activities on the fly which goes against the objective of making Mangahigh an essential part of teacher’s learning routine
Many UX and UI patterns in the product would prove this to be the case which will later be analysed and reimagined.
Theme A – Designed for the Improviser
Mangahigh’s Teacher Experience is not self-explanatory and became catered for short term users.
This clashes directly with the objective of making Mangahigh’s products essential for blended learning.
B) Familiarity and Adaptation
Our teachers mental models for teaching are based on traditional printed material.
The steep learning curve and non-familiar interface impedes quick adoption of the product
Theme B – Teachers’ mental models
Unfamiliar interfaces that differ too much from user’s mental models make it difficult for them to adopt new products.
C) The Assign Cycle
Assigning activities is the core function of the product.
Building upon a previous mapping of the customer and user flow, the Assign Cycle was identified as a strategic node to begin working.
Before this analysis, the ‘Assign’ task was understood as a waterfall process, but understanding it as a cycle helped the team comprehend our users needs and identify specific painpoints in this task flow.
Theme C – The Assign Cycle
Assigning activities to students is the heart of both Teacher and Student Experiences.
It is here that the project needs to focus to ensure churn is reduced.
Having identified and mapped all the components of the problem, it was time to develop a plan of action and define the tactics.
Five possible strategies with different starting points along the Assign Cycle where presented to the Product team and discussed in an interdisciplinary meeting involving VP of Product, Product Managers, Front End Developers, Back End Develops, and Design.
Strategy
Five possible actionable starting points across the user flow map.
Schedule and Plan
After presenting all strategies to the team, it was decided to go for Strategy C – From Nodal Points.
A full analysis of the Assign Page of the Teacher Experience was decided, from top down identifying painpoints in every aspect of the page to begin with.
Full Figma Prototype
The full project prototype made in Figma, implementing all the design solutions developed during the synthesis stage. You can interact with it in Full Screen by clicking the Full Screen button on the top right corner.
Mangahigh counts with two main tools for finding content, activities and games:
Research showed that the main tool being used by teachers, is the Search Bar.
However, due to conflicting hierarchies, the search bar is relatively hard to access and its behaviour is outdated in comparison to modern UIs.
It was reviewed by implementing guidelines from design systems such as Google Material 3 and Dell.
The top AppBar now counts with three levels and provides the searchbar right at the users fingertips, on top of the screen and available at all times.
Also, Filtering was reviewed.
A system of chips that would overflow was replaced by a much simpler interface.
Previously, a reminder to Upgrade or Renew Subscriptions appeared right under the AppBar.
Another reminder to Upgrade can also be found under the Admin/School tab – which is relatively hard to discover unless you are a very experienced user.
Data proved that this pattern was not being successful, on top of taking a considerable amount of space in every section of the product.
The Upgrade Banner was then replaced by a Top Banner that would promptly draw users attention due to its prominence.
Another solution, sitting in the Navigation Drawer, was implemented.
Both solutions were prototyped and a/b tested in Maze and also live in the product.
The previous Browse section of the Assign Page featured Breadcrumbs, and a Folder structure using a metaphor similar to that of hard drive folder structures.
Feedback gathered during research suggests that teachers don’t find this metaphor familiar enough.
To solve this problem, different viewmodes and a new system of cards was designed
The Upgrade Banner has a direct impact in Conversion rates. It is the one and only component present in the system, designed to lead the user to the Upgrade/Renew Subscription form.
The current alternative presents multiple technical issues that led to a complete redesign.
Two Alternatives: Top Banner and Navigation Drawer (menu) Banner were created and tested with the objective of finding out which one would present better usability features and lead to an increase in Conversion rates by taking users to the correct forms.
Two tests were ran:
A/B Test: Testing New Upgrade Banner Alternatives
The full project prototype made in Figma, implementing all the design solutions developed during the synthesis stage.
You can interact with it in Full Screen by clicking the Full Screen button on the top right corner.
Usability Test: A/B Test – Top Banner vs Navigation Drawer Banner
Platform: Maze
Participants: 5 Users Per Test – Worldwide.
In-App Live A/B Test
Test Length: 6 months – 1 Year
Same alternatives have been put to the test using Matomo Analytics.
Test is currently in course.
The TE23 project is an ongoing iniatitive currently in its second phase.
Considered holistically, it is a complete revamp of our main products that is triggering a complete revision of the Mangahigh brand and identity as a company.
With the implementation of a Human Centered Design philosophy, the problems being addressed have taken into account our users as our main stakeholders.
Next steps involve the complete revision of the Student Experience.
I will be very excited to help improve our children’s experience and help them enjoy their learning journey.
