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.
Link to client platform
Link to Figma design
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.
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.
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).
There are plenty of learning platforms out there for guitar enthusiast, the challenge lies in keeping a user motivated throughout their learning journey.
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.
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.
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).
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.
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:
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.
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:
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.
Based on the research showing users were experiencing painpoints at crucial moments during the learning and buying experience, among others.
A design system that aligns with the new brand identity we crafted.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.