Myguitare is a guitar learning platform for French speaking middle age adults, who are looking for practical lessons to reignite their passion for the instrument.
MyGuitare’s redesign was very much overdue. New features were built on top of temporary structures, and was chaotic. Their online guitar courses grew for their pedagogy and unique approach to teaching guitar online, but their outdated platform was a hindrance to their growth, deterring less tolerant users when faced with frustrating experiences.
To help users achieve their guitar dreams, and accelerate business growth, we set foot to redesign the platform for better learning experience.
As the design lead, I was responsible for the success of the platform redesign, from ideation to delivery. Beyond hands-on design work, I played a major role in mediating communication with client teams, facilitated internal team discussions.
Yuki Nishida, Design lead
Charlotte Chen, Product Designer
Leo Chazalon, Product Manager
Natalia Tarasova, UI/UX Designer
Abdellah Rholem, Branding
Nick Lighter, Project Coordinator
We began with understanding the context of the problem. Before we interviewed anyone, we outlined the objectives for our research.
We conducted 9 contextual interviews, 3 client discovery sessions, and 5 competitor platform audits.
We outlined three guiding questions for users...
We scheduled remote unstructured interviews with regular and power users to an open-ended conversation to probe for insights. As we approached our 9th user interview, we began to identify pattern in their response and gained confidence in moving on with our data.
Based on our findings, we created a target user to identify primary users and their needs. This target user would be referred to as Sébastien, which served as a reference for making design decisions and aligning internal discussions.
Top pain points were:
MyGuitare helps guitarists reach their goals. We interviewed our client team to find out their strengths and weaknesses of their offering to ensure their strengths are reflected on the platform.
This surfaced critical features for a successful platform:
We audited 5 competitor platforms to learn from industry standards, and identify unique advantage we may be able to achieve for users like Sébastien. Our insights are summarized below.
Our scope sets realistic expectations for all stakeholders and avoids planning for failure. We surfaced constraints and limitations early in the project to bring up for discussions and plan ahead. With our research synthesized, all stakeholders agreed on the following scope for our first deliverable. We believed that if we get the fundamental features right, the rest will follow.
Charlotte, Leo, and I began by drafting the IA, which then informed the userflows. For each flow, we iterated on wireframes, only then we moved on to created interactive prototypes.
We reorganized the information architecture based on a common pain point that it takes "too many clicks to get to where I want to go".
I took the lead in distilling each userflow down to its essence, and sketched wireframes to accommodate the actions. The goal was to optimize between minimizing the number of steps without over crowding any single page with too many options.
Because userflows are fundamental in the platform, each interactions that accommodates the flows were designed to be one of the most prominent in each screen.
Onboarding is many user's first impression so it's important. 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.
Course navigation include steps users take to progress through a course from one lesson to the next. Although this flow could be a simple click of a button, the challenge were to implement MyGuitare's pedagogy which requires users to meet two conditions before moving on to the next lesson. The two conditions are:
Our solution aims to provide just enough information to educate new users of the two conditions 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.
Having established the core activity as watching lesson videos, we needed to design the shortest path to pick up where users left off in a previous session.
As a solution, we introduced a dashboard menu with shortcuts to the previous lesson as the most prominent feature, eliminating the need to shuffle through all courses available. Since users often need to wait for the next lesson to become available, a quick route to the previous lesson would greatly reduce the number of clicks needed.
Some design considerations were...
How many "Previous lessons" should be displayed on the dashboard?
Two, we decided. Based on our data from average courses owned per account and interviewing users, majority of users juggle between one to three lessons at a time.
What other information would be useful on the dashboard?
Referring to the list of critical features for success in the research phase, we decided to include previous lessons, announcements, user statistics, and community posts.
With multiple designers working simultaneously on the project, a robust and flexible design system was necessary in maintaining consistency. I took the lead in establishing the design system, communicating rules and expectations to the team, and monitoring the component library.
We organized our component library using the atomic design system, categorizing atoms, molecules, and organisms. This system proved beneficial when designers can build new molecules using a collection of existing atoms, and new organisms with existing molecules.
Our handoff were challenging. We had to deliver design assets to client's development team across time zones, language barriers, and with different collaborative expectations.
We prefer the hot potato process, a handoff process with frequent communications to unblock any issues, compared to a traditional waterfall process. Unfortunately, our team and the client's development team had different expectations. However, luckily, both parties were transparent and resolved any development issues in a timely manner.
*Metrics are being collected and analyzed. Stay tuned!
MyGuitare platform redesign was a large project to tackle. Defining core activities of the platform helped prioritize features to be developed, backlogged, or removed. Our solution gained all stakeholder buy-ins and we are confident in releasing to the public. My team looks forward to tracking the outcome of our redesign.
Below are some thoughts and insights I have developed during this project:
Half of the design skills is about connecting with people
It is evident that connecting with users is necessary to get the job done. However, connecting with your client, colleagues, and other stakeholders become as important to produce great work.
It is hard to distill design into its essence
It is really easy to get lost in the complex dependencies of each feature but distilling it into its essence requires deep understanding and engagement from designers. I believe this is what separates great designers from good designers.
Ask for relevant feedback from the right people
We created a list of backlogged features that were out of scope for this project. Two major features that are certainly on the priority list are based on insights from the competitive analysis.
Fun facts:
You are awesome for scrolling all the way through! I would love to get in touch with you, so please reach out via email!