UX Case Study: Boosting user engagement during Teachermate’s free trial

Eleanor Woodger
9 min readDec 7, 2020

Client Project: Teachermate

Overview

Timeline: 2-week sprint

Team: 3 designers

My Role: User Researcher, Designer and Facilitator (for the design studio)

For the final project on the General Assembly UX Design Immersive course, we worked with our client to create a responsive web design for Teachermate.

Using the double-diamond process, we worked collaboratively throughout this project. My particular role was specialising in the design phase, drawing on my skills in this area.

The Brief

Written brief and our first client meeting

Teachermate is a digital product used by childcare professionals to track children’s progress and development. It aims to reduce target users’ paperwork and simplify their documenting process.

Our brief was to:

  1. Create an onboarding experience for first-time users
  2. Reduce the number of users dropping out after their free trial ended

We arranged a meeting with the founder of Teachermate to delve deeper into the brief. We realised that we needed to shift and adapt our focus based on what our client had meant by ‘onboarding’. Contrary to what my team and I thought, the onboarding was after sign up, where users have full access to the software for a two-week trial.

The scope of this project was changing fast…

Discover

Competitor analysis, usability tests on the current site, user interviews, surveys, affinity map

To start our research, we wanted to know about Teachermate’s competition. I created a table and looked into four competitors, then put the research into the table below. We analysed the competitors’ homepage, onboarding, design, features, photo/video sharing, pricing and extra information.

Competitor analysis (at a glance) on Miro

It was becoming clear that early years' (0–5yrs) software was a very competitive market. We needed to look at their onboarding and see how they were keeping their customers from churning.

Here we hit our first stumbling block. We could not gain access to most of the competitors' software. We needed to share details of the childcare setting we were from to gain access to the free trials.

We had some assumptions that Teachermate users were not informed of how Teachermate could benefit them. This could mean they signed up without knowing if it would be of value and then if it weren’t, they’d churn. Eager to justify these assumptions, we looked at the competitors home page.

How did they communicate the software’s value to their users?

Feature analysis on the homepage: Teachermate was missing a free trial button and had inconsistent branding

Teachermate did well in the feature analysis, but interestingly:

  • Teachermate was missing a vital key feature: A free trial button
  • The branding was also not consistent throughout the website and software

We also looked into some companies that successfully onboard their users, such as Miro and Slack.

Examples of how Miro and Slack onboard their users

Our client was under significant time pressures at this stage, so we did not receive critical information at this ideal point. So, we needed to adjust our timescales and activities to make the most of each day of this sprint.

Survey
We thought we would get more valuable insights from a childcare focussed survey with target users all being childcare professionals and parents. I created two surveys to cover both sets of users.

After sending these out to our networks, it became clear that we wouldn’t get enough people to complete the survey in this short sprint to provide any significant insights. So I suggested that we created a new, general one, based on people’s onboarding preferences and experiences.

We had 60 responses, and here were some of the key insights:

  • 84% of people, like to learn new software through onboarding screens or a video tutorial
  • 92% of people said they bounce off software because they can’t work out how to use it

Interviews and Usability Testing (on the current site)
To source childcare professionals, I made use of my former contacts from my previous work in childcare. This came in handy as we would have otherwise struggled to access these specific people in such a limited time and budget.

I did three user interviews and user tests with childcare professionals, and as a group, we did seven in total.

We put each insight on a sticky note and created an affinity map. After grouping them into categories, these were some of the key insights:

  • Time was a significant constraint for childcare professionals
  • Users didn’t feel tech-savvy enough to ditch the pen and paper and use a digital tool
  • Childcare software was often not very intuitive
Affinity map on Miro, showing all the insights from the user interviews, each colour represents a different user

Define

Persona, empathy map, experience map, problem statement, scenarios and user flows

Moving onto the define phase, we synthesised our research data and created a persona. This enabled us always to make sure we were designing for our target user (Anne).

Persona - Anne

Empathy mapping is a great tool to understand our user's needs by thinking about what Anne might say, think, do and feel.

Empathy map to help us further understand our users

To see Anne’s pain points in context, we created an experience map. From this, we could empathise with Anne using Teachermate for the first time, and how she felt when she couldn’t understand how to use it.

Experience map: to empathise with Anne using Teachermate for the first time

Problem Statement
Anne needs a simple means of keeping on top of nursery admin because she is drowning in paperwork, and most nursery apps are too complicated for her and her staff to use.

Scenario and User Flow
As a team, we created two scenarios and user flows - one for onboarding onto Teachermate and another for subscribing to the full plan after the 2-week trial. The user flow shows how Anne will navigate her way through the site whilst completing her goal.

Onboarding scenario:
Anne has logged on to the Teachermate site for the first time, and she has a 15-minute window to learn about the platform’s features before her next commitment.

Onboarding user flow

Subscription Scenario:
Anne has three days left of her Teachermate free trial and needs to be advised on the benefits of subscribing to a monthly plan.

Subscription user flow

From synthesising the research data and defining the problem, we understood that there were three main areas we needed to concentrate on.

  1. The homepage: so Anne can understand what value she would get out of signing up to the free trial
  2. The onboarding: so Anne can quickly learn how to use the platform
  3. Converting to a full plan (after two-week free trial): to encourage Anne to sign up to the full plan. This was also important to address the customer churn rate mentioned in the brief

Develop

Design studio, feature prioritisation

To summarise and bring all the research data into the design phase, we wrote some How Might We (HMW) statements:

  • HMW educate first-time user Anne on Teachermate features in an engaging and accessible way?
  • HMW encourage potential customers like Anne to keep using Teachermate after the two-week trial ends?
  • HMW find a way to rethink the homepage so potential customers like Anne can better understand what Teachermate is offering?

We took these HMW’s to the design studio with our client. As this was during the pandemic, we set up a zoom meeting to do it remotely. We started with a warm-up activity, and then I took over to facilitate the design studio. I explained what the design studio entailed to our client and led him and my team through two rounds of rapid ideations. Facilitating was my priority, but I was also able to participate, as this is one of my favourite parts of the process.

In each round of the design studio, we concentrated on one HMW. This meant we could all focus on solving the same problem.

Design Studio (round 1)
Design Studio (round 2)

After dot voting our favourite features, we prioritised them to see which ones we should implement first. To do this, we used the MOSCOW method, where we categorised potential features into must, should, could and won't.

Feature prioritisation (MOSCOW method)

Deliver

Usability tests, iterations, style guide, accessibility, prototype

We did three rounds of usability testing:

  • Low-fidelity (lo-Fi)- 7 users
  • Mid-fidelity (mid-fi)- 7 users
  • High-fidelity (hi-fi)- 5 users

Here are some of the key iterations based on insights from the tests:

On the homepage, the key iterations were:

  • Too much text in the pricing section, so we reduced the information
  • Users wanted to know which pricing package was the most popular, so we made this visible
  • Users only wanted to see how Teachermate could benefit them, so we took away how users may be struggling without using a digital tool
Homepage: Original (left) and new: lo-fi, mid-fi, hi-fi

On the onboarding screens, some of the key iterations were:

  • Clearer call to action on the onboarding pop-ups, so we made the ‘got it’ button bigger and central
  • Users thought the background was distracting, so we changed the image and made it more subtle
Original observation page with no onboarding (top left), new observation page with onboarding (lo-fi, mid-fi, hi-fi)

On the Adding children screen, some of the key iterations were:

  • Enabled bulk-adding by creating additional input fields on the page
  • Users wanted to know how they could subscribe, so we added a clear CTA - a ‘get full plan’ button on the global navigation so it is always visible
  • Users wanted to know how many days they had left of the free trial, so we have put a countdown in the global navigation
  • Reduced the header as it was taking up too much space
Original ‘Add Child’ page (top left), new bulk-adding children page (lo-fi, mid-fi, hi-fi)

Accessibility
We used a tool to see if the current colours on Teachermate were accessible. As they failed all the accessibility tests, we extracted the exact colours from the logo and adapted them slightly to create a new colour palette.

Homepage accessibility
Button accessibility

We collated the UI elements and created Teachermate’s first style guide:

Style guide

Final Prototype

Click here for prototype on Figma

Next Steps

  • Create a prototype for mobile and tablet
  • Create colourised keys to visualise a child’s special requirements
  • Display how much paper/trees/time you’d save by using a digital tool
  • Design ‘Care tracker’ and ‘Accident form’ pages
  • Investigate Android issues

Client Feedback

Our client - The CEO of Teachermate - gave us very positive feedback. We had thought of features and details that he had never considered and was shocked at the amount of work we had completed in this short sprint. He hopes to implement all our designs, giving us updates on how this affects the business.

Key Learnings

Problem Solving: Having a client can be unpredictable. We started with less than we had been expecting: no existing Teachermate users to interview or any useful data to start the research with. Despite this, we managed to get enough insight through competitive analysis and speaking with childcare professionals. We had overcome this hurdle of lack of data and users by the time we moved onto the design phase.

Learn from others: Collaborating with my two teammates opened my eyes to varying ways of solving the same problem, which has been invaluable in my development.

Thanks for reading. If you have any questions or want to reach out, you can find me on LinkedIn.

--

--