top of page
builder crop cover.png
builder crop analysis.png
builder crop landing 3.png

BUILDER


UI, UX, and User Behavior Design

Project Type: Solo project.       Timeline: Nov 2021 - Dec 2021.       Tools: Figma, Adobe Premiere Pro

Skills: Background research, UI prototyping & UX design

Overview

BUILDER is a conceptual mobile application that motivates users to do bodybuilding, keep up with their training plan, and ultimately help them acquire their idealized body shape.

In this project, I would be studying about how to design a user behavior by developing an interactive figma prototype for this conceptual application.

Features
01. Scientific Analysis
The body scanning system will collect your body data. You will set up a goal and BUILDER will generate an analysis for your training.
02. Automated Schedule
BUILDER will create a training schedule based on your analysis. You can modify the schedule according to your preference.
03. Smart Reminder
BUILDER will remind you the events on the schedule, and you can make sure the the event is completed by checking the checkbox.
04. Expertise
Coaches in BUILDER share useful workout related videos, articles, and tips. No more confusion and pressure.
05. Community
BUILDER community will help you gain more passion to bodybuilding!
06. Awards
BUILDER is awarding hardworking users. Earn the prizes by completing your training plan!
Subject
"The modern working lifestyle has made many people lose their shape and health. "
My mission will be to provide a persuasive solution with a conceptual mobile application.
Overview
Features
Design
Subject
Research
​Research
To gain a thorough understanding of bodybuilding, I initially conducted secondary research. My focus was to establish a foundational knowledge of bodybuilding and muscle building. However, as I delved deeper, I recognized the existence of additional aspects to consider. Consequently, I compiled a list of topics that require further study.
  • Composition of muscles/basics of bodybuilding
  • Factors that may discourage inexperienced bodybuilders
  •  Names & positions of each muscle
  • Trainings & their corresponding muscles
  • Target audiences

I put all the information I collected into a MURAL work space.
I've rounded up with a few notable points from my researches. My findings suggest that a successful bodybuilding experience requires :
01. The right amount of calories intake
(The amount varies among different individuals.)
02. Adequate power training

(Starting from 20 minutes a day and increase over time)
03. Enough rest / sleep time

(At least 8 hours everyday)
04. A clear bodybuilding goal
 
05. Persistence
Survey
To fully understand people's concerns and perceptions of bodybuilding, I surveyed a total of 7 people on their views on bodybuilding with Google Form. 
7
participants
via Google Form
Here are the questions and responses of the survey: 
Through the survey, I drew these conclusions:
  • Most of the participants don't have much bodybuilding experience.
  • Most participants consider maintaining shape as a part of bodybuilding. 
  • Most of the participants agree that a virtual community would be helpful to their bodybuilding experience.
  • Participants all wanted to acquire their idealized shape instead of sculpting the most muscular body. 
  • Most of the participants think that bodybuilding is difficult because it is exhausting.
  • Most of the participants need help on arranging time.
  • Most of the participants consider the change in their physical appearance as their biggest reward.
  • Most of the participants are reluctant to build their bodies because they don't have knowledge related to the fitness field.
  • Most of the participants were discouraged by no obvious change in their physical appearance.
Insights

Since most interviewees may have a different image of their idealized shape and different needs during bodybuilding, I decided to move forward with the ideas below:

  • People's bodybuilding goal need to be personalized.
  • People need time management service.
  • My solution need to provide people scientific and persuasive training methods.
  • People need more bodybuilding related expertise to gain more confidence.
  • People with little bodybuilding experiences tend to overthink about bodybuilding.
  • My solution needs to create engagements for inexperienced users. 

Persona

Right after the research, I created a persona to represent the target audience of my solution. 

Ideation
Engineering Plans
Ideation

Inspiration

The body visualizer site inspired me the most during the ideation phase. This site can simulate a 3D body model according to the entered data. 

Screen Shot 2022-03-19 at 6.20.52 PM.png
The original Body Visualizer site: https://bodyvisualizer.com/

And I decided to create a feature that helps users to set up their personal bodybuilding goals. To better work with the body simulator idea, I decided to implement 'body scanner', a conceptual tool that collects user's body data into the application. This data collected by the body scanning tool will be used to generate a 3D body model for the user.

'Body Scanner'

Concept & Iteration

I used the body visualizer site and the feedback from the survey as a starting point and kept on expanding until I created a system of solutions which can theoretically provide everything (except for physical supplies & gears) a new bodybuilder needs and solve people's concerns in the survey.

Concept of the Solution
Flow of the System
User Journey Map
User Journey Map
Motivation & Gamification

I utilized Nir Eyal's Hook model, a framework for fostering customer habits and engagement, to develop a solution system. This model consists of four sequential phases: trigger, action, variable reward, and investment, each building upon the previous one.

The mobile app itself, along with its advertisements, serves as an external trigger. The survey revealed that a significant and captivating benefit of bodybuilding is the transformation in physical appearance, which becomes an internal trigger for individuals. Interested users proceed to take action by registering, body scanning, and completing personalized planning.




Upon reviewing the system, I identified a lack of variable rewards to motivate users. To address this, I enhanced the app's appeal by incorporating users' training progress and implementing a rewards system as a variable incentive for their actions. Users can earn prizes based on their progress, and these rewards continuously motivate them to invest more time in the app and their bodybuilding journey.

Hook model

Motivational features

Progress bar design

Progress bar design
User Flow

I then came up with a system of user flow for the prototype.

BUILDER User Flow

Design 
As I slowly approached to the end of this project, I started to create wireframes of the prototype based on my thoughts from the ideation phase.
Wireframe
A few example of the wireframes
Style
I am quite obsessed with a darker tone as a theme color in general. So, I chose a color palette that included dark colors like black and grey. After I made my decision on the colors, I began to put together a mood board that best represent 'professionalism' and 'strength.'
Mood board
Rather than creating a sharp and pointy impression, I chose a more rounded feeling as the general style for this application. Maybe it is for safety purposes, this is just how most bodybuilding gears and gymnasiums make me feel.
Icon Drafts
Final Draft
 Final Prototype
I continued putting together all the elements and finishing all the mockups on Figma. And here is the final result. 
"←" & "→" keys can also help you browse through the prototype
Reflection
​After accomplishing this project, I realized that creating an attraction for the users is more difficult than I expected. Even though adding a reward system may be a good way to motivate people, it still can't help change the fact that exercising makes people feel tired which may annoy partial users.

Looking back at the screens, I also noticed that there are still rooms for me to improve in terms of designing the mobile interface. I should focus more on the clarity over the amount of information. In the future, I would definitely spend more time on ma king and testing the screens.

Previous Project

Next Project

Prototype
Design
Reflection
bottom of page