Tuka-Home.jpg

Tuka

OVERVIEW

Tuka seeks to unify creative formats through one platform in order to maximize the network value that users create. For this project we focused on music aspect of Tuka to create a MVP which is a digital music platform for sharing and marketing creative content. Tuka seeks to capture the underserved markets of independent, unknown, developing artists to connect with their audience and promote their music.

Tuka-Icons-1.png

Team

Maryam Habibi, Rachel Deutsch, Boris Todtenhaupt,

Role

UX Designer, UI Lead, Research,

Digital Wireframing, Interviews

Project Focus

Designing a music platform

Platform

Web/Desktop

The Challenge

In the beginning we did not have a clear path to follow. We started working with a website that only had the vision for Tuka. There was no other platform that allowed creators to share their artistic content directly with consumers. Existing solutions isolate the creator from their fan-networks. Designing a platform that blends new technology seamlessly.

Duration

Three Weeks 

Tools

Real Time Board, Sketch, InVision, Adobe Illustrator, Whiteboard

The Solution

Design an easy to use music platform for artists that bring together the elements of social networking and promotion of their content.

PROCESS

Ideation.png

Synthesis

Research.png

Research

Design.png

Iterative Design

Synthesis.png

Ideation

 

RESEARCH

Meet with Client

Meet with Client, Michael Harrington to discuss his vision for Tuka and understand his main goal for this project. Michael wanted to us to focus on creating an MVP for Tuka music platform.

Here are some of the original ideas that Michael shared with us for Tuka platform.

Tuka-1.jpg
tuka-browser.jpg

C&C Analysis

We started our research by comparative and competitive analysis of features that the potential competitive website has. C&C analysis is  to understand opportunities, standards and threats for Tuka’s current vision of the platform. Here are some of the key findings.

  • Every platform has a statistics section for the artist and through our interviews a lot of people wanted to see statistics in their page.

  • Buy track was something most platforms have and it is essential to Tuka’s goal.

  • Using word cloud concept was not very familiar to people.

  • Adding hashtags was something that makes Tuka unique and people are familiar with it.

Ten User Interviews

 

We conducted 10 user interviews of existing artists who would like to use a platform that can help them promote their music and connect with their audience. We wanted to get some insights from our users to understand their pain points and goals.

“My music is getting lost in this ocean”

SYNTHESIS

Affinity Mapping

After our interviews we applied affinity mapping method to the large amount of data that we gathered. We started by writing  all the insights on sticky notes to identify overarching trends and patterns. Here are some of the key findings.

AffinityMap.jpg

Persona

These key findings from our affinity mapping combined with our insights from our user research,  we developed our persona, Jake who is an artist that plays in a band and would like to use an easy music platform to market his new album and connect with his audience.

Scenario

After months of hard work, Jake finally finished making his first album with his new band. With the summer festival season approaching fast, he hopes they can book some last minute shows and increase his band’s fan base in the process.

Problem Statement

Jake worries that their album will get lost in the shuffle on regular streaming sites. He is uncomfortable with the idea of approaching strangers in person and he is already over budget due to the high production cost of their album.

How might we create a cost-efficient, user-driven platform that enables artists like Jake to monetize their work while being able to grow their audience?

 
Tuka-Persona.jpg

IDEATION

Feature Longlist

We created a list of possible features that we can have in the platform.

MoSCoW Method

We applied MoSCow method to categorize these features and rate them through four categories, Must Have, Should Have, Could Have and Won’t  Have.

FeaturePrioritization-MoSCoW.jpg

User Flow

We developed two different user flows, one for the artist to sign up and create an account in Tuka, and another one for uploading a snippet to share.

User Flow.png

Design Studio

We did Design studio to combine our ideas and critique it within a short period of time. We collaborated to come up with a final design for each page of our website.  

Design-Studio_edited.jpg

Logo Redesign

I redesigned Tuka's logo based upon feedback that we got from our users. They wanted to see a logo with more vibrant colors and a user friendly design, similar to Spotify, Soundcloud, and iTunes.

Logo Redesign.jpg

Low Fidelity Wireframing

We started digitizing our sketches from Design Studio to low fidelity wireframing.

Early-Wireframes.jpg
 

Paper Prototype

We had two usability tests completed on paper prototyping by printing our low fidelity before starting our medium fidelity wireframing. We made changes based off of the feedback that we got. Here are some of our key findings.

  • Information about Tuka on top of the page

  • Adding more pages to show the concept of search by hashtags

Paper-Prototyping_edited.jpg
  • Artists should be able to select their snippets in the platform

  • Add more hashtags to upload song section

  • Form fields need more fine-tuning to clarify them

  • Have a link and share button for snippets

  • Users have a hard time finding sign up icon

  • Clear call to action to upload snippet

  • Show following and followers in profile page

Home-Full.jpg
Profile Artist Account New.jpg
Profile-Full.jpg

Here is our clickable prototype

In this stage we tried to finalize high fidelity wireframing by adding color and text style to our design in preparation for our prototype. I came up with a style guide to use throughout our high fidelity stage.

ITERATIVE DESIGN

Usability Testing

We conducted 5 more usability test at different stages of our digital wireframing and after that we made more changes based on the feedback we got from our usability tests to finalize our high fidelity wireframing. Here are some of our key findings.

Hi Fidelity Wireframing

 

NEXT STEPS

  • Flesh out the navigation menu pages such as “Feed”, “About”, “Contact Us” and “Help”

  • Design the Download section on the artists page

  • Define the Payment mechanism

  • Create further logo iterations for other media type of Tuka

  • Define the connection between the different user profiles

  • Add Curator and Consumer screens & forms