Girl Running

RUNET

An application designed for joggers who love listening to music while doing sport.

/ UX Research, Product Design, Mobile Design

Design Question

How should music recommendation work for joggers in order to enhance both efficiency and spirits?

My Solution

Duration

RUNET , combined of "Running" and "Planet", is a mobile application recommending music for joggers based on several data sources, such as users' preference for music, real-time exercise data, state of the body...

 

With emphasis laid upon a harmonious synthesis of running and music, the interface design uses the element "Planet" to visualize a rotating music disk. It serves as a fueling station to pep you up while running and a platform to find someone sharing the same taste and hobby with you.

My Role

UX Researcher + UX Designer + UI Designer

Tools

Pencil & Paper, Sketch

Date

June - Aug. 2017

 

// 00

Design process

Brainstorming

Build up as many connections between Running and Music as possible

Persona

Uncover pain points and define possible scenarios

Animation Effect

Interactive motion and gestures

Mar.

Apr.

May

Jun.

Planning

Find the problem and set project goal

Research

Analyze different running apps and music apps 

Initial Prototyping

Prototype ideas

 

// 01

Introduce the background

Where did the story begin...

Running is an indispensable part of my life. As a music lover, I even draw up my own "Running Music" list to energize myself, most of which are pop songs with a fast rhythm.

However, I gradually get bored with the same list. Songs recommended by others fit not always to my taste. Besides, every time I need to open 2 apps, one for running, the other for music, the switch between them could be annoying.

Then I came up with the idea to design an application recording your sports statistics as well as recommending favorable music. That's RUNET!

 

// 02

Research and brainstorm

During the first week, I gathered as much information as I can about the following question:

How to build the connection between jogging and music?

Literature Review

First, I read several research papers about the functional role of music while running and the possible influence of gestures during physical activities.

From ACM Digital Library: Paper 1, Paper2

From Online: Paper 3

Personal Experience

As a running lover who can not live without music, I added other correlative points from my own perspective and experience. I also interviewed some of my friends who have the same hobby as me and asked about their opinions.

My Focus in This Project

After having figured out all potential gateways to connect Running and Music, I decided to pay my attention to Function Design & Interface Design with the assumption of an advanced statistical analysis and algorithm program.

// 03

Inspect competitive products

In order to know more about the design principles of the existing Apps in related areas, I studied 5 Music Apps5 Jogging Apps and 3 integrated Apps who have the same ambition as me. I focused on the following 2 questions:

What are their respective highlights and deficiencies?

What are the similarities and differences between them?

Logos & Main Features

Xiami Music

(one of the most popular music app in China)

Douban FM & Luoo

(two music sharing platforms with different styles)

5 different running apps analyzed in: setting, theme color, interface style, exercise types and voice design

Detailed UI design analysis of one selected app Paodiao

Detailed user flow analysis of one selected app Paohaile

 

// 04

Understand users

The main user goals and a list of features were generated during the research stage. I created several types of users and each of them uncovers one characteristic in user behaviors and pain points, which should be problems I am seeking to resolve.

Persona

 

// 05

Identify design direction

Through brainstorming, synthesized research and persona, major problems emerged and the direction of design was determined. I was able to identify how to better organize the information and what visual approach to take when designing it.

 

// 06

Final outcome

Sitemap

Wireframe

Hi-Fi Prototype