Case Study: 30/60
30/60
30/60 is an application created for a school assignment at Emily Carr University.
This application supplements independent physical activity by simplifying core features that are necessary to working out while bringing extra enjoyment to users. Its energetic timer interface is made for fun HIIT (High Intensity Interval Training) and circuit training.
See a working version here:
What is HIIT?
Circuit training and HIIT (High intensity interval training) are short sets of intense exercise followed by quick rests. This allows increased intensity of workouts, increases fat burn, endurance, and overall fitness in a short time.
The challenge of HIIT is keeping up with timed intervals while breaking a sweat.
The Team
We are three students from Emily Carr University studying Interaction Design. During our course on mobile application development, we worked together to develop an application from ideation to launch.
Our group consisted of 3 members:
Mel the UI and branding designer, Jenn development and project manager, and myself, Sarah, the UX designer.
Process

Research
Ideation: The Problem
When you’re a busy young adult, working towards other goals, finding time to work out is hard! It is easier to sit on the couch than head to the gym. Celebrity presence and accompanying #fitspo have a strong influence in social media, this results in more people taking charge and struggling with their health and activity levels — both in the name of vanity and health awareness.
Many companies and fitness experts use this niche to profit through subscription based applications or paid guides. But pre-planned workouts are difficult to adhere to, can be expensive, and without determination, motivation card be hard to find.
The Goal
We want to give independence back to the user by designing an application that supports planned and spontaneous physical activity — all while encouraging a positive experience.
Current applications have a lot of features, but complicated interfaces distract users from achieving their fitness ambitions. We knew we needed to enhance the traditional workout application by scaling it back to a simple state.
Assigning Roles
We used card sorting to flush out the tasks necessary to achieve our goal and sorted them to manage our workload and prevent overlap. First we brain dumped all the tasks we could think of, simplified them, and then organized them into roles seen below:


As designers with unique backgrounds and different understandings of UX design, our application idea was initially based off of assumptions on functionality and intuitiveness.
(left) We wanted to place importance on user testing to ensure the development started from a point that makes sense for real users.
Journey Map
The Audience
We determined our user personas by interviewing physically-active individuals in our program. Through interviews we discovered two different types of users with the same goal but are distinct:
- A user that is independent in their workout plan.
- A user that adheres to a set plan for guidance.
We then developed two user personas:
- Melody W., 22, “Working out at home works best for my busy schedule.”

Melody is a busy student that fits physical-exercise into her schedule by working out at home. She isn’t determined to complete her workouts and lack of a set plan or timer means she changes her workout on the fly; sometimes she decides to stop her workout early. Finishing her workout is dependent on the amount of motivation she has that day.
2. Stella R., 25, Uses an application for guidance.

Stella has a full-time job. She attends a popular gym and has to share the space with other members. She uses a paid subscription workout application that promises 30 minute work-outs. In a busy gym, it is difficult to adhere exactly to the work-out plan. This increases Stella’s stress about having enough time. Stella feels like she isn’t getting the value out of her application. She wants the guidance but doesn’t have an alternative.
Observation
Distinct pain points for each user helped ideate potential features for our app. We created a value proposition canvas to identify these opportunities:
Value Proposition Canvas
Identifying User Needs via Pains, Gains, and Tasks

Observations
We discovered that all the pains, gains, and tasks of the user personas can be countered and supported by simple features that improve overall ease and enjoyability of physical-activity.
An additional problem arose out of our observations. We recognized that uncontrollable factors such as lack of time or mood cannot be easily countered. Our next question was what feature will combat this issue?
New Goal: We decided to target positive associations with exercising to ensure the improvement of experiences.
Expectation: Motivation and enthusiasm for physical activity will increase with a fun application.
Solutions
The value proposition canvas helped generate four significant obstacles that users face and the combating key features our product should focus on.

User Flow
By ideating the necessary features, we were able to quickly create a user flow containing the necessary screens and actions. This clarified all the actions a user might take in their journey through the application.

Lo-Fi Prototype
Multiple iterations of each screen were created before resulting in the chosen lo-fi prototype below.
Obstacle: Jenn’s development knowledge was crucial to account for feasibility. Mel and I are less familiar with coding and required a reference to ensure our ideation was possible. Jenn was able to direct our project down a path that future proofed our application ideas.

User Testing / Feedback / Reiteration


(Left) The user testing with our paper prototype validated our assumptions about basic flow. We discovered a lack of an ending screen needed to create a sense of completion to the user.
(Right) This is the new screen now placed at the end of the site flow.
Branding
We wanted to create a sense of vibrancy and simplicity. We chose an easy to read sans-serif font and a bright colour scheme to match the energy of the application.
The Name
We named our application 30/60 because of the common time second intervals users typically choose when doing HIIT or circuit training.

Style Tile
Proxima Nova is a modern typeface with a friendly, geometric appearance. The evenness in proportions and various weights make text legible, easy to navigate, and work well with an application that has few blocks of text.
The colour scheme uses saturated coral as a main hue. The deep blue color acts as a grounding contrast.
The use of a single font and main colour throughout the application creates a cohesive, consistent, and visually stimulating experience for the user.
Visual Design
Hi-Fi Mockup Iterations
We created high fidelity mockups for each screen and critiqued them individually. Providing feedback while referring to our goals helped focus on the purpose and best iteration for each screen.
1. Visual Hierarchy

Before: Timer countdown as a focal point.
After: Rearranged screen for GIFs to be focal point. The movement of the GIFs grabs the attention of the user’s eye and distracts from the timer. The timer was recreated smaller and placed at the top, successfully fulfilling the users wants as well as focusing on fun.
2. Increasing User Control

Before: Lack of options and boring interface.
After: Added skip function. Including the option to skip their rest interval gives users freedom and control. This increases flexibility of personal workout plans.
The contrast in colour emphasizes the buttons availability and directs users to the option of taking action. This also encourages the user to challenge and push their physical limits for how long they rest for.
3. Overlay rest screen

Before: Resting timer occurrs on the same screen as the exercise interval timer.
This did not convey a clear distinction between intervals and rests. Lack of sense of progression may increase stress on the user when time limit is a concern.
After: Additional screen for the resting period. This adds a visual break and a distinction between the different periods of the workout.
Changing the overlay rest screen to a different hue induces a sense of calmity and progression.
Hi-Fi Mockups
Overview of multiple iterations of hi-fi mockups.

Finalized Hi-Fi Mockups


Development
The application was built using Visual Studio Code as a text editor and Firefox to render the HTML pages.
Challenges
Core logic of our application was the most difficult challenge in building this project. A large portion of project time was used to research how to build and write the program rather than coding.
Cross browser origin requests and security issues made it difficult to continue with Chrome but were overcome by using Firefox.
GIFs: The GIFs were pulled from the Giphy.com website API. A challenge was creating an unpredictable rotation of GIFs pulled from the API to prevent the user predicting when GIFs change in accordance with the timer. Our intial setting was 5–10 seconds. The timing was too long and too predictable, which did not support our user desires. We changed the rotation to randomize between 3–7 seconds.
Customization: Maintaining the highlight on selected options without breaking the code! Saving the data in storage to be rendered in the next page was the easier part, the highlight of the selected option was the difficulty. We troubleshooted the issue with our teacher and achieved the desired result.
Learning Observations
Challenges in simplicity
We started our project thinking there wouldn’t be any obstacles we couldn’t overcome. However without the assistance of our teacher and the combination of our skills together, we know there would have been more struggles and frustration.
A simple application like 30/60 has a timer as its basic function. However, we learned that details and additional features which add to the success of an application make the job significantly more complex. This was seen particularly in coding and development of the application.
Communication is key
Working in a team and requiring communication skills is a feature of the real working world. By collaborating on a group project, we found our high level of communication contributed to our success. Work is easier and decisions are made faster when communication is high. We all recognize this is a highly valuable skill.
Collaboration across the board
Throughout the project we continually requested feedback from each other and collaborated on different tasks. We found that our roles overlapped as we continued to communicate while working in our respective jobs. This may not be a feature of reality, however it was beneficial to have high levels of communication and a supportive team to consistently receive feedback from.
Future
Currently our application supports independent physical exercise in a simple way. However we are also excited in the potential of 30/60 and know it could be advanced to increase user customization and control. Below are features we would like to see in the future of our application.
- Ability to personalize workout plan by adding exercises with customizable labels.
- Accessing local storage to save a workout plan.
Thank you to Mel and Jenn for working on this project together with me. It wouldn’t have come out as beautifully or been as fun without you both.
If there are any questions regarding our project, feel free to leave a comment or reach out!
Thanks for reading.