Tunesta

Designing a music app

Pen + Paper

Sketch

Adobe CC

Invision

Omnigraffle

My Role

Duration 2 Weeks

UI / UX DESIGNER

A music app for the jazz clarinet. It will be a music player and sheet music provider to encourage kids to discover more about jazz clarinet music with audio examples.

Project Guidelines & Wireframes
Tunesta - iPhone

OVERVIEW

"Tunesta" is a music app designed for the education and training of the jazz clarinet. It is a music player and sheet music provider combined and uses “gamification” and social techniques to encourage and engage kids to discover more about the jazz clarinet. The app  also includes audio examples.

design_heuristics.png

Tomplay

Visibility of Systems - clearly explains to the user what is happening and what they will be able to do on the app.

Regular Rhythm - Using image and text to create balance and rhythm.

Invariance - Icons show invariance. They are simplified versions of objects but are still easily recognizable.

Key Functions
Icons

"Tunesta" is a music app with a difference. It is an educational learning tool that challenges the sometimes, monotonous task of learning and education by adding a more interactive approach.

 

Some competitor analysis I conducted used apps such as “Yousician”, “Tomplay” and “Tonestro for Clarinet” as examples.

COMPETITOR ANALYSIS

Tomplay

Yousician

Help and Documentation - Popups to help you navigate through the app

Emphasis - Uses a bold colour contrast to emphasize what is hi-lighted

Emergence - Learning starts as one small task and leads off into more tasks to unlock and learn as you scroll down

Yousician

Tonestro - For Clarinet

Unity - Uses Bold complimentary colours throughout to differentiate and organizes each section to look the be sympathetic to each other.

Flexibility and Efficiency - Allows you to choose your own username and also what instrument to customize.

Similarity - makes sure to keep all sections looking the same and consistent to group them, while changing colour to hi-light the differences.

tonestro.png

KEY FUNCTIONS + DESIGN PATTERNS

DESIGN

Looking closely at the current apps out there for educational training, I began to create my mood board, fonts and iconography for the app.

Mood board
Fonts & Colours

LOW FIDELITY

After looking at the competition I decided to use some of their techniques and ideas and adapt them to my own app.

I made sure to have a login page for onboarding as well as having help and FAQs for anyone struggling with the app. 

 

I have clear navigational elements with text to make sure there is no confusion for the user. The icons and colours are simple and fun and are aimed to engage a young audience.

Low Fidelity

MID FIDELITY

After spending time researching and testing my app design pages, I began to build a mid fidelity version. I kept the designs fairly simple and made sure to add text where necessary for explanations.

mid_fidelity.png

FINAL APP DESIGN

Considering all the information and design requirements I had learned and gathered over this assignment I began to finalize my app design and included some iconography, symbols, colour and imagery. I made sure to keep looking at my examples and keep my colour palette and design simple, fun and clear.

high_fidelity.png

© 2019 by Adaliv Design.