Hyperlab Mobile App v1.0:
Designing a Data-Driven Training Experience
Client
Hyperlab
Year
2023-2024
Category
Sports Tech,
Mobile App Design
The Hyperlab mobile application, a key component of the innovative Helios training system, was designed from the ground up to empower athletes and coaches with personalized training and actionable performance insights.
THE CHALLENGE
The core challenge was to design an intuitive mobile app, built from scratch, enabling users to create and play drills on the Helios device and view their performance data, all within the constraints of an MVP focused on delivering essential value.
Athlete performing a drill using cones (left) and helios device (right).
WHAT IS HELIOS?
Helios is a laser-based technology that projects dynamic, interactive targets onto any training surface, specifically designed to enhance an athlete's speed, reflex and agility.
To unlock its full potential, a mobile application is essential for users to intuitively create and customize drills, manage training sessions and access the rich performance data captured by the Helios device
Badminton Athlete performing a drill in Badminton Court using Helios Device.
DESIGN PROCESS
Building the MVP with the RAS Framework
Guided by the Rapid Application Sprint (RAS) Framework, the design of the Hyperlab mobile app prioritized user needs and rapid iteration, focusing on delivering core value and data-driven insights in the MVP.
Sprint 0:
This crucial initial phase established the strategic groundwork for the Hyperlab mobile app. It involved comprehensive research, stakeholder alignment and meticulous planning to ensure a solid, user-centric foundation for all subsequent design and development efforts.
1.
Project Kick-Off Meeting
Aligned the Hyperlab team on the app's vision, purpose and initial scope, setting clear expectations for the project.
2.
Stakeholder Interviews
Gathered detailed perspectives from Hyperlab's CEO, product, marketing and development teams to understand business goals and technical constraints.
3.
User Research
Conducted in-depth interviews and observations with athletes and coaches to uncover their specific training needs and pain points.
User research conducted in different arenas where Helios is being used.
4.
Competitive Analysis
Evaluated existing sports tech apps and training systems to identify market opportunities and design best practices for Hyperlab.
Different competitors of Hyperlab in the market.
5.
Creation of Product Requirements Document (PRD)
Defined the app's core features, user flows and success metrics, serving as the blueprint for the MVP.
Product Requirement Document created as a part of Sprint Zero.
6.
Information Architecture (IA) Planning
Structured the app's content and navigation to ensure an intuitive and logical user experience from the ground up.
Information Architecture of Hyperlab Mobile App created as a part of Sprint Zero.
7.
Identification of Key Actors for Each Phase
Defined roles and responsibilities for the design and development team members for each upcoming sprint.
8.
Estimation of Sprint Duration for Each Phase
Estimated the flexible duration for each subsequent sprint based on feature complexity and team capacity.
9.
Establishment of Guardrails
Defined clear guidelines and boundaries to maintain focus, prevent scope creep and ensure design quality throughout the project.
Iterative Sprint:
Following Sprint 0, the app's development unfolded through a series of focused, adaptive sprints. Each sprint tackled specific features, moving through a consistent cycle of understanding, ideation, prototyping, testing and planning, ensuring continuous refinement based on user feedback.
Let me take you through one of the iterative sprint focusing on Performance Analytics section of the App.
1.
Define & Understand
Refined goals for analytics, analyzed Helios data, researched user data interpretation needs and competitive analytics features.
2.
Sketch & Ideate
Brainstormed various data visualization methods (charts, graphs), explored dashboard layouts and prioritized key analytical concepts.
Sketching the ideas of the mobile app.
3.
Decide & Prototype
Selected visualization approaches, defined information architecture for analytics views and created low to high-fidelity prototypes.
Hi-Fidelity Prototypes for Hyperlab Mobile App.
4.
Test & Iterate
Conducted usability testing with users to evaluate clarity and usefulness of analytics, analyzed feedback and refined designs.
Testing with the users
5.
Present & Plan
Presented analytics designs to stakeholders, discussed future enhancements and planned handover to development.
6.
Retrospection
Reflected on the sprint process, identified what worked well in translating data into insights and pinpointed areas for improvement in future analytics-focused sprints.
Outcomes
The final data visualization screens designed as a part of a sprint.
Data Visualization Screens post performing a drill.
KEY MVP FEATURES
Empowering Training Through Data
The MVP of the Hyperlab mobile app focused on enabling users to engage with the Helios system and receive initial performance feedback. A core element of this was the design of intuitive data visualizations within key areas of the app.
Actionable Insights After Training
Following a drill or regime, users could access screens displaying a summary of their performance. Key metrics were visualized through simple charts and graphs, allowing athletes and coaches to quickly identify trends and areas for improvement.
Athlete Overview
The Athlete Overview provides a quick snapshot of key metrics and progress.
Buffer Drills
Analyze reaction time and agility across different movement directions.
Point-Based Drills
Visualize accuracy, speed between targets and consistency to refine technique.
Timeout Drills
Track performance under pressure, highlighting speed endurance and consistency against decreasing time limits.
CHALLENGES IN TRANSLATING DATA
Challenges Faced & How They Were Overcome
A significant challenge was designing an intuitive way for coaches to visualize the complex spatial and temporal elements of custom drills. This involved developing a clear and interactive interface where target placements, sequences and timing could be easily understood and edited, ensuring the digital representation accurately reflected the intended physical drill.
Screens showcasing creation of a drill using on-screen canvas.
LEARNINGS & REFLECTION
Learnings & Reflection
Designing the Hyperlab MVP emphasized the critical role of data visualization in empowering users. The iterative process of designing and testing these features provided valuable insights into user needs and preferences for performance tracking.
