Runtastic Onboarding
Hey! I'm Thalita
I'm a UX Designer at Runtastic

Runtastic
Onboarding

So what's this project about?

Onboarding is the first experience new users have with the product, so we know how crucial it is to get it right. However, Runtastic came to learn from a Google Business Report in 2018 that it could be doing better in terms of activation and retention of users in comparison to its peers.

We took action and decided to rethink our entire first app experience, meaning the user journey that begins in the app store and ends with the user taking the first key retention-correlated action in the app: tracking an activity. 

Our vision was to create a smooth and easy to understand first app experience for newly registered users in order to increase 7-day retention, impacting an average of 25K users that register daily in the app.

My Role

As the main UX Designer for the Runtastic app, I took part in all phases of the project, from mapping out the problem to delivering final designs. I worked together with a UI Designer, in a cross functional SCRUM team.

Runtastic Onboarding

How did we go about it?

We started by analyzing our existing flow and breaking it down into smaller steps.

With this, we identified that the post registration step was the one with the most critical issues: there were 8 screens between registration and the app, with out-of-context pop ups that could appear in random order.

... not such a great experience.

It was also the step with less technical dependencies and higher impact potential. We decided to start with that. 

Whiteboard Mapping with Stakeholders
Whiteboard Mapping with Stakeholders

Map

I moderated a short Whiteboard Mapping workshop tkick off the project, after we had already analyzed our current first app experience as well as competitors'. This exercise is a part of Runtastic's User Centered Product Development toolkit, and it has enabled all project stakeholders to:

  • Frame the problem
  • Understand the business goal
  • Understand the user need
  • Call out Assumptions and plan how to validate them
  • Be aware of constraints
  • Contribute initial improvements & ideas
Crazy 8's Sketches
Crazy 8's Sketches

Sketch

With all stakeholders aligned, we introduced the topic to the squad, which was eager to collaborate in ideation. I moderated a short Crazy 8's session to generate a wide variety of solutions on how to get users to:

  • Be set up to start a run
  • Understand the available features
  • Understand the Premium benefits
After sharing and voting, the squad had a clear preference for a certain approach that was further explored.

Runtastic Onboarding

Decide

After the ideation session with the team, we turned our ideas into a testable hypothesis. For this, I first created wireframes that quickly enabled the squad to discuss the idea further, raise concerns, dependencies and make decisions

With this, we agreed to pursue the idea of a "Get Started" screen, which condensed a few of the steps after registration into a single screen, in a checklist format, so that we made sure users completed the necessary steps in an organized way, being then ready to start a run

"Get Started" Prototype

Prototype 

In order to explore and validate the concept, the UI designer  created a high fidelity prototype in Framer based on the steps and interactions that we had mapped in a user flow, which we documented using Overflow.io.

This was later also useful to communicate ideas to the team while preparing user stories and handing off the designs.

A few iterations that led to the final design
A few iterations that led to the final design

Test

In order to validate the design in our tight deadline, we conducted informal usability tests with internal staff that was representative of the target audience and that had no involvement in the design or development of the product, such as translators and marketers.

In addition to that, in the spirit of sharing our designs with the company to get fast feedback, we setup what we call LOOP of the week: a whiteboard with designs and space for comments that we place in our cafeteria, so that anyone in the company can contribute with their input.

The combination of these helped us to quickly validate the designs and gave us insights on minor improvements that were necessary, such as adjusting copy and some control elements.

Cool, and now what?

The Get Started Tour, as it became known, is currently in development by our beloved llama-squad (ok, Cardio 2 squad). With the motto "release often", we have agreed on a narrower scope for the first release, while still providing value to users and business.

As we know user onboarding needs to be holistic so that users don't get a fractured experience, we will continue to work in the following months in improving the overall first app experience.

Dear Hey! I'm Thalita,

Best,