KUNAL DEVI

Hyperlab Mobile App Design

ROLE: (THE ONLY) UI UX DESIGNER

TIME: 6 MONTHS

Hyperlab, a young startup, based in Gujarat, India needed an app designed for their first product Helios which is a sports-tech product responsible for improving speed, agility and reflexes of athletes and sports enthusiasts.

FOR THE FULL CASE STUDY, PLEASE VIEW THIS PAGE ON A DESKTOP. MOBILE VERSION COMING SOON!

FULL CASE STUDY

What is this project?

First version app design for a young sports-tech startup whose main goal was to start selling their physical product.

Why should you consider scrolling down?

Identify insights about best practices and pitfalls when developing an app for a startup using an agile methodology. (Look out for TAKEAWAYS)

INTRODUCTION

What is this app about?

Hyperlab, a young startup based in India needed an app designed for their first product 'Helios'. 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.

This is

Helios

The app controls Helios - a device designed to make customized drills and gain precision analytics. It is responsible for improving speed, agility and reflexes of athletes and sports enthusiasts.

Image credit: Studio Carbon

APP HIGHLIGHTS

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

UPDATED FEATURE 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

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.

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

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