Research

COMPETITIVE BENCHMARKING
To start off with, it was important to find out how similar apps looked and functioned. By researching existing products, I could gain valuable insights into the market, identify opportunities for differentiation and make sure that TuneClique stands out from the crowd. Competitive benchmarking included Strava, Yousician, Duolingo, Spotify, Modacity, Musescore and SimplyGuitar.

Key takeaways from this stage included:
• The importance of gamified learning, rewarding users with interactive animations and audio alerts.
• Using landscape orientation is a convention in music learning apps.
‍• Technical features like guitar tuners, recording, the ability to slow tracks down, metronomes and metrodrones would be essential but feature bloat might be a consideration at some point as a result.

USER PERSONAS
‍In terms of research, user personas were up next. The product owner had already helpfully drafted some potential user profiles so I fleshed three of these out further. These personas would help me:
• Empathise with the users. By creating user personas, I can put myself in the shoes of the target audience and understand how they think and feel.
• Identify user needs: This might help me to prioritise features and functionality in the app.
• Develop a more user-centered design: By keeping my user personas in mind throughout the design process, I can create a more user-centric app.

Information architecture

‍APP STRUCTURE
‍Before diving into wireframing, I wanted to figure out the overall structure of the app. What features would TuneClique have and where could they all be found?

A well-structured app should have a clear and intuitive navigation system that allows users to easily find the content they are looking for. In my visual, I included onboarding and the log in/create account process, following on into the home or feature hub page. From here, all of the features branch out, some leading to multiple pages, other to a single page. This diagram not only helped me visualise the app’s structure but also confirmed that I was on the same page as the product owner in terms of concept.

Wireframes

VISUAL SITE MAP
Taking the home screen and its side bar menu as the features hub, a detailed visual site map proved helpful at this point. Taking inspiration from London’s tube stations, I colour coded the different areas of the app structure to denote functionality — onboarding in aqua, log in/create account in blue, profile settings in red, etc.

‍INDIVIDUAL USER FLOWS
After looking at the project from this bird’s eye view, I then wanted to focus on more detailed user needs. Taking two of the user personas from above (Fionnuala the fiddler and Joe the jovial publican), I created wireframes of two user flows. By wireframing individual user flows, I could visualise how users will move through the app and identify any potential problems with the navigation.

To recap on Joe’s main goal, this was defined as:
• Create a lively, musical atmosphere in his pub, rewarding musicians with free food and drinks, ensuring consistent and high-quality sessions.

To recap on Fionnuala’s needs, these were:
• Exploring folk tunes, attending musical workshops, learning various instruments.
• Dive deep into the nuances of folk tunes and learn techniques from diverse Irish artists.

Both of these users would travel through the onboarding and log in/create account processes, with Joe also navigating the ‘community’ feature and Fionnuala using the ‘experiences’ and ‘record & practice’ features.

Design

BRANDING
TuneClique would need a logo for its high-fidelity prototype. I started by brainstorming, sketching out different ideas that incorporate elements like musical notes, sound waves and icons representing sharing or connectivity. I then experimented with different shapes, colours, and typography to find a combination that effectively represents the app's identity.

My final logo featured a clean, sans serif font with a slight modification on the ‘b’ and an icon that combines the letter ‘c’ with a musical note. A red/orange gradient was used in the icon. Red and orange are both warm colours that are associated with energy, excitement and passion.

MOOD BOARD
With an overall structure in place, it was time to start adding the visuals. By creating a mood board, I was hoping to communicate the overall feel of the project, generate creative ideas, provide a reference point, and capture the essence of the brand and the app's purpose. This can help to create a more user-friendly, visually appealing and emotionally resonant experience for everyone.

High-fidelity prototype

Details from my research that informed my designs included:
• Inspired by Yousician and SimplyGuitar, I opted for landscape orientation.
• Bright colours against dark backgrounds. All of the music shared this feature.
• Textures from real life, ie. soundwaves and close-up images of speakers. This would play into Jakob Nielsen’s second usability heuristic ‘Match Between the System and the Real World’.
• Using brightly coloured, 3D icons. Duolingo was my inspiration for this. In the final app, these would be animated.
• Use badges to reward achieving milestones. All of the music learning and fitness apps used this trick to keep users engaged and rewarded.

‍Scroll (horizontally) and click through my prototype’s various screens below. Not every page was completely built at this stage — the prototype was designed to be a proof-of-concept product. More user research would be needed before designing every page.

Key takeaways

I learnt a lot throughout the process of this project, both about gamefied learning and app design in general. My main takeaways included:
‍
• As we move into a more virtual world, interactive, gamified learning will become the norm. An important aspect of the finished TuneClique app would be the animations, alerts and audio clips used to engage users.
‍
• That flagging potential issues early on in the process is essential. Even at the competitive benchmarking phase, I was flagging the danger of feature bloat so that it wouldn’t come as a surprise further down the line.
‍
• Jumping into wireframing too quickly can be a mistake. After figuring out the general app structure, I moved straight into wireframing the entire app. This led to an overly complicated structure so I went back to individual user flows. In future, I intend to start smaller and then scale up.
‍
• The importance of considering user flows when designing interactions.
‍
• How to use user personas to inform design decisions. After drafting the three user personas, their individual needs were at the forefront of my mind while designing the screens so it helped make the prototype more user-centric.