Transbeat

App

Finding motivations to exercise is becoming the biggest obstacle for current-day people. TransBeat is a fitness app that discovers the rhythm in movement through music, in order to make people stay enjoyed and motivated in delightful workouts.

02/21-04/21

Role:

UX research

Style Guide

Wireframe

Prototype

User Testing

​

​

cover 网站.png
1.png

With many workout apps in the market focusing on intensity and fitness level, repetitive moves make exercising boring over time. Rhythmic exercise itself isn't dull, the problem is how to refresh the experience to make people focus on enjoying the process more.

transbeat problem.png

Problems

​Lack of motivation to persist in long, rhythmic exercises

Opportunity

According to research, music helps to capture attention, increase work output and encourage rhythmic movement.

Selecting the most effective workout music that matches user’s exercise rhythms could help with attention focus and elicit a positive mood.

research 1.png
research 2.png
interview.png

Insights

1. Users want to find the right music that matches their cadence.

2. Listening to music according to user's preference help to boost performance.

Target audience

1. People looking to elevate their exercising experience to a more enjoyable, motivational one 

2. People who are not exercising enough but wish to stay active

persona transbeat.png

How might we make exercises more energetic and enjoyable that motivate people to stay active?

Define design goal

Motivate people to stay active and experience the inherent pleasantness of exercises 

Solution

An app that creates matching music rhythm to user's workout movement and tempo, which allows people to listen to, share, and enjoy the result of their exercises

case 1.png

1. Sign up and choose favorite genres of music

case 2.png

2. Set exercise goals for the day

case3.png
case3.png

3. Begin workout

Group 829.png
case 4.png

4. Review unique beats created from workout

case 5.png

5. Share music on social and review past results

site structure-25.png

Site structure and wireframe

wireframe structure.png

Testing

I did usability testings throughout the process of paper prototyping and low-fi digital prototyping, and more visual testings in the high-fi prototyping stage. Testings helped me to focus on product features and information hierarchy, if users could complete tasks effectively, and learn about their overall feelings of the app.

Paper prototyping

  • Information on the interface feels overwhelming, users want to see the main functions straightaway

  • Music visualization doesn't feel quite dynamic yet, doesn't get the "fun" aspect

testing 2.png
test 3.png
test 2.png

Digital prototyping

test 4.png
wireframe structure.png

  • Conduct visual research, inspired by aesthetic of dancing games like Dance Dance Revolution, re-establish a fun, game-like setting 

  • Declutter interface to focus on only one element

  • Simplify steps for user to get to the main exercising interface faster

Improvements:

Visual design

styel guide-10.png
logo.png
icpm set-09.png

Evaluation

WIN

NEXT STEP

  • Users feel more motivated and energized after testings.

  • Product meets user expectations 

  • Unique mental model set up

  • Differentiate from competitors

  • Test with Apple Watch 

  • Test user flow in a real scenario (find runners in actions)

PREVIOUS PROJECT
PREVIOUS PROJECT