Designing and launching the Android, iOS, Web, and Desktop apps for an AR fitness startup.
Virdio is a startup providing interactive home workouts through screen-based AR.
The Virdio product uses machine vision to detect a user's space through a webcam, and places virtual objects on their screen, similar to how a Microsoft Kinect works.
I joined as a Product Designer to create their consumer facing apps, AR fitness activities, and internal tools.
Being in a startup, I was also involved in extra tasks like marketing, content design, web design, and video editing.
Key challenges
Designing for home setups
Experiences would need to be designed with space constraints in mind. Exercises needed to be usable within a minimum area, and on a variety of devices.
Easy to run experiences
Virdio experiences needed to run on all commonly used devices, meaning that AR activities could not be too complex, they needed to be simple and lightweight.
Multi-platform consistency
The Virdio apps were available on Android, iOS, Web, Windows, and MacOS. So we needed to ensure that the experience would be consistent on every device.
Working through early stage ambiguity & shipping the Virdio app.
At the time I joined Virdio was B2B, selling their services to gyms during COVID-19. The new goal was to harness Virdio's AR technology to get it into people's homes through the form of a D2C subscription service like Peloton or Apple Fitness+.
Here's a summary of what I did:
Early stage research & design strategy
I interviewed gym owners, fitness experts, and users to understand their habits. I also analyzed competing services to identify opportunities for improvement.
To orient myself and understand the type of information presented to the user in this space, I mapped out the Information Architecture of popular subscription based fitness apps.
I also looked at booking flows from other areas, like this example from Google Flights.
Information architecture, user flows, & wireframing
After defining the broad functionality of the app, I mapped out the information architecture, key user flows, and started sketching wireframes.
Listing out parts of the UI, and structuring them so they have a sensible hierarchy.
UI exploration of a session card's compact/expanded view.
High fidelity UI prototyping & design system
After many iterations, I moved on to creating high fidelity UI and design system along with detailed documentation. I collaborated with the dev team throughout.
Mobile profile page with statistics, achievements, and class history.
Desktop class browsing page with filters and categories (Screenshot from shipped desktop app).
Desktop onboarding page for selecting workout preferences, personalizing the user's class browsing experience.
AR workout prototyping
Once the apps were done, I moved on to designing AR activities. I collaborated closely with the dev team and drew from my passion for video games to create engaging activities.
WEE!!!
It always starts with a sketch…
I designed setup flows according to what the machine vision system required. In this case, the corners of the user's available space are recorded by asking them to stand closest to where the cones are placed.
AR activities were designed to simple, with affordances communicating functionality. In this case, the height of the box indicates how low the push up has to be and the color indicates success/failure.
Outcome
Native & web apps
Mobile - Class browsing
Mobile - Profile
Desktop - Class browsing
Desktop - Profile
Desktop - Signup
Desktop - Onboarding
AR fitness activities
I designed the virtual activities and the HUD they would be visible from a distance while not being obstructive.
Desktop - Virtual Activities
Desktop - Room Setup
Desktop - Pre-class AR setup
Trainer View - In class program
Result
Shipped!
As a result of my contributions we released the Virdio apps on iOS, Android, Windows, Mac, and Web.
Enabling more trainers to host their classes on Virdio and enable more people to sign up.
Reflection
The biggest challenge
The most important skill I built, and also the thing I struggled most with at the start was stakeholder management. It was my first experience working closely with engineers and executives, I learned how to make tradeoffs and advocate for better design practices with stakeholders.
Providing a consistent experience
Providing a consistent experience across all touchpoints was a big challenge that I still think about. Virdio is not a traditional cross-platform product because the device significantly influences the user experience. A mobile workout experience was completely different from a desktop one.
In the end…
Working at Virdio was a transformative experience for me. I grew as a designer, prototyper, and collaborator while having significant influence on an incredibly cool, and novel product.
what are you doing here?
go look at a case study.