Justin Guitar
🎸

Justin Guitar

Tags
UX research
UX design
Year
2020

Overview

What I did

1.
Stakeholder interviews
2.
UX review and cognitive walkthrough
3.
Competitor analysis
4.
Web analytics
5.
Qualitative user survey with natural language processing (NLP)
6.
Usability testing and semi-structured user interviews
7.
Persona creation and customer journey mapping
8.
Insight report and roadmap workshop
9.
Information architecture
10.
Wireframes and UX design consultation
 

Tools

Google Analytics, Hotjar, Google Colaboratory, Lookback and Figma
 

Project summary

Justin Guitar is a successful coaching and teaching platform that has helped millions of people learn to play the guitar.
This project began as a research sprint focusing on understanding opportunities for improving retention and user experience within Justin's Grade 1 Beginner Guitar Course.
Justin was so happy with the outcomes of this sprint that he took us on for massive website re-design project, in which 3-in-1 websites were built: an online learning platform, a user dashboard with a practice assistant tool and an e-commerce site.
 

Research

Team members

Just me! 💁‍♀️
 

The challenge

In the initial research phase, my challenge was to determine where the drop off was occurring on the beginner course, what causes students to give up on the course and what can be done to increase student engagement and retention.
I conducted a comprehensive assessment of the Justin Guitar website, integrating qualitative and quantitative insights to expose key opportunities for improvement within the user journey.
 

Stakeholder interview

I interviewed key stakeholders to determine:
Value proposition benchmarks
A shared understanding of high level goals
A shared understanding of Phase 1 goals
An introduction to audience
Understanding of main competitors
 

UX review and cognitive walkthrough

I conducted a comprehensive usability review of Justin's website informed by Nielsen's heuristics, ISO’s 7 dialogue principles, Shniederman’s 8 golden rules of dialog design and Tog’s 16 principles of interaction design. I scored the site on value proposition, information architecture, tone and communication, visual design, usability and user control, credibility and search to help establish areas in most need of improvement.
 
Figure 1: A radar chart showing how justinguitar.com scored in value proposition (60%), IA & navigation (63%), tone and communication (64%), visual design (67%), usability and user control (63%), credibility (100%) and search (44%).
Figure 1: A radar chart showing how justinguitar.com scored in value proposition (60%), IA & navigation (63%), tone and communication (64%), visual design (67%), usability and user control (63%), credibility (100%) and search (44%).
I then worked through a task-based cognitive walkthrough, focusing on task within the beginner journey to establish key usability issues.
 

Competitor analysis

I conducted a competitor analysis on 4 key competitors to establish Justin's comparative strengths and weaknesses, as well as market gaps and opportunities for differentiation.
 
Figure 2: A screenshot of the Justin Guitar insight report. This page is an analysis of the FenderPlay user experience and breaks down the lesson structure, design patterns and navigational experience.
Figure 2: A screenshot of the Justin Guitar insight report. This page is an analysis of the FenderPlay user experience and breaks down the lesson structure, design patterns and navigational experience.
 

Web analytics

I analysed the analytics data from Google Analytics and Hotjar (heatmaps, scroll maps and visit recordings) to better understand user behaviour on the site.
The insights from this data gave me a quantitative overview of behaviour that I could then dig deeper into using qualitative methods.
 
Figure 3: A screenshot of the Justin Guitar insight report. This page has a line graph showing a decline in lesson page views that starts quite steeply between lessons 1 and 2 but steadies out a bit more by lesson 3. A box labelled with the title ‘Solution’ sits beside the graph and says that retention and engagement efforts should be focused on lessons 1 and 2, as this is where we see the most drop off.
Figure 3: A screenshot of the Justin Guitar insight report. This page has a line graph showing a decline in lesson page views that starts quite steeply between lessons 1 and 2 but steadies out a bit more by lesson 3. A box labelled with the title ‘Solution’ sits beside the graph and says that retention and engagement efforts should be focused on lessons 1 and 2, as this is where we see the most drop off.
 

Qualitative survey with NLP

I created a short Typeform survey with open ended questions that subscribers to Justin's newsletter were invited to complete.
An incredible 13,140 (not a typo 😳) people took part. I used machine learning and a natural language processing script to help me to analyse the breadth of responses, and used manual analysis for a few hundred responses to increase my confidence in the analysis results.
 

Usability testing and user interviews

I conducted 5 usability tests with a focus on the mobile experience, which the Google and Hotjar analytics data indicated had the biggest user experience issues. The usability tests focused on 3 primary tasks within the beginner journey on the site, and were followed up with semi structured interviews to allow me to explore the motivations and frustrations of Justin's users in depth.
I completed 5 additional user interviews to give me further insight to how Justin's students experience learning to play guitar.
 
Figure 4: A screenshot of the Justin Guitar insight report. This page highlights 4 motivations that guitar students interviewed have for continuing their learning. These motivators were: 1) seeing progress, 2) reassurance and Nitsuj, 3) playing with others and 3) having the guitar out. User quotes are provided for each motivation listed.
Figure 4: A screenshot of the Justin Guitar insight report. This page highlights 4 motivations that guitar students interviewed have for continuing their learning. These motivators were: 1) seeing progress, 2) reassurance and Nitsuj, 3) playing with others and 3) having the guitar out. User quotes are provided for each motivation listed.
 

Persona development and journey mapping

Based upon the culmination of my research, I developed 3 key personas and associated customer journey maps to highlight areas for improvement, opportunities existing within the user journeys and suggestions for change.
 
Figure 5: A screenshot of the Justin Guitar insight report. This page shows a customer journey map of the user persona Sunil Reddy, who is a time poor 29 year old software engineer from New York, USA that wants to learn guitar well enough to play with friends or at open mic nights. It shows the touch points, actions, thoughts and feelings that this persona might have while using justinguitar.com and highlights where there are opportunities for improvement.
Figure 5: A screenshot of the Justin Guitar insight report. This page shows a customer journey map of the user persona Sunil Reddy, who is a time poor 29 year old software engineer from New York, USA that wants to learn guitar well enough to play with friends or at open mic nights. It shows the touch points, actions, thoughts and feelings that this persona might have while using justinguitar.com and highlights where there are opportunities for improvement.
 
Figure 6: The next page in the Justin Guitar insight report. This page takes the opportunities identified in the previous customer journey map and turns them into actionable design and product solutions. The solutions include: 1) more differentiation between beginner courses, 2) improve My Practice Assistant, 3) make the song app desktop friendly, 4) synch the song app to the Grade 1 course and 5) more direction and guidance for people in Grade 1 consolidation.
Figure 6: The next page in the Justin Guitar insight report. This page takes the opportunities identified in the previous customer journey map and turns them into actionable design and product solutions. The solutions include: 1) more differentiation between beginner courses, 2) improve My Practice Assistant, 3) make the song app desktop friendly, 4) synch the song app to the Grade 1 course and 5) more direction and guidance for people in Grade 1 consolidation.
 
The project culminated in an in-depth insight report (parts of which you can see here) and a roadmapping workshop with Justin, where I explained the outcomes of my research and highlighted my design suggestions for improving the beginner experience.
 

Iteration and design

Team members

Cassandra Cardiff (UX design) and Barbara Buelen (UI design)
 

The challenge

After the success of this project, we were then commissioned to do a complete UX/UI re-design of  the Justin Guitar website. This was done over the course of 7 design sprints focusing on an online learning platform, a user dashboard with a built in practice assistant tool and an e-commerce site, with design variations for logged-in/logged-out users. The designs were deeply informed by the prior research sprint.
 
Figure 7: Roughly hand drawn wireframes showing ideas for a course overview page on a mobile device.
Figure 7: Roughly hand drawn wireframes showing ideas for a course overview page on a mobile device.
 

Courses

Sprints 1 and 2 focused on restructuring the courses to make sure they flowed intuitively, while also ensuring that the visual designs and search bar were encouraging and directing students to the right courses quickly and easily.
Since users previously struggled to find their position within their current course, we recommended developing the site to remember where logged in students left off and integrated fast links to current lessons in the user dashboard (sprint 4).
My research showed that users were struggling to use the search function on the website, so much so that they were using Google search to try to find specific content on the Justin Guitar website. We improved the search by adding faceted results, catering to all search types and organising the results in order by relevance to help users find what they need quickly.
 
Figure 8: A high fidelity mock-up of the new search page for justinguitar.com. Filters are shown as buttons on the top of the screen for type of resource with a more comprehensive drill down filter component on the left-hand side. Relevant results are shown as you type them and are displayed by category with the grade level for each clearly shown.
Figure 8: A high fidelity mock-up of the new search page for justinguitar.com. Filters are shown as buttons on the top of the screen for type of resource with a more comprehensive drill down filter component on the left-hand side. Relevant results are shown as you type them and are displayed by category with the grade level for each clearly shown.
 
During user interviews it transpired that although Justin's students knew of a colour graded system, very few of them knew the order of the colour grades or even which colour grade they were currently in. We re-designed the courses page by associating the colour bands with numbers to help students understand the order, and created a coloured circle around the profile pictures of logged in users to demonstrate their current grade.
 
Figure 9: A high fidelity mock-up of the new justinguitar.com website showing the list of courses available, which are organised by grade + colour and/or by guitar-related skill.
Figure 9: A high fidelity mock-up of the new justinguitar.com website showing the list of courses available, which are organised by grade + colour and/or by guitar-related skill.
 
As there are thousands of lessons on Justin Guitar, I created a high level, colour coded sitemap highlighting which templates should be used where to assist in developer hand off.
 
Figure 10: A colour-coded sitemap showing developers which templates should be used for which pages.
Figure 10: A colour-coded sitemap showing developers which templates should be used for which pages.
 

Songs

Sprint 3 focused on the song section of the site. To help users identify songs appropriate for their level quickly, we added the colour bands and grade levels to each song so users could see right away whether or not they'd be able to play them. We made adding song lessons to individual practice dashboards much easier by creating a button beside each song. Since Justin wanted to promote his song app, we created an indicator of which songs could be found there too.
 
Figure 11: A high fidelity mock-up of the new justinguitar.com website. This shows the new songs page, with a search bar and comprehensive filters on the lefthand side and populated results on the righthand side. The results show the grade number and colour for each song and allow the user to favourite them or add them to their practice assistant tools.
Figure 11: A high fidelity mock-up of the new justinguitar.com website. This shows the new songs page, with a search bar and comprehensive filters on the lefthand side and populated results on the righthand side. The results show the grade number and colour for each song and allow the user to favourite them or add them to their practice assistant tools.
 
We also designed a song request board to reduce the number of song requests Justin and his team deal with by email. Logged in users are able to vote for songs on this dynamic board, and are linked to the song page when they make a request that already exists on the site. My partner and I were welcoming home a new kitten, Franz, at the time we were working on this... hence the song names!
 
Figure 12: A high fidelity mock-up showing the proposed new song requests board for justinguitar.com. The top 10 requests are shown at the top - users can add their vote to these or submit their own song request. If the requested song is already on the website, a link to the song page is provided.
Figure 12: A high fidelity mock-up showing the proposed new song requests board for justinguitar.com. The top 10 requests are shown at the top - users can add their vote to these or submit their own song request. If the requested song is already on the website, a link to the song page is provided.
 

Practice assistant

My research showed that students that used Justin's practice methodology and/or tool found it hugely beneficial and cited it as a primary reason they hadn't given up learning to play guitar. Because of this, we knew that the practice assistant design was going to be one of the important parts in ensuring user enjoyment and retention on the site.
Sprint 4 was focused around the practice tool, which we completely revamped to ensure practice would be fun, easy to use and monitorable. Our tools allow students to create, share and download practice routines easily - all features that were previously non-existent and needed to be designed from scratch.
 
Figure 13: A high fidelity mock-up of the new Justin Guitar practice assistant tool. The tool can be found on the user’s dashboard. The particular page shown is called “My Practice Routines”, which allows users to download or create practice routines and sort them into folders.
Figure 13: A high fidelity mock-up of the new Justin Guitar practice assistant tool. The tool can be found on the user’s dashboard. The particular page shown is called “My Practice Routines”, which allows users to download or create practice routines and sort them into folders.
 
We also gamified the design to encourage students to practice more regularly and monitor their progress through an individual statistics platform.
 
Figure 14: A high fidelity mock-up of the new Justin Guitar practice assistant tool. This page can be found in the user dashboard and is titled ‘My Practice Stats’. It allows users to record key metrics such as chord changes per minute and see their data over time in a line chart.
Figure 14: A high fidelity mock-up of the new Justin Guitar practice assistant tool. This page can be found in the user dashboard and is titled ‘My Practice Stats’. It allows users to record key metrics such as chord changes per minute and see their data over time in a line chart.
 

Dashboard

In Sprint 5, we designed the user dashboard. These designs were informed by implicit cognition testing completed by our in-house data scientist to ensure user emotional response and engagement. We structured the user dashboard to be goal-driven to guide users in completing key tasks personalised to them on the website.
To encourage users to return to the site daily to practice, we added badges and XP points that are awarded through lesson completions, site actions (eg. adding a profile picture) and using the practice assistant tool. Phase 2 will include a leaderboard to further develop the gamification elements we created.
 
Figure 15: A high fidelity mock-up of the new Justin Guitar user dashboard default state, which allows users to see their progress, jump back into songs or lessons or they were learning, view what’s new on Justin Guitar, download the song app or donate to keep the lessons free for all learners.
Figure 15: A high fidelity mock-up of the new Justin Guitar user dashboard default state, which allows users to see their progress, jump back into songs or lessons or they were learning, view what’s new on Justin Guitar, download the song app or donate to keep the lessons free for all learners.
 

E-commerce and help centre

In Sprint 6, we re-designed the e-commerce site to make purchasing and accessing paid courses easier. We made the overall e-commerce area of the site more integrated to cross-sell other products the user might like based on their recent page views/purchases; integrated emotional design principles and donor psychology into the donate page to better share the Justin Guitar mission/impact and encourage donation; and created a help centre to reduce customer support emails and make finding the right contact easier for users where necessary.
 
Figure 16: A high fidelity mock-up showing the new help centre overview page for justinguitar.com. At the top of the page is the question “What do you need help with?” with buttons leading to the most common FAQ categories below. Then there are downloadable starter guides for courses, lessons and the user dashboard, followed by the most commonly asked questions which can be filtered by type.
Figure 16: A high fidelity mock-up showing the new help centre overview page for justinguitar.com. At the top of the page is the question “What do you need help with?” with buttons leading to the most common FAQ categories below. Then there are downloadable starter guides for courses, lessons and the user dashboard, followed by the most commonly asked questions which can be filtered by type.
 

Tools

Finally, in Sprint 7 we improved the user interface of key tools on the site, including the metronome, ear trainer game and resource downloads area.