top of page
Musicare_Cover.18.png

UI/UX CASE STUDY

Musicare

Musicare is a mobile application with step-by-step guides for basic maintenance, tuning, and information about musical instruments from all over the globe.

The integrated digital tuner and the ability to save to profile allow this pocket guide to grow with the user on every step of their musical journey.
Musicare_BG4s.png
Programs Used / 

Adobe XD

Illustrator

Photoshop

After Effects

Optimal Workshop

Google Slides

Google Forms

QQ Surveys

My Role /

Project Management
User Research
User Interviews

Usability Testing

Design Thinking
User Interface Design
Motion Design
Video Editing

Team / 

Jerry Qu

Platforms / 

iOS

Date / 

March 29th, 2021

Musicare-BG.png
The Problem
The lack of maintenance can lead to inaccurate sound performance, accumulative damage, and costly repairs.
Many adults aged 20 to 60 experience computer anxiety. Information is widely available on websites not optimized for mobile access.

Currently, no mobile app exists.
The Problem
Musicare-BG3.png
Project Parameters
These four elements make up the most significant design criteria.
iPhone 8, SE, X 
 

Designed for iOS 14

Accessibility
 

Large text, labeled icons, voice capabilities, and WCAG compliance. 

Discovery
 

Feature musical instruments from all over the globe.

One-Stop-Shop
 

Integrated tuner and repair shop locator.

Musicare_BG5.png
User Surveys & Interviews
Our main goal was to design a digital pocketbook to guide aspiring and professional musicians through their journeys. 
The first step was to understand more about our users.
56.50%
Has not experienced Computer Anxiety
Anxiety.png
43.50%
Has some form of Computer Anxiety
55.30%
Were taught by a teacher in-person
2.png
44.70%
Were self-taught by using online services
13.20%
Primarily use computers
3.png
86.8%
Primarily use smartphones
User Research
Musicare-BG3.png
How Might We . . .
. . . inform our users about the basic maintenance of musical instruments?
. . . help aspiring musicians explore new instruments and navigate their respective maintenance regimens?
Our Users Are . . .
. . . aspiring and professional musicians.
. . . older adults, some of whom have vision loss.
. . . adults who suffer from computer anxiety.
Musicare_BG5.png
Information Architecture
Through user interviews and by conducting an open card sort, we found our Most Viable Product (MVP) features.
Search | Discover | Instrument | Profile
IA Design
Musicare_BG5.png
Low Fidelity Sketches
Red routes were quickly visualized using hand-sketching.
Guerrilla testing using Marvel provided early validation before the design was made digital.
Sketch.jpg
Omit Sound Recognition
 

Keep Text & Voice Search

Discovery Opens
List of Instruments
 

Separate Dedicated Screen

Continents Cannot
Be Saved to Favorites
 

Only Individual Instruments

UI Design
Low Fidelity Wireframes
Wireframes are visual representations of a user interface used to help determine the positioning of elements on a page without color, images, graphics, or typography. 
Guerrilla testing via Zoom provided additional validation before the high fidelity design.
Musicare-Wireframes.png
Hi-Fi Design
Search
 

Expand search for features in addition to instruments.

Tutorial
 

Onboarding tutorials made accessible at all times.

A-Z
 

Organize instrument cards alphabetically.

Musicare_BG5.png
High Fidelity Design
ps_Musicare-Wireframes.gif
Colors
Brand Attributes: Nurturing | Sincere | Effortless | Caring
Yolk Yellow
#F3C623 | RGB 243 198 35
Grey Blue
#444A56 | RGB 29 29 34
Pure Purple
#8258FE | RGB 130 88 254
Burnt Blue
#22272B | RGB 34 39 43
Light Mode
Group 993.png
Dark Mode
Group 994.png
Musicare_BG6s.png
Animation
Launch
 

Loading Sequence

Onboarding
 

Three-Step Tutorial

Search
 

Voice Search

cover_musicare.gif
search_tutorial.gif
bottom of page