HYPERLAB APP DESIGN
READ FULL CASE STUDY
READ FULL CASE STUDY
Project Timeline:
Project Timeline:
December 2022 - May 2023
December 2022 - May 2023
Description:
Description:
The aim of this project was to design a companion mobile app for Hyperlab's sports equipment, responsible for improving athlete agility, reflex, and stamina. The app will allow sports coaches to create drills, manage athlete profiles, and track athlete performance data.
PLEASE VIEW THIS PAGE ON A DESKTOP. MOBILE VERSION COMING SOON!
ROLE: (THE ONLY) UI UX DESIGNER
TIME: 6 MONTHS
My Contribution:
Wireframing
Interface Design
Prototyping
User testing
Final handover
Project Type:
Undertaken professionally as a UI/UX Design Intern at Studio Carbon, India with Hyperlab as my client.
01. Introduction
Hardware
Dictates
Software
Before designing the companion app, I first had to understand how the hardware worked. The device projects a laser onto the ground, which athletes tap with their feet while running. This interaction helps measure their speed and direction. The app’s role is to control the direction of the laser and display the performance data in a clear and useful way.
Physical Device (Hover for laser!)
I learned how the hardware works, and it directly shaped the app experience.
02. Core Objectives of the App
How can the app empower the physical device by leveraging its hardware constraints?
01
Create precise, laser-guided drills that mimic traditional coaching
02
Monitor, record, and evaluate athlete performance in real time
03
Organize and manage athlete groups and training sessions
03. Final App Highlights
04. Target Users of the App
Detailed View
Concise View
Name:
Naveen Singh, 37
Role:
Badminton Coach (100+ athletes students)
Goals:
• Create and manage athlete drills
• Track performance and timings
• Keep players motivated and progressing
Frustration:
Can’t track multiple athletes or prevent drill skipping
Quote:
"I bring out the optimum level of performance from each one."
Name:
Tanay Sawant, 25
Role:
Intermediate Badminton Player
Goals:
• Understand and improve performance
• Compete with peers and track progress
• Make practice drills more engaging
Pain Point:
Can’t train or evaluate progress independently
Quote:
"I feel motivated when my batchmates cheer me on"
Detailed View
Concise View
Name:
Naveen Singh, 37
Role:
Badminton Coach (100+ athletes students)
Goals:
• Create and manage athlete drills
• Track performance and timings
• Keep players motivated and progressing
Frustration:
Can’t track multiple athletes or prevent drill skipping
Quote:
"I bring out the optimum level of performance from each one."
Name:
Tanay Sawant, 25
Role:
Intermediate Badminton Player
Goals:
• Understand and improve performance
• Compete with peers and track progress
• Make practice drills more engaging
Pain Point:
Can’t train or evaluate progress independently
Quote:
"I feel motivated when my batchmates cheer me on"
04. Information Architecture
05. Achieving objectives through wireframes
How can coaches make use of this new physical device without increasing cognitive load?
01
Create precise, laser-guided drills that mimic traditional coaching
02
Monitor, record, and evaluate athlete performance in real time
03
Organize and manage athlete groups and training sessions
05.01. Creating a Drill
How do coaches currently design and teach drills to athlete students?
Creating a drill is an extremely unique flow to this application which does not have a standard use case. It became necessary to understand the mental models of the coach while they create drills. Similar mental models need to be integrated in this flow.
Coach Mental Model ->
Mark points and place cones on the court
Give a demo to athlete students
Make an advanced athlete play the drill first
Make beginner athletes follow the same drill multiple times
Paper Prototyping
Iterating directions for finding the most optimum interaction
Easier coverage of the court. The laser keeps on moving if the screen is kept touched.
Two finger interaction - need to split thinking about positioning the point.
The straight line movement of the trigger does not seem intuitive as the product revolves in circles.
Joystick approach seems intuitive but the interaction is tricky to be implemented.
All this was still confusing
Needed to think 'first principle'
What is a drill?
A drill in the Helios product is a set of laser projected points that the user taps on. Each tap on a point measures the time taken, which, along with pre-known distance, generates analytics.
POINT BASED DRILL: This drill type has a specific number of points chosen by the user on the court. The athlete needs to tap on the point in order for the drill to move to the next point. This drill can capture reflex, consistency and speed of the athlete.
TIME-OUT BASED DRILL: This drill type has a specific number of points chosen by the user on the court. The points have a specific time out which is generated automatically based on the drill difficulty. This drill can capture accuracy and scope of the athlete.
Move around and confirm the position of Helios in the app.
Tap in the circular range to add a drill point.
Create multiple points and fake points and adjust their position precisely.
List view of all points for bulk editing or viewing.
A preview mode that plays the drill without calculating analytics (saves space in the backend)
Saving the drill with appropriate tags and description.
Takeaway:
First Principle Thinking: The process of designing user experiences can be overwhelming. Adopt a first principles approach, and break down complex problems into fundamental components, allowing for a more straightforward and effective solution.
SIGN IN
Description:
Phone number, google, facebook and apple were chosen as the sign-up options due to priorities set by the business goals. These would allow coaches (primary target audience) to quickly enter the app and use all features with a load free onboarding, accounting for a good first impression
Takeaway:
UX accounts for business:
User experience design impacts business decisions by affecting user acquisition and retention on your platform. Design wisely!
HOME
Description:
Home screen houses all the entities of the application. It has a narrative and hence the sequence of the objects placed on the home screen is very important. The home screen should be just long enough so that the user can access all the features of the app without a second scroll.
Takeaway:
Storytelling in the home screen:
The home screen is responsible for the first impression on the user. Its story should have a proper start (hook) a mid section and a soft ending. It helps user to stay in the app for a longer time
ADD ATHLETE PROFILE
ATHLETE INSTANCE
Description:
Add a profile for every athlete that needs to play drills. Individual analysis data can get saved under each profile. This athlete profile can be used in the future when there would be a separate app for athletes. Each can retrieve their own data without losing any performance.
Takeaway:
KISS: Keep it simple, stupid!
Least number of screens possible for a relatively less rewarding task
ATHLETE INSTANCE
CREATE
READ
ATHLETE INSTANCE
ATHLETE INSTANCE
UPDATE
DELETE
ATHLETE INSTANCE
CREATE A BATCH
ATHLETE INSTANCE
Description:
Create a batch of athletes that may belong to the same sports category and level. Batches allow the coach to manage drills and athletes easily and also gain a cumulative performance growth chart of all the athletes together.
Takeaway:
KISS Again!
Embracing the CRUD flow
ATHLETE INSTANCE
CREATE
READ
ATHLETE INSTANCE
ATHLETE INSTANCE
UPDATE
DELETE
ATHLETE INSTANCE
ui party
Have a look at the FULL CASE STUDY for all the bts of this UI Design
Splash Screen
Workouts
Drill Profile
Playing a Drill
Home Screen
Onboarding and Handholding
Selecting your Sport as a Coach
View Batch
Creating a Drill
Playing a Drill with Real-Time Analytics
Connecting Device to App
Making a Coach Profile
Pre-Made Drills
Drill Points List View
View Athlete Profile
Calibrating your Device
Reviewing Athlete Profile
Setting Device Position
Editing an Overlapped Point
Post Drill Analytics
