TrainAsONE

ROLE: Service Designer (+ UX/UI)

PROJECT: Improve new-user app onboarding and retention rates

Research: Lean canvas - Competitor reviews - Affinity mapping - Empathy mapping - Personas - Task analysis - Experience mapping/ user journey

Design: User flows - Sketching - Figma - Sketch - Photoshop - InDesign - InVision

 

STAGE 1: UNCOVERING THE PROBLEM

THE BRIEF

TrainAsONE are an award winning AI running coach who provides personal coaching adapted to user’s specific health and personal fitness goals by connecting with a user’s wearable device/ phone to translate their data. This then optimises their activity by suggesting workouts that change in real time to accommodate their specific physical condition, as well as the weather and terrain.

TrainAsONE were connecting well with experienced runners, but wanted to tap into the growing beginner market. This project involved Discovery and Alpha phases.

Metric targets: improve onboarding and retention rates of people looking to train for their first charity run.

RESEARCHING THE BARRIERS

I started by researching the user journey of first-time charity runners. I conducted quantitative research using the online tool TGI and qualitative research, conducting 14 in-depth interviews with people who have/ will run their first charity run in 2018/19.

Organising the results revealed a number of common goals, fears first-time runners have, and the opportunity TrainAsONE have to help the audience. I used this to create the persona below.

Affinity
Claire: my first-time charity runner persona

Claire: my first-time charity runner persona

EXPERIENCE MAPPING

On average, people sign-up for a charity run 4 months before the run itself. Within these four months, there’s a huge range of emotions; from pitiless despair to first-pumping jubilation. As my brief was to look at both onboarding AND retention, I mapped out this journey, based on my Persona of Claire, to understand fully where TrainAsONE could play throughout the full journey.

Empathy mapping helped plot the range of emotions felt over the 4 month period

Empathy mapping helped plot the range of emotions felt over the 4 month period

Claire’s Experience Map of her first charity run revealed three key moments to focus on (below)

The experience map uncovered three problem statements facing Claire:

Onboarding

When I’m signing-up, I want to find a plan that can work specifically for my goals and prevent me from injury

Retention short-term

When I join, I want to easily be able to understand what my next run is, so I can put all my effort into the run itself, not figuring out the plan

Retention long-term

When I’m training I want to be able to see my end goal, so I can be reminded of what I’m trying to achieve

 

STAGE 2: REVIEWING THE CURRENT PRODUCT

With three clear, insight-driven problem statements, I researched to what extent TrainAsONE were meeting these problem statements, and what could be done to improve on it. I tested the current site with my 14 first-time runners, looking specifically as how TrainAsONE was answering the three problem statements.

HomepageOnboarding: Reviewing the Homepage The core issue with the Homepage was that it didn’t explain why people should join TrainAsONE over other plans; its core features weren’t explained in compelling ways and overall first-time runners didn’t t…

Homepage

Onboarding: Reviewing the Homepage The core issue with the Homepage was that it didn’t explain why people should join TrainAsONE over other plans; its core features weren’t explained in compelling ways and overall first-time runners didn’t think it was for them.

DashboardRetention short-term: The first page new users were greeted with, once signed-up, was the above Dashboard. The overall feeling from the Dashboard was that it was overwhelming and unengaging, with almost all users saying that even if they di…

Dashboard

Retention short-term: The first page new users were greeted with, once signed-up, was the above Dashboard. The overall feeling from the Dashboard was that it was overwhelming and unengaging, with almost all users saying that even if they did sign-up, they would not know how to do their first run, nor would they be bothered to figure it out. Research revealed that making the Next Run section as simple and accessible to follow as possible was essential, otherwise people would simply move to a different plan or stop using a training plan altogether.

Goals and RacesRetention long-term: research showed that the most exciting time during the user journey was completing the race itself and receiving donation money. But, whilst the current site did have a Goals section, which could be used to motiva…

Goals and Races

Retention long-term: research showed that the most exciting time during the user journey was completing the race itself and receiving donation money. But, whilst the current site did have a Goals section, which could be used to motivate users to complete their net race, the page itself was hidden and unmotivating.

CONCLUSIONS

Overall it was clear that there was an opportunity for TrainAsONE to better meet the needs of the three problem statements researched. From reviewing the current product I added actions to how I would approach each problem statement within my solution (below).

Onboarding

When I’m signing-up, I want to find a plan that can work specifically for my goals and prevent me from injury

Action

Clearly list the rational and emotional benefits of TrainAsONE

Retention short-term

When I join, I want to easily be able to understand what my next run is, so I can put all my effort into the run itself, not figuring out the plan

Action

Make the ‘Next Run’ section as simple to understand as possible

Retention long-term

When I’m training I want to be able to see my end goal, to remind me of what I’m trying to achieve

Action

Visually represent Claire’s goal in a more prominent and engaging way

 

STAGE 3: BUILDING A SOLUTION

With 64% of current users accessing the site through mobile, I designed mobile-first, whilst still taking into account Desktop and Tablet designs.

Homepage

I prioritised adding a bold heading to draw in the user, quickly supported with clear benefits that set TrainAsONE apart from other training plans. The other sections (price, partners, reviews) were tightened up visually, so the key information could be understood with ease.

Articles

Research showed that the Articles section, which included interesting case-studies, motivated people to sign-up. I re-designed this section to allow clearer navigation between topics and work well across mobile and desktop.

Dashboard

Below the ‘Next Run’ I added space for the Goal to be visualised, both as a countdown until the race day and a tracker showing how much money had been raised so far. Experience Map research showed these to be the biggest motivators in completing the race.

Homepage Articles Dashboard

Homepage Articles Dashboard

RESEARCHING THE MOCKUPS

Having mocked-up my designs on Figma and InVision, I researched each with both my 14 first-time runners and further potential users, testing the flow, language and layout of each. Common findings were that my language needed to be more precise. Visually, I needed to centre my titles and make them bolder, whilst also giving them more space around them.

For the Dashboard, users found the Goal section very motivational and most asked for it to go at the top. Refining my design, I decided to create a mini-Goal section at the very top of the Dashboard, with a more detailed one below the Next Training Run. This would mean that once someone logged in, they could instantly be reminded of their Goal, whilst also easily seeing what their next training run was.

Undertaking this research was essential in defining my final solution.

High Fidelity

Homepage: Beyond displaying the information in a clearer and more compelling way, I moved the visual identity on; the gradient is more own-able and engaging within the fitness space.

Articles: The Articles section continues with the new colour palette, whilst introducing a more consistent photographic style; monochrome and subdued to allow focus to remain on the Article title and its category. Simpler navigation was a core focus of this section, as research revealed that different new users were motivated to join by different posts.

Linking to JustGiving Page: When signing up for TrainAsONE there’s an option to input the race you’re training for. During this stage I added in the opportunity to link the users’ Just Giving account, so they can see how much they’ve raised on their Dashboard.

Linking to JustGiving Page closer to race date: Research showed that many users sign-up for Just Giving, to raise money for their charity race, after they start training. So, if people don’t link their account whilst signing-up for TrainAsONE they would be prompted to link it at a later date, closer to their final Race day.