UMD Course Project | Visual Design Studio

BeepTest: Simplifying Performance Tracking

A visual redesign of the beep test application flow that helps coaches & trainers enter results for a beep test in a simple & quick way

About

I redesigned the Beep Test app to provide coaches with a simple way to manage test results, replacing outdated manual processes. The new design features a modern, energetic aesthetic with bold colors and easy-to-navigate layouts to reflect the test’s dynamic nature.

Problem

Currently, there is no simple way for coaches & trainers to enter the beep test results fast and easy

Outcome

Redesigned a simple, user-friendly way for coaches and trainers to enter beep test results, via a visually modern app design

My Role

Lead Visual Designer, User Researcher, Strategist

Team

Solo Project

Duration

Jan 2024 till March 2024 (3 months)

Tools

Jump to Section

What is the beep test?

The Beep Test is a multi-stage fitness test developed as a way to determine a person’s aerobic capacity (VO2max)

Target Users

The beep test, a measure of aerobic power, is widely used in high-aerobic sports (e.g., soccer, basketball, rugby) and fitness assessments for careers like the military, police, and emergency services.

How it works

Participants run 20 meters back and forth, keeping pace with beeps that get faster each minute, increasing the test’s difficulty as it progresses.

Beep Test AKA

  • Multi Stage Fitness Test
  • Bleep Test
  • Pacer Test
  • Yo-Yo Test
  • Shuttle Run Test
  • 20 Metre Shuttle Run

Why did I want to redesign this application?

To apply my design skills and knowledge, to enhance the application's aesthetic & visual appeal

I took an iterative approach from research to implementation, refining the app’s aesthetics with updated typography, harmonized colors, branding, and consistency to achieve a visually appealing redesign.

Here’s what the old design looked like:

01

Discovering User Needs

What I Found While Researching

What’s the current problem with the beep test?

Currently, there is no simple way for coaches & trainers to enter the beep test results fast and easy

Coaches are writing down the test result on a physical piece of paper and later entering beep test results in a web application. This process can often be:

How did I refine the problem scope?

I conducted a competitive analysis, primarily focusing on understanding the visual design and hierarchy of competitor beep test apps

While there are several beep test apps in the market, they often lack user-friendly design, clear visual hierarchy, are difficult to navigate, and appear visually outdated.

Here's what I learned from analyzing the current beep test apps on the market:

Setting the Stage

How might we we redesign the beep test to help coaches and trainers enter beep test results in a simple, quick, and visually intuitive way?

Who is the app designed for?

It’s primarily designed for coaches and trainers who need a simple and efficient way to record beep test results, digitally

A "beep test recording sheet" typically includes columns for athlete names, levels reached, performance notes, and test dates, enabling coaches to manually track results and monitor progress over time.

User Persona: Alex Thompson

A 31-year-old high school soccer coach with over 6 years of experience in training athletes.

“I need a tool that makes managing beep tests easy, so I can focus on improving my team’s performance”

User Needs & Goals:

Quickly manage beep tests, assign athletes, and track progress seamlessly.

Behaviors and Motivations:
Uses tech moderately, prefers intuitive apps for test tracking.

Pain Points:

Struggles with disorganized test management and lack of real-time feedback tools.
Preferred Features:
Centralized app for creating and viewing tests with progress tracking

02

Defining the Vision

How I Connected the Dots

What are the unique features of the application?

I designed features that allow coaches to add and edit athletes, view test results chronologically, and track progress with warnings for athletes falling behind

My next step was to develop a design system incorporating these key features, following the current design trends, as shown below:

New Test Creation

Results Overview

Live Test Management

03

Shaping the Experience

Turning Insights into Concepts

How did I gather inspiration for the app’s visual style?

I explored style guides from leading fitness brands for inspiration and understanding current design trends

Bold, strong colors are commonly used to convey energy, athleticism, and a dynamic brand presence.

What are the key user assumptions for this app?

I believe that users are fitness-savvy, value mobile compatibility, and prioritize tools for performance tracking

These assumptions help align the app’s design with user needs, ensuring functionality, and usability.

Users are familiar with fitness test concepts

Users rely on mobile compatibility

Users prioritize data
tracking

04

Making It Real

What visual aesthetic did I envision for the app?

I was aiming for a bold, energetic, and powerful visual aesthetic that conveyed passion, intensity, and excitement!

To achieve this, I chose a monochromatic color scheme, with red as the focus color for its representation of intensity and vitality, while maintaining clarity and harmony across the interface.

Here’s what my mood board looked like:

What font style best suits this application?

I focused on selecting typography that was both clear and modern, aligning with the app’s bold and energetic aesthetic while ensuring readability

I chose the Inter font family for its perfect balance between softness and structure, offering both readability and a modern feel.

What color scheme best suits this application?

I found that the monochromatic palette was the most fitting choice mainly because of the number of elements necessitating a singular focus color

This color palette proved to be the most effective in maintaining clarity and harmony across the interface.

What singular color did I finally choose?

I chose red to represent energy, passion, excitement, intensity, and the powerful drive to win

I avoided blue, yellow, green, and neutrals to steer away from calm, happy, refreshing, or soothing tones, focusing instead on bold and energetic aesthetics

05

Refining the Solution

What did the critique session reveal about the app?

On getting feedback from user critique, I realized there were a couple visual concerns including issues with clarity, alignment, and visual contrast in the app

My next step was to refine the design by addressing user feedback, focusing on clarity, alignment, and improved visual contrast.

What design changes did I finally make?

Let’s compare the
Original App Vs. Updated App Designs

Introduced 'Recent Tests' section for an overview of past tests, optimizing screen space

Displayed key test details for each past test, eliminating wasted white space.

Visual Theme Update:
Shifted the app’s theme to a dark, bold, and energetic style.

Improved the results statistics with larger readable bars & legible text for comprehension

  • Timeline Views
  • List vs. Screen Preferences
  • Task Sorting

Streamlined Actions:
Updated the section to prioritize ‘Edit’ over ‘Remove’ for better usability

Redesigned the 'Test' section with an intuitive layout, including a timer & progress elements

Added shuttle increments, level progress indicator, and a split tab for ‘running’ and ‘out’ athletes.

Navigational Clarity:
Enhanced the Results section with detailed information and clearer navigation

06

Reflections and Future Visions

What I Learned and What’s Next

Did I achieve what I set out to do in this project?

Yes! I redesigned the Beep Test application for simplicity and a modern visual aesthetic

Original HMW Question

HMW redesign the beep test to help coaches and trainers enter beep test results in a simple, quick, and visually intuitive way?

Final Project Outcome

I addressed the lack of a simple, user-friendly way for coaches and trainers to enter beep test results, creating an intuitive and visually modern app design.

“Overall…really nice! Frankly, I think you’ve set yourself up really well for v1 or v2 of the app. I don’t think it’s finished or polished just yet, but what you have is an excellent platform for really starting to explore how this becomes desirable”

~ Course Instructor, HCIM UMD

FocusBuddy: Turn Chaos into Clarity

A participatory co-design research with graduate students diagnosed with ADHD, to develop an adaptive task management app.

GetFit: Track. Achieve. Repeat.

Co-designing a fitness app with ChatGPT to make logging workouts and tracking progress simple, quick, and engaging for users.

Have a Project or Idea? Let’s Talk!

I’d love to hear from you! Whether it’s for a collaboration, brainstorming session, or just a casual chat, I’m always up to connect and explore new opportunities 🙂

Scroll to top !