⬅️  Back to /ClientWork

MyGuitare

SaaS Design

MyGuitare is an e-learning platform for guitar enthusiasts with over 200,000 registered users, making it one of the 3 largest platforms in the French-speaking market.

Deliverables

Link to client platform

Link to Figma design

Problem

MyGuitare had been focusing on growth, leaving the platform lagging behind from both a functional and design standpoint. New features were built on top of a temporary solution, which now stands too tall to demolish and reconstruct without a solid design direction. The platform was also missing the visual identity it needed to stay consistent with the brand.

Solution

Help users achieve their life-long dream of playing guitar, while accelerating business growth for the company. This project is part of a larger mission that also includes the rebrand of MyGuitare, and the redesign of their marketing website. This case-study will specifically focus on the platform.

Role

As a Product Designer and Owner, I led several design efforts (including user research, hands-on design and managing day-to-day deliverables) and facilitated software development by working directly on quality assurance with Engineers. As per usual through castlelab, I was also responsible for most business exercises (including selling, project scoping, requirements gathering, onboarding). 

Team

SNAPSHOT OF 
DELIVERABLES 

Platform onboarding
Course navigation flow
Private Teacher feature
Payment flow

EMPATHIZE

Problem Context

There are plenty of learning platforms out there for guitar enthusiast, the challenge lies in keeping a user motivated throughout their learning journey.

Project Hypothesis

We believe the roadmap to learning guitar isn't clear, making users feel lost as to where to start or continue from. We are also aware from the client that users are having a hard time seeing success and measuring progress.

Project Goals

The goal is to understand guitar learners more holistically, their motivations and fears in life, then to investigate their experience on the platform so that we can remove those painpoints and make the learning experience more welcoming and rewarding.

User Interviews

We came up with a persona that helped us empathize with the end-users beyond their experience on the platform. Sebastien served as a reference point for making design decisions and aligning internal discussions (research done in French with help of Branding specialist - Pascal Stefani).

Interview Insights

Themes & Actionable Insights

  • Users are getting lost on the platform
  • Users are hardly seeing progress
  • Users are unfamiliar with the dedicated feedback system
  • Users love the MG pedagogy (Cyrille is amazing from what we've heard)
  • Users have mixed feelings about the community features

I'm only showing a few themes here, but interviews revealed a lot more concerns about specific parts of the platform or the learning journey. For example, users had mixed feelings about the Community feature, which is like a forum for all members of MyGuitare, where people discuss anything from 'wins of the day' to bugs.

Business needs

Good user experience involves making compromises. We work off an existing business modal with strengths and weaknesses that we need to account for when redesigning the platform. Typically, the budget is big constraint, but here are a few relevant ones:

Opportunities
  • Users are welcoming and passionate about guitar
  • Has diverse courses
  • Founding team is very close to end-users
  • Has low costs
Constraints
  • A single teacher
  • Relies on user self-discipline
  • Users switch courses before completion (low )

Competitive Analysis

We audited 5 high-performing platforms (French & English platforms) to shed light on industry standards, and opportunities to tailor our platform for users like Sébastien. Our insights are summarized below.

  • Goal Driven. Competitors have gamified the learning experience, attaching goals to specific rewards, like badges and trophies. They are trying to keep the user focused and motivated through challenging times using visual cues that make it easy to notice progress, like progression bars.
  • Good information architecture. There is a clear hierarchy in content, putting key information at the forefront (to be seen at a glance) while the second layer of content remains accessible but is more contextual. Lots of white space too.
  • Social. Music has a strong social nature, many learners are looking to entertain and connect with their circle through music. The learning experience therefore extends beyond the main channel. Users are encouraged to share their achievements with the platform users as well as with friends. It's important that you get positive feedback, however constructive, because it boosts your motivation to come back and learn.
  • Omnipresent. There platforms create a mini-world around the learning experience such that you never feel bored or lost. They use follow-up messages to offer tips and resources, as well as push notifications with friendly reminders to keep momentum and build trust.

DEFINE

The platform redesign was so large in scope already that we divided it into version releases. Version 1 would be the most important. It includes the redesign of the platform's most primary functionalities, and using the new brand identity we made alongside Abdellah, we create its UI library to accommodate and speed up future additions. The social features of the platform, considered secondary to the learning experience, were therefore pushed to V2. This case-study deals only with V1. With our research synthesized, all stakeholders agreed on the following scope for our first deliverable:

Rethink the information architecture.

Based on the research showing users were taking a long time to reach their intended screen or feature. Users also complained overall about feeling 'lost', as well as confused about some of the navigation items.

Redesign fundamental user flows

Based on the research showing users were experiencing painpoints at crucial moments during the learning and buying experience, among others.

Establish a design system

A design system that aligns with the new brand identity we crafted.

DESIGN

Rethink the information architecture

Users surveyed expressed a complex range of emotions throughout the learning experience, both within and outside the platform. Typically, excitement kicks in when you read about a course and imagine yourself playing a certain song to a possible loved one. Then comes loss or disapointment when you're unable to measure progress, for example. Since learning music constantly involves imagining yourself in a future state (always aiming for a goal), it becomes a series of expectations you either fulfill or fail at.

With that in mind, we can further empathize with users by establishing mental models on the platform, structuring information in a way that follows users' emotions. We created dedicated spaces for users to give in to their emotions with little distraction. For example, the community is a place for having fun and engaging with other users. These dedicated spaces will always gently nudge you towards resuming your learning.

Emotional Journey Map of a guitar e-learner
Translating emotions to info architecture

Our research also shows users are confused about taxonomy and the grouping of information. Comments like "I'm unsure which courses belong to the main course" specifically show that the relationship between a module and its course are misunderstood. On @Yuki's sound advice, we made a class diagram, which is a type of diagram taken from Software Programming that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects.

Class Diagram - MyGuitare

Redesign fundamental user flows

Onboarding

Our team focused on creating an engaging and streamlined experience to find the right course for users, who are eager to look for a course and start practicing. With much discussion among all stakeholders, we decided to onboard new users with a short quiz to suggest personalized course recommendations based on guitar experience and music preferences. This is designed to show new users only what is necessary and streamline the steps to finding a suitable course and begin practicing.

onboarding userflow - original from @Yuki

Course Navigation & Learning

course navigation - original from @Yuki

Our solution aims to provide just enough information to educate new users of the two conditions for moving unto the next lesson, without being intrusive to recurring users:

  • Each Lesson requires 1 week of practicing
  • Reflect on progress at end of Lesson
Course navigation

To accommodate for such requirement, we disabled the ability for users to move on to the next lesson, when it is unavailable. This eliminated dead ends for users and simplified the steps of navigating through a course. Hovering over a disabled button reveals a tooltip to assists users in gaining clarity of the system.

Course statuses

Browse modules from a course

A course is made of several Modules, and a user can decide to purchase only some of them. Similarly, the video game library @Steam provides 2 ways of accessing their equivalent of modules for a game, called packs or modes. You can search them via the public marketplace where game profiles are infused with marketing-oriented visuals to entice your initial interest in the game. There, you can select a specific pack. The second way to access them is once you have already purchased parts of the game. In the 'purchased' game profile, you find other packs along with data about your progress on the packs you've purchased. 

@Steam did it so well, we had to copy it. Therefore, in addition to the All Courses list, you'll see below the UI dedicated to when a Course is fully or partly purchased along with the respective modules modules.

Browsing modules

Payments and Plans

Purchasing a module

Establishing a Design System

With multiple designers working simultaneously on the project, a robust and flexible design system was necessary in maintaining consistency. Yuki took the lead in establishing the design system, communicating rules and expectations to the team, and monitoring the component library.

LEARNINGS

Divide and conquer

Our strategy for tackling the platform redesign was far from optimal. Early on, we asked the entire team to focus on a single screen at a time, and we expected to finalize important ones all together. The idea was that some screens serve as pillars to all others, and that tackling them individually would guarantee quality design that made consensus among us all. The problem there is we forgot to think of screens as part of a larger experience spanning sections or even platforms. We ended up taking a much longer time than expected. Later into the project, we switched strategy and assigned each designer to a userflow, giving ownership of the end-results while respecting a team-reviewing mechanism. 

Explore outside the persona

I just noticed that we interviewed only a single person under 36y, which explains why one of the recent feedback we got from the new website is that Francis, our hero section mascot, is looking 'old' to some web visitors. Although the client has specified he wanted the platform to appear to his primary user (retired men), we should have explored the needs of users outside the traditional userbase traits and imagined a platform of which the design is flexible enough to change and appeal to younger users.

The relevance of UI vs UX

Our UI designer was taking part in experience design exercices, while our UX designer also spent significant time on visual design. I believe that on small projects, it's better to differentiate between Senior vs Junior product designer, than to differentiate and hire based on UI vs UX expertise.

Leader M.I.A

At times, we were missing a clear sense of direction and ownership, due in part to a member quitting halfway through. Leaders should be designated early, bear the responsibilities of their role and should pause whatever they're working on to prioritize laying solid foundations and unblocking teammates.

--------

Updated January 12, 2020

We're leading a second round of user research in January 2021 to evaluate the impact of new designs and prioritize capabilities.