KUNAL DEVI

HYPERLAB APP DESIGN

READ FULL CASE STUDY

Project Timeline:

December 2022 - May 2023

Description:

This case study focuses on the 'Create a Drill' flow in Hyperlab’s companion app. While I worked on other parts of the app, this flow best highlights my design thinking and problem-solving approach.

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. Before I started designing the app…

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.

Traditional Drill Practice

Plastic Cones as markers

Drill Practice with Hyperlab's Device

Virtual laser targets for precise data capture.

Video by Tima Miroshnichenko

Video shot at Akshar Sports Academy, India

02. So how does the app help exactly?

Digital app empowering hardware constraints

Mobile phone controls device’s rotation to place the laser point precisely where needed

03. Who are the target users?

COACHES:
I focused primarily on coaches as they would operate the physical device using the app.

ATHLETES:
Since the app also manages athletes, I considered athletes as secondary target.

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"

Detailed View

Concise View

04. Create a Drill using Hyperlab's device

HMW create an interaction that coaches can use to create a drill without having to overthink this new device?

How do we display the physical device?

The first thing for me to do was think about how the physical device will be represented in the app. I mirrored the device’s court setup in the app with a top-view canvas and simple controls, giving users instant, clear feedback.

Next, I explored different ways for users to control the device using the app. I designed controls in the lower half of the screen as it is easiest to reach.

Paper Prototyping

Interaction 1

Yaw arc for 360° rotation, pitch slider to tilt the laser, and a button to add a drill point.

Interaction 3

Horizontal and vertical sliders to adjust yaw and pitch, with range and angle displayed above.

Interaction 2

Separate pitch (vertical) and yaw (360° horizontal) controls, with a button to add a drill point.

Interaction 4

Joystick-style control to adjust yaw and pitch, with a center button to add a drill point.

Paper Prototyping

Interaction 1

Yaw arc for 360° rotation, pitch slider to tilt the laser, and a button to add a drill point.

Interaction 3

Horizontal and vertical sliders to adjust yaw and pitch, with range and angle displayed above.

Interaction 2

Separate pitch (vertical) and yaw (360° horizontal) controls, with a button to add a drill point.

Interaction 4

Joystick-style control to adjust yaw and pitch, with a center button to add a drill point.

Interesting! Now how do I decide which one to go forward with?

Well, none of the above!

Reason 1:

I was called upon by my fellow developer friends in the team to change the design of these interactions as they weren't the best use of the time we had got!

Reason 2:

From UX point of view, the controls used to place a drill point will force coaches to first decide the spot on the court, then figure out the right control, and adjust by trial and error, adding time and effort.

So what can be the ideal interaction?

By replicating how the coaches place drill points in real life, the new way to create a drill becomes extremely simple to execute - just tap on the screen where you need the drill point!

Flow Screens

Wireframes

UI Design

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.

Flow Screens

Wireframes

UI Design

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.

Finally, did it work?

Thanks to the development team, it was possible to immediately gain insights and correct things where something went wrong. We tested the flow live with participants to see if it was intuitive. They were asked to set up a drill using the device, helping us understand their mental models and how they mapped it to the court.

Feedback after testing the flow:

Long press not obvious; hard to understand or execute
Physical and app directions felt mismatched; needs clearer alignment
Text too small and hard to read; unclear coordinate info
Desired clearer, instant feedback when placing points
Device placement screen not evident; range unclear
Add zoom-in, snap to grid/intersections, show point names

Improvements:

Final Flow Video (Click to play):

05. All UI Screens

The above showcase highlights one of the core flows, but I designed the entire app end-to-end. Feel free to reach out to me if you'd like to learn more!