Maple Waves

Design project inspired by J-pop music

Market research

Competitive analysis

User survey

Personas

Wireframes

Flow diagrams

High-fidelity UI

Prototype

Mini usability study

Accessibility evaluation

Where

Boston, Massachusetts

What

Native Mobile App (iOS)

Why

Portfolio Project

Role

Designer, Researcher

Market Research

The claim

The global online music streaming market size was valued at $12.8 million in 2019, and is estimated to reach $24.7 million by 2027, registering a CAGR of 9.8% from 2021 - 2027.

The problem

While major online music streaming platforms such as Spotify and Apple Music host many songs from all genres, it can still be difficult to find songs from more niche music genres.

Competitive analysis

I analyzed 3 of the most popular apps in the space - looking both at the music streaming experience and the negative app store comments to find patterns.

The good

All apps allow the users to search for songs by titles and genres. They all have a library that allow users to create custom playlists.

The bad

Users need to have a premium subscription to listen to songs ad-free (Spotify, SoundCloud) There is no way to use the app before registration (SoundCloud) The album is often missing tracks (Apple Music)

Problems from the comments

User survey

I conducted a quick survey among people who frequently use music streaming apps on Twitter.

What’s the most important factor you take into account choosing a music streaming app?

48 participants

Notable comments

Initial research shows

There is a growing need for an accessible and customizable service with a music selection from a variety of niche genres.

Personas

I created two personas based on two types of users of the app: The busy software engineer and the curious journalist

Time to start designing!

Once I went through all my research data, it was time to sketch out the first flows and the initial low-fidelity wireframes.

Flow Diagram

To outline all the necessary functionality I created a simple flow diagram of the main tasks the user can do. One of the flows is shown below. Fail state flows were also created, but are not shown due to space constraints.

Low-fidelity wireframes

Once the flow diagram was established, I started creating the low fidelity wireframes of the main flows.

High-fidelity UI Design

Once the initial flow was complete, I started by creating a couple of the main screens of the app. I started by defining the fonts and colors.

Color palette

Accent, primary, secondary, tertiary, background

Font

Ubuntu
Regular, Medium, Bold, Italic

AaBbCcDdEeFfGgHh

Elegant look & feel

The style was achieved by sparsely using photo-realistic maple leaves alongside 3D renders of the songs cover photos

48 high-fidelity designs were created

Including two different navigation patterns (a tab bar and a hamburger menu) that could be used for A/B testing in further design stages.

I also tested simple, black backgrounds on main screens, and a version with glassmorphism style backgrounds on registration and login screens to give the experience that elegant look & feel.

Alignment and grid

I picked an 8-point grid for the project and set the margins for within groups at 8 and 16 with margins between groups at 24, 32 and 48.

High-fidelity prototype

I connected my high fidelity designs into a clickable prototype. That will allow me to test the app on a first group of users.

The prototype can be live-previewed at: [Figma link]

Prototype validation

I validated my prototype with 4 users. Each were given a subset of the prototype dedicated to the discover, playlists and song detail views. I wanted to be sure users understand that there are more songs within categories, and that each product also has a dedicated page.

This was tested in person, where I introduced the user to the app and asked them questions. The questions were dedicated to finding out whether the discover and playlists tabs were easy enough to understand.

High fidelity prototype validation image

Study results

50% of users (2 out of 4) were overwhelmed with the graphics on the song detail page. They quickly understood how to listen to a song however they felt over stimulated once viewing the song detail page.

Prototype Update concept

Because of time constraints, I wasn’t able to run a second usability study on the updated prototype. However, I have updated it by giving users the option to toggle the song detail view with a “swap button” located on the song detail page.

Updated swap button / action to simplify the experience

Accessibility check

The app has been evaluated for contrast to match the AA standards of WCAG. In some cases I found that contrast can be improved.

Project summary

During the project, I managed to evaluate the market, do a quick user survey on Twitter, perform a mini usability study, create a set of low fidelity wireframes, connect them into a prototype and build them out to high-fidelity, beautiful UI designs. In the last checkup round I also did an extensive QA audit focusing on consistency and color contrast with regards to accessibility.

Maple Waves

Design project inspired by J-pop music

Market Research

Competitive analysis

Problems from the comments

User survey

What’s the most important factor you take into account choosing a music streaming app?

Notable comments

Personas

Flow Diagram

Low-fidelity wireframes

High-fidelity UI Design

48 high-fidelity designs were created

Alignment and grid

High-fidelity prototype

Prototype validation

Study results

Prototype Update concept

Accessibility check

Drop me a message