Select Page

Building an interactive, guided and introductory editor onboarding tutorial for Flat.io core feature.

Flat.io, a renowned music composition editor, offers a feature-rich platform for musicians and composers.

Context

Users, although quickly adapting to Flat.io modern interface compared to other music composition software’s, reported challenges in fully understanding and utilising the score composition inputs and its advanced features, especially those new to musical composition.

Challenge

From a user’s perspective, they felt like they didn’t have any kind of guidance on where to start or what to do, Leading to a less-than-optimal user experience, hindering user retention and limiting exploration off the product’s potential.

Despite Flat.io’s powerful capabilities, user feedback and analytics indicated a need for an improved onboarding experience to enhance user engagement, reduce the learning curve, and optimize user satisfaction.

How might we… Improve user understanding, encourage exploration and elevate the overall user experience?

Duration

6 months — 2023

Project Type

Web App
iOS
Android

Responsabilities

Project Collaboration
Research
Wireframing
Prototyping
UI Design
A/B Testing

Tools

Notion
Figma

Hypothesis

By incorporating a well-structured onboarding tutorial in the Editor, we anticipate a notable improvement in user-engagement, acclerated user proficiency and icreased user satisfaction.

Product Requirements

Empathise

Utilize feedback to tailor the onboarding experience, enuring it addresses the specific needs and preferences of different user segments.

    • Improving the understanding and proficiency of users score compositions abilities, is likely to contribute to higher user satisfaction, reducing frustration and promoting a positive overall experience

Conceptualize

Create an interactive element to actively engage users in the learning process.

    • Users who complete the tutorial are expected to achieve a quicker and more comprehensive understanding of the interface and composition tools

Strategize

Implement analytics to monitor user interactions and define KPI’s to understand user proficiency after onboarding.

    • Users are anticipated to engage more actively with the onboarding tutorial, resulting in an increased exploration and interaction with the Editor’s features

Design

Develop a comprehensive onboarding tutorial that covers fundamental score composition input tools and functionalities.

    • Crafting a carefully curated onboarding tutorial that addresses user onboarding challenges, fosters a more intuitive and enjoyable experience

Example of the key components

Exploration

Engaging, familiar patterns that support the product requirements and align with one of the companies core values of continuos commitment to improve the product experience with more user-centric solutions.

Keeping in mind the business cioe value of continuous commitment to improve the product with more user-centric solutions, we explored different what key components we would need to use throughout the onboarding tutorial, such as:

    • Tool highlights
    • Light bubble
    • Key features

After coming to a conclusion on the exploration of the component elements, we started performing A/B Testing to better understand if users preferred images, gifs, videos included in the tooltips; what features users spent a longer time on in the sessions, among others.

Design of the tutorial tooltip

Final Designs

After following through with iterations based on the A/B testing and metrics we were collecting, we finally reached a first version of the onboarding tutorial focused on beginner users.

6 months later, in August of 2023 we have a successful onboarding tutorial in production, which is already generating conversation rates.

Increased growth on the creation of scores:

Web

+7.03%

Android

+3.22%

iOS

+3.95%

Increased retention in the first session duration:

Web

27.3%

Android

36.4%

iOS

43.8%

Learnings

What went wrong?

In our initial approach we thought we should start out by showing all the score inputs and then leading the user to a guided mini-tutorial on how to input notes in the score.

We later realized that this section was where users spent the least time, and instead they were a lot more active with the guided tutorial.