Ostinato

Music Education App

UI/ UX Case Study

4.10 Portfolio Preparation - Federico Privitera

UI Case Study
Ostinato
What’s Ostinato?

Competitive Analysis

User Flow

User Testing

UI Style Guide

Wireframes Overview

Mock-ups and Conclusions

What’s Ostinato?

200+ Verified Artists & Creators

Ostinato is an iOS and Android App which allows subscribers to access

music education classes led by industry-renowned teachers and also
gives access to official Studio recorded multi-tracks of the most famous
and renowned music artists in history.

Competitive Analysis SWOT ANALYSIS

Nebula is a subscription-based Education

App although is not focused on music
education a lot of musicians use it to post
music related content.

STRENGHTS

Established in the Music Education Communit

Effective Marketing Strategy and Sponsorships deal

The Subscription Service is not very expensive

WEAKNESSESS
The Content published by the creators is not exclusive and
gets posted outside the app after some tim

Gets lost Multiple apps have the same name making it

difficult to find it quickly on search engine

Multiple low reviews describing poor customer servic

Does not have the function to access original music

recordings

OPPORTUNITES
Creators could have a much more safe space in making
music education content involving copyrighted materia

Verified Artists could use the app to promote their new

releases and host classes involving new or old song

Exclusive licensing partnerships between Artists and the

App could be made

THREATS

Already established on the marke

Promotions are well present in Social Media and video-

sharing services

Subscriptions cost are low

Masterclass is a subscription-based Digital

Education App covering multiple topics such
as Cooking, Painting, Meditation, Acting and
Music Education.

STRENGHTS

Established in the Digital education fiel

Effective Marketing Strategy and Sponsorships deal

Industry-well known names in multiple topics are already

Masterclass’ partners

WEAKNESSESS

High subscription costs with limited offer

Limited community interaction with Creator
Does not have the function to access original music
recordings

OPPORTUNITES

Giving the users low subscriptions costs options

Having a strong User-centred app could create ground for

a flourishing community space.

THREATS

Already established on the marke

Strong Social Media presence

User Flows

Like and Comment Flow Chart

When accessing a Class, users can like, comment and consequently leave a Class Rating on a scale of 1 to 5.

Accessing Song Page With Backing Tracks Volume Sliders Management

While on the song page users can use volume sliders to set their desired volumes on each and every instrument of the song
currently playing.

Subscription Plan Payment

Content on the Ostinato App can only be accessed after subscribing to the App.

User Testing

User Testing

USER TEST FEEDBACK

One essential part of the Ostinato’s UI Design process was the useful user testing
on the Lo-Fi Wireframes in order to let the app positively evolve. Here are some
changes I made thanks to the user feedback.

Eman Said...
“The Subscription Artboard needs a more cohesive and defined structure, perhaps having a step-by-step process could make
the Subscription process easier and smoother. It might also be helpful to give a free alternative to first-time users exploring the
app and not feeling the need to sign up.”

... Here’s what I did!

paying close attention to the feedback received, I took care to do a complete re-design of the Subscription process, building a
much more intuitive and useful user-first exploration button and subscription process.

Armando Said...
(Wh l i e accessing the "Choose Your Interests" Artboard)

“a scroll bar next to the interests could make it "easier" and let the users understand that interests are a part of a scrollable
list..”

... Here’s what I did!

I actually found that adding a scroll bar near the tappable Interests could help users automatically identify a scroll gesture on
the interests list so I found it really useful to add it

Daniele Said...
“The wording "Library" and the presence of the heart-shaped icon on the navigation bar could be confusing maybe the term
Library is more loosely associated with browsing content in the app rather than a "favourites" section.”

... Here’s what I did!

Daniele was not the only one to point out the issue, Armando (while on a different user testing session) also expressed doubts
on the matter. I did change the wording “Library ” into “Favourites” in order to have a more standard and cohesive solution.

Oumou Said...
(On ht e "Select Your Interests" Page),

“I am not sure what the check and cross icons stand for, they ’re not really necessary as it’s almost implied that interest can be
selected and deselected with a tapping gesture”

... Here’s what I did!

By removing the checkmark and “X” icons thus adding a scroll bar on the side of interests the artboard appears now defined
and less busy with implied tap and scroll gestures.

UI Style Guide

UI Style Guide
After finalizing the basic navigation structure of the App I created a UI Stylesheet
with icons, typography and colours, providing a more accurate preview of how the
final product will appear and function.

UI Stylesheet HEX Colour Palette

Android Typography 7B38D1 PRIMARY

Roboto
FFB800 SECONDARY
00 B 2 FF TERTIARY
iOS Typography
San Francisco

Imagery

UI Elements - Miscellaneous

FOLLOWING

Max Luga

7. Wireframes Overview

Wireframes Overview
The app changed through the User Testing process and after applying the official
UI Style the app reached its final for. Here’s a quick recap on how the app looked
and how it looks now.

Sketches Lo-Fi Wireframes Hi-Fi Wireframes

Music Tab

Favourites Tab

Creator’s Tab

Mock-ups & Conclusions

Ostinato Could be a great choice

for Music learners, Artists and video creators.

Ostinato's mission is making music education a safe place for everyone,
taking care of its consumers while also respecting the music Industry.