Maveco
Maveco

 

Work.

Work RSS rss feed icon

Subscribe to the Maveco Work RSS feed.

 

Post

Case Study – Virgin Active native apps

Virgin Active mobile app - Hero
Enlarge
 
This is a case study for Virgin Active native apps on iOS and Android.
 
Client: Virgin Active
My role: Creative, ideation, UX/UI and innovation
 

Introduction

In February 2016 I came to Virgin Active as part of a specialist native mobile team. The iPhone app had been designed and built by a 3rd party and there were a variety of issues.
 
Virgin Active mobile app - Design Progression
Enlarge
 

Brief

The current app was really for class booking only, and only at the members home club. With 40% of members having access to reciprocal clubs, there was a clear need for a club switcher.
 


 
The club switcher was three dynamic options (home club, last club visited, and nearest club), plus the ability to search all reciprocal clubs. This proved extremely useful and the feedback was excellent.
 
Virgin Active mobile app - Club Switcher
Enlarge
 
Another issue was the lack of information around classes. An inline class info panel was designed to be a quick reference, along with a picture
 
Virgin Active mobile app - Class InfoEnlarge
 

Design

2 things were really bugging, the need for a cleaner, more minimal UI, and for some sort of card style ui for classes. There was no need for images next to classes when you have a scannable array of similar options. Remove all extraneous objects and just show the data. If people want images and further info, let them tap for it.
 

Virgin Active mobile app - Cards UI
Enlarge
 

Iconography

As always, minimal, clean, homogenous, cross platform, extensible icons, drawn from scratch in Sketch.
 
Virgin Active mobile app - IconographyEnlarge
 

Typography

Some simplification here was needed. The majority of the day to day feature UI is much better using the standard San Fransisco typeface that is inherent in all new iOS apps. I retained the hero brand font, which at the time was Helvetica Neue Bold Condensed and then Gotham was introduced with the new 2017 Rebrand.
 
Virgin Active mobile app - TypographyEnlarge
 

Custom Timetables

As members with multi-club membership can book classes at a multitude of clubs, the current static timetable format was not extensible. There was clearly a need for a streamlined feed of classes for the more active members. A discussion around favourites led to my proposal of custom timetables. The idea was that you can create a custom timetable that contains whichever classes and clubs that you like. You can create multiple custom timetables, and rapidly switch between them.
 
custom timetables onboarding
 
Custom timetables proved extremely successful, due to the flexibility that went far beyond the traditional ‘Favourites’ methodology.
 


Virgin Active iOS app - Custom TimetablesEnlarge
 

Boditrax Data Integration

Boditrax uses multi frequency technology to consistently produce repeatable, body composition analysis. The data Api allowed us to pull through the members data into the app, and produce graphing and summaries with insights, progress and goals design.
 
Virgin Active iOS app - Boditrax dataEnlarge
 


 

Social Sharing

The Boditrax data was a perfect candidate for a social sharing strategy. Users can make their own composite postcards showing whatever data they like, over their own images or a set of Virgin Active brand image backgrounds.
 
Virgin Active iOS app - social sharingEnlarge
 

#virginactiveuk #boditrax #iphone

A post shared by Maveco (@maveco_) on


 

Guest Passes

The existing web driven Guest Pass system was cumbersome and required the user to fill out a web form and then print out to take with them. A classic example of the friction in a customer journey that can be greatly reduced by mobile apps 


We redesigned it for mobile, now the user can select and authorise a guest pass, then simply show it on the phone to the front of house.
 
Virgin Active app - Guest PassesEnlarge
 
Virgin Active app - Guest PassesEnlarge
 

Hello Android!

The creation of the Android app was not a simple port, rather a ground up design, true to Material Design, a synthesis a good solid design principles for all Google apps. I had previously switched to cards on iOS and a cleaner, more structured layout, which was partly inspired by Material Design, so that was a simple move, also the nav drawer seemed a solid choice for principle navigation, as the tab bar for Android was in its infancy.
 
Virgin Active Android app - ClassesEnlarge
 

Results

Mobile now generates 71.5% of class bookings as of Feb 2017.
class bookings graph


Related External Links

Virgin Active iOS on the App Store

Virgin Active Android on Google Play


Work - Similar Posts