-A SHARK TANK FEATURE!
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.
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.
PLEASE VIEW THIS PAGE ON A DESKTOP. MOBILE VERSION COMING SOON!
ROLE: (THE ONLY) UI UX DESIGNER
TIME: 6 MONTHS
What is this project?
First version app design for a young sports-tech startup whose main goal was to start selling their physical product.
Skills I used and learnt
Skills used:
Building information architecture
Wireframing
UI Design
Asking the right questions
Skills learnt:
Agile development methodology
User Testing
Implementing Google's material design for UI
Managing business objectives using design
First principle thinking
Creative designing with hardware constraints
My takeaway from this project in one line
Identified insights about best practices and pitfalls when developing an app for a startup using an agile methodology.
(Look out for TAKEAWAYS)
INTRODUCTION
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?
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
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!
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
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
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
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
SUCCESS STORIES
The app enabled Hyperlab to sell their first ever 100 mass manufactured devices!
The app made it possible for Hyperlab to be a Shark Tank Sensation!
HELIOS: 1
APP: 1
FIN
