KUNAL DEVI

HELIOS APP DESIGN

ROLE:
End-to-end design of the app including wireframing, prototyping, user testing and the final handover.

TIME:
6 MONTHS

READ FULL CASE STUDY

A young sports-tech startup developed 'Helios' — an innovative device to enhance athletes’ speed, agility, and reflexes. The challenge was redesign the companion app to match its standards and help deliver Helios to market.

PLEASE VIEW THIS PAGE ON A DESKTOP. MOBILE VERSION COMING SOON!

ROLE: (THE ONLY) UI UX DESIGNER

TIME: 6 MONTHS

READ FULL CASE STUDY

impact

Launched the app in 5 months

Drove first 100+ unit sales of Helios

Helped propel the startup to a Shark Tank spotlight

INTRODUCTION

What is

Helios?

An innovative sports-tech device responsible for improving speed, agility and reflexes of athletes. It enables athletes to measure their progress with customizable drills and precision analytics.

Image credit: Studio Carbon

This is how the physical product - Helios works. It projects a laser point on the court. Athletes tap on this laser point and data is measured to generate precise insights.

Video shot at Sports Authority of India (SAI), Kabaddi department

What is this app about?

The app controls Helios to make customized drills and view the analyzed data. The design process consisted of very short deadlines and MVP style deliverables. Agile UX and Lean UX methodologies were used to deliver the app on time.

CONTEXT

An opportunity to make the best first impression.

Helios, the physical product was already ready to be put out into the market. But, the previous app - 'Version 0', nowhere matched its standards!

Video Credit: Studio Carbon

HELIOS: 1

APP: 0

Core Objectives of the New App

To help sports coaches manage their batches and workout sessions

To help sports coaches see, evaluate and track athlete performance

To fully automate Helios usage

THE PROBLEM

This was NOT going to be like a traditional UI-UX design project

A PILE-UP OF CONSTRAINTS

No user research stage involved since the goal was to ship Helios to its primary customers.

There was no brand in place and hence had no direction for UI style.

Super fast feature delivery caused the designing, developing and testing phases to overlap

Hardware limitations informed the majority of design decisions

FEATURE-WISE WIREFRAMES

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

CREATE A DRILL

{AN ELEPHANT IN THE ROOM}

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.

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