MyGuitare Brand

Deliverables

Link to client website

Link to Figma design

‍

Problem

MyGuitare had been focusing on growth, leaving the website and 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.

Solution

Create a brand identity that inspires life-long dreamers to actually learn to play guitar. This project is part of a larger mission that also includes the redesign of MyGuitare's learning platform. This case-study will specifically focus on branding and website design. 

Role

As a product designer and owner, I led several design efforts (including art direction, hands-on design, managing day-to-day deliverables) and facilitated web 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

• Abdellah Rholem, Branding
• Yuki Nishida, Art Direction
• Pablo Marin, Motion
• Str8up Digital, Dev & Motion
• Leo Chazalon, Design Lead / Product Owner

BRAND IDENTITY

Scope

The objective is to design an identity that makes guitarists feel like they belong to a tight knit community, and to create a visual language that is familiar to them. 

You can view all of our research and preliminary design exercises below, including stylescapes and drafts:

‍

Logo

The former logo served as a great starting point for our brand discussion since it combined several key elements to MyGuitare's mission: guitars, a computer mouse and a jack plug. However, they were all crammed into this small frame making it very hard for users to notice the symbolic subtleties of it. 

In the new logo, @Abdellah managed to combine all three former elements in a single shape, while remaining meaningful and simple:

• the guitar (through the guitar pick)
• the computer mouse
• the audio jack cable (as the mouse scroll)

The symbol is visual representation of the merging of guitar learning and online education, which are two realms that MyGuitare brings together unlike any other platform. The new logo is also more flexible in its use since it combines a symbol and a wordmark. 

‍

Visual Language

Since guitar has many different genres, we created a visual language so that we could categorize courses based on their looks and create some consistency across MyGuitare channels (youtube previews, songs, courses, modules...). 

Since all guitar players have to focus on a genre at some point in their learning journey, we wanted to use these patterns to create communities around each of them. For example, fans of metal music certainly share some characteristics in common; it could be sharing a philosophy to life or even having experienced the same era in history. 

‍

Illustration & Motion

We wanted to create a playful brand identity that combined real and abstract, humans and their digital doubles, entertainment and progress. 

Animated illustration felt like the perfect means for conveying that constant duality, and so we made collages of the founders with 'virtual' guitars surrounded by the music genres represented through their pattern. We managed to create a sense of 'universality' and 'familiarity' among all users, no matter which exact guitar model you played, or the music genre you listened to. 

It's also important to note that MyGuitare's userbase is mostly retired French men above that age of 45. Collage illustrations fit right in between pure photography (which doesn't put the accent on the digital aspect of learning) and entirely digital illustrations (which lack a human feel). 

You can view all illustrations on the live MyGuitare website.

‍

WEBSITE

Below, I will talk about aspects of designing the website that I found either particularly challenging, or simply marking within my learning journey.

You can view the live website in all its beauty here.

‍

Organizing Courses

To understand the role of courses on the website and what they are made of, we have to go back to the research we gathered for the platform. 

It showed users were 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.

Streamlining Onboarding

New users usually come from social media ads that redirect to landing pages promoting a beginner's course. However, many expressed feeling lost and unsure whether that course was really meant for them. It's pretty understandable since the old onboarding journey was for from being personal; users were caught in the large fishnet of an ad that targeted 'beginners', they weren't asked about previous guitar experience or the music genre they're most interested in learning. As a result, users lacked confidence in the choice of course they were offered.

The new user journey we designed is intended to rely heavily on a short buzzfeed-like quiz. The quiz, accessible from both the website and the platform, takes the user through a series of questions to suggest personalised course recommendations based on guitar experience and music preferences.

You can also check via this case-study how the new onboarding integrates with the platform and how it streamlines the sign-up experience for new users. 

‍

Becoming a learning center

MyGuitare's blog has been central to its growth. It offers in-depth knowledge for beginners at guitar, recommends certain musical equipment, answers common questions, features influential artists and most important of all, funnels readers towards its own platform courses. 

To say that the old blog IA was confusing is an understatement. The homepage pointed to all directions, navigation was overcomplicated, reading felt unpleasant, and the way articles cross-referenced each other halfway through an article was annoying.

We spent a lot of time rethinking content organization and decided to create 2 types of blog articles: Superguides and not Superguides. Each superguide addresses a major area of guitar learning, and contains chapters. Superguides are like courses, but you don't have to sign-up to the platform to read them. They give you almost all the material you need to master guitar, but only if you are an extremely self-motivated learner. Otherwise, you'll get redirected towards one of MyGuitare's free courses.

LEARNINGS

Write your case-study early
I have bad memory, and so after a year I forgot many of the intricacies of this project. I should have started writing the case-study for it while working on MyGuitare. It would have probably helped me reflect on the progress at more consistent intervals and take a step back when we were steering in the wrong direction. 

‍

--------

Updated January 16, 2020

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