Miaomiao

[Design Project]

Music Library

[Client] Storykit

[Role] UI Design Lead

[Time] Dec 2022 - Mar 2023

[Process]

Research →→ Design →→ Test →→ Deliver

[Process]

Research →→ Design →→ Test →→ Deliver

[Credits]

Shapour jahanshahi

Oksana Romaniuk

Emil Sivervik

Alexei

Marcus Nirbrant

[Credits]

Shapour jahanshahi

Oksana Romaniuk

Emil Sivervik

Alexei

Marcus Nirbrant

[2023 UPDATE]

"A music browser that accelerates music discovery and delivers just the right music for your videos."

Context

Storykit.io is an innovative AI-powered video creation SaaS application that empowers users to effortlessly produce high-quality video content for diverse purposes.

The platform is designed to assist marketing departments, organizations, and individuals in crafting compelling narratives that resonate with their audiences in a seamless and user-friendly manner.

Music is a key ingredient in making captivating and effective videos. At Storykit, the aim is to provide users with great music choices while making the process of finding the right music faster and easier. Mia was responsible for designing a Music Library to achieve this goal.

Storykit.io ↗

Context

Storykit.io is an innovative AI-powered video creation SaaS application that empowers users to effortlessly produce high-quality video content for diverse purposes.

The platform is designed to assist marketing departments, organizations, and individuals in crafting compelling narratives that resonate with their audiences in a seamless and user-friendly manner.

Storykit.io ↗

Problem

Previous music browser

The previous music browser (left image) offered limited music choices, impacting the quality of video creation.

Our objectives included:

• Revamping the music browser to expedite music discovery ∆∆

• Motivating freemium users to transition to premium subscriptions ∆

• Elevating the brand's visual identity through UI design ∆

Design

In my design process, particularly for my client Storykit, I followed these 8 steps:

Roundtable Discussion: Collaborated with the Product Manager, Tech Lead, front-end and back-end development teams, and the QA manager to get a holistic picture from various perspectives. Importantly, prioritised the core goals to accomplish.
Research: Conducted research on Storykit's user segments, current music browsers in the market, and music provider storyblocks.com to gather knowledge.
Design Solution: Brainstormed solutions for prioritized requirements and issues, creating quick sketches and user flows to test these solutions.
Prototyping: Developed hi-fi prototypes to visualize the solutions, showcasing user flows and interactions.

Team Feedback: Before user testing, I shared the prototypes with the team to gather different insights and ensure alignment with technical requirements and limitations. For example, we had to prevent direct music downloads from the console while ensure a good preview experience.
User Testing: Conducted Guerrilla tests with 5 users from Netlight to validate design hypotheses and gather nonverbal feedback.
Design Refinement: Based on testing results and users' verbal and nonverbal inputs, I refined design solutions, strategies, and UI.
Delivery & Parallel Issue Resolution: Once we had confidence in the refined design, the development team began implementing it. We simultaneously addressed minor issues related to interactions, technical constraints, brand guidelines, and kept polishing.

Key Questions

Who is our target audience for design?

What challenges are we addressing?

Why are we addressing these challenges, and what are the potential values and risks?

How will we tackle these challenges?

Accessible to all

users

Freemium users

Starter users

Standard users

Limited access to premium music tracks

Enterprise users

Full access to premium music tracks

Premium View

Premium music library

Full access to all premium music tracks

Freemium View

Premium music library

Limited access to premium music tracks

Premium View

Team Library

Access to upload

Effortlessly Find the Perfect Music:

Discover the most suitable music quickly using keyword search and efficient filtering.

Intuitive Feedback System:

Enjoy a user-friendly system with intuitive feedback.

Upgrade Seamlessly:

Attract freemium music library users to upgrade their subscriptions with a clear and fast call-to-action (CTA).

Unified Experience and Strong Brand Identity:

Deliver a cohesive user experience while strengthening your brand identity.

Key strategy

The search form & Filtering options

Loading design

to enhance smooth experience while waiting for music rendering

Setting starting point

To help users quickly target the perfect starting point for their videos

Marketing Banner

In the previous design, Storykit's brand identity was not integrated into the product UI, resulting in a lack of brand cohesion.

I spearheaded the creation of Storykit banners within the music library for several essential purposes:

To strengthen Storykit's brand identity within the app and maintain brand cohesion.

To inform users about the 27,000 additional audio tracks available upon upgrading their subscription.

To offer users a convenient and streamlined pathway to complete the subscription upgrade process.

Current design

Previous design

Design

In my design process, particularly for my client Storykit, I followed these 8 steps:

Roundtable Discussion: Collaborated with the Product Manager, Tech Lead, front-end and back-end development teams, and the QA manager to get a holistic picture from various perspectives. Importantly, prioritised the core goals to accomplish.
Research: Conducted research on Storykit's user segments, current music browsers in the market, and music provider storyblocks.com to gather knowledge.
Design Solution: Brainstormed solutions for prioritized requirements and issues, creating quick sketches and user flows to test these solutions.
Prototyping: Developed hi-fi prototypes to visualize the solutions, showcasing user flows and interactions.

Team Feedback: Before user testing, I shared the prototypes with the team to gather different insights and ensure alignment with technical requirements and limitations. For example, we had to prevent direct music downloads from the console while ensure a good preview experience.
User Testing: Conducted Guerrilla tests with 5 users from Netlight to validate design hypotheses and gather nonverbal feedback.
Design Refinement: Based on testing results and users' verbal and nonverbal inputs, I refined design solutions, strategies, and UI.
Delivery & Parallel Issue Resolution: Once we had confidence in the refined design, the development team began implementing it. We simultaneously addressed minor issues related to interactions, technical constraints, brand guidelines, and kept polishing.

Key Questions

Who is our target audience for design?

What challenges are we addressing?

Why are we addressing these challenges, and what are the potential values and risks?

How will we tackle these challenges?

Accessible to all

users

Freemium users

Starter users

Standard users

Limited access to premium music tracks

Enterprise users

Full access to premium music tracks

Premium View

Premium music library

Full access to all premium music tracks

Freemium View

Premium music library

Limited access to premium music tracks

Premium View

Team Library

Access to upload

Effortlessly Find the Perfect Music:

Discover the most suitable music quickly using keyword search and efficient filtering.

Intuitive Feedback System:

Enjoy a user-friendly system with intuitive feedback.

Upgrade Seamlessly:

Attract freemium music library users to upgrade their subscriptions with a clear and fast call-to-action (CTA).

Unified Experience and Strong Brand Identity:

Deliver a cohesive user experience while strengthening your brand identity.

Key strategy

The search form & Filtering options

Loading design

to enhance smooth experience while waiting for music rendering

Setting starting point

To help users quickly target the perfect starting point for their videos

Marketing Banner

In the previous design, Storykit's brand identity was not integrated into the product UI, resulting in a lack of brand cohesion.

I spearheaded the creation of Storykit banners within the music library for several essential purposes:

To strengthen Storykit's brand identity within the app and maintain brand cohesion.

To inform users about the 27,000 additional audio tracks available upon upgrading their subscription.

To offer users a convenient and streamlined pathway to complete the subscription upgrade process.

Current design

Previous design

Impacts

This feature has been rolled out to Storykit users globally, and we've been meticulously monitoring user data and collecting feedback from real users.

To gauge the effectiveness of our design hypothesis and its real-world performance, we established several key performance indicators (KPIs):

• The average time saved when users find a suitable music track for their videos.

• The number of new upgraded users on a weekly basis.

Regarding our goal of infusing the brand's personality into the UI design, our measure of success was whether users found the transition to the new music library seamless. As one user aptly put it,

'This is very Storykit!'

Here are the results:

• Users saved an average of 4 minutes when discovering a suitable music track using the new music library. (The time savings were substantial, given that users previously had to source music from external websites and upload it to the old music browser).

• Within just 2 days of the initial launch, we achieved 14 new upgrades, and all of them were directly attributed to the marketing banner."

◀ Go back to main page