• Year: 2018
• Role: Senior Interaction designer at Accedo
• Location: Hong Kong and Auckland (NZ)

Client: Les Mills

Les Mills is a New Zealand company that operates gym facilities and also create Group Fitness classes (content creation) that are available in thousands of clubs across the globe and also on demand for end users. Les Mills offers 23 different Group Fitness programs. The best-known are:

• BODYPUMP™
• BODYCOMBAT™
• BODYFLOW/BODYBALANCE™
• THE TRIP™
• LES MILLS GRIT™

The programs are updated every three months with new choreography, music, marketing assets and Instructor training.

Les Mills in numbers

• 50 years old company (as of 2018 — started in 1968)
• Operates 12 premium mainstream clubs across New Zealand
• 58,016 gym club members in New Zealand
• 23 different Workout Programs
• Les Mills workouts are licensed by 20,316 clubs in 110 countries
• 140,000 accredited Instructors delivering group workouts to seven million per week

Context

As of October 2018, Accedo’s Auckland office was having its last UX Designer resigning from the company. Another UX designer had also resigned earlier during summer. The company was at risk to lose critical design knowledge, especially in regards to its most important client locally: Les Mills.
While I was enjoying some well-deserved vacations in Laos, my manager called me to let me know that I would have to fly straight to Auckland, immediately after I’m back in Hong Kong.

Missions

My mission was to gather as much knowledge as possible from the last designer before she leaves so that we can ensure the smoothest transition from Les Mills’ perspective. I only had 2 days for this handover:

• I arrived in Auckland on Wednesday October 24th and started to work the day after
• The designer left Accedo on the following Friday Oct. 26th.

After those 2 days, I had to keep the design work going, as well as to attend meeting with Les Mills + our Agile Team.
I was also in charge, alongside with my manager in Hong Kong and our Design Lead in Sydney, to recruit two other designers to rebuild the team up. As being the only one on site, I was leading interviews with candidates while having my teammates on video-conferences.

Gathering Data about projects

When landing on a new land, joining a new team and working on new projects with a new client, there are thousands of questions that arise:

• Who are the stakeholders we’re dealing with?
• Who is responsible for what within the team?
• What is this feature/component there for?
• When was this designed and why?
• What problems did the team face?
• What is the priority of each task?
• Etc.

Collecting answers and keeping track of the info is crucial. I used Google Sheets to gather as much data as possible during my first weeks in the Auckland office. The format of a spreadsheet helps in establishing a formal structure where you can keep track of statuses and filter through info.

Gathering data about Users (User Research)

Survey

One of the things I realised is that we didn’t really have data ands analytics about the end users of the products. The team I was working with was advocating the implementation of data tracking solutions to the stakeholders at Les Mills. Since this would take a while before we would reap the benefits, I decided to create a survey in order to quickly get a grasp on the user experience and main friction points.

After asking the questions, I also asked the participants to fill in an Attrakdiff survey form so that we can gauge the attractiveness of the product, in terms of usability and appearance and whether optimization is necessary. AttrakDiff evaluations distinguish between pragmatic and hedonic quality. Pragmatic factors are, for example, usefulness and usability. Hedonic factors include emotional needs, such as curiosity and identification. The resulting attractiveness is based on the combination of pragmatic and hedonic factors.

I initiated the usage of this tool on this project so that we can have an overview of the progress overtime. The resulting data that we get with AttrakDiff are shown in graphs so it’s made easy to spot the trends.

Version Control + Design System

One of the first challenges that I encountered was to try to find clarity within the organisational structure of design files. Previous designers of the Auckland office had been storing design files in multiple folders in Google Drive. Some were named by date, some others by iteration number. Sometimes, for the same project, the most up-to-date screens were scattered across different files, which was contradicting with the iteration number appended to the file name.

It was a real pain for me to get around this—and would have been the same for any new designer joining the company. And since one of my missions there was to recruit new designers, I had to pave the way for a good onboarding. Therefore I decided to upload all the latest design files on a version control tool called Abstract. This ensured a single source of truth for design while enabling multi-designer collaboration, version tracking, commenting, sharing…

Same logic as Git: designers would be able to create branches, merge, manage conflicts, etc.

While hosting all our files in Abstract, I also created a specific project dedicated to the Design System. Since we had 3 projects for Les Mills (related to 3 different products from them) it was a good time to start creating one. That would help to maintain consistency and avoid the duplication of components on different design files. Resorting to a Design System would allow designers to pull components from the Design System library file(s) to a project-specific file.

For any update made to the library component, all its occurrences would be updated accordingly. That was also the place where we would gather, reference and describe all the elements related to design components, copy-text, implementation…

‘A Design System is always a work in progress’.

Modal redesign

Adding titles – Improving contrast

By working on the design files I realised that we had a couple of issues that needed to be addressed regarding the modals.

The first one was that the text in our modals was just using ‘body-text’ style. Which turned out to be problematic since:

• it was impossible to add a secondary type of info without creating another additional subtext style and making the overall look overly complicated
• it wasn’t allowing for quick scannability: it’s sometimes enough for users to just read the title (given there’s one) and understand what’s happening without having to read through the rest.

Also, there were some visual inconsistencies. The modals’ background opacity wasn’t always the same. The darkening overlay on top of which they were displayed would also vary (not always the same percentage of black). By testing the contrast of the current modals, I realised that the semi-transparent white wasn’t always providing sufficient contrast for UI elements.
So my recommandation were:

• to increase the modal’s white opacity from 85% to 94%
• to use consistent 50% of black for the darkening overlay

Primary versus Secondary CTAs

In some scenarios, the CTAs (‘Call To Action’) in a modal can be displayed with different styles. We can name those ‘primary’ versus ‘secondary’ CTAs. A primary CTA could serve to highlight the path that is the most likely to be taken in a specific user flow. When a secondary CTA (less prominent), could serve to prevent users from accidentally selecting a wrong option.

In the case of Les Mills, the styling wasn’t really serving this purpose since the secondary CTAs (dark grey) had more contrast than the primary ones (green). The result was confusion and error prone.
I advocated for the usage of ghost buttons. While preserving the branding colours, they wouldn’t outshine the primary CTAs.

Customisable Navigation – Les Mills Virtual

Les Mills Virtual is the iPad app designed for gym facility owners. Gym facility owners would have those iPads displayed inside their facility for end users to browse timetable (“when is the next group fitness session of BodyPump led by coach Anna?”) or play virtual classes (video classes without live instructor). When there’s an empty slot during the day with no instructor, gym staff (or even gym customers) can browse and select classes on the iPad and play them on a big screen and proceed with their workout.

Borrowing from Les Mills selling points:

• The average studio sits empty for 50 – 80% of the day. Running off-peak virtual classes gives your members more options
• Running virtual alongside your live classes allows you to expand your timetable and optimize your studio space
• Over 70% of virtual users say they’re drawn by the flexibility to do a workout whenever it suits them
• Running classes off-peak opens up group exercise to entirely new markets, like shift-workers and parents

Goal

Les Mills wanted their clients (gym facility owners) to be able to customise the navigation of their app. Some facilities might prefer to have the Timetable screen showing by default, when some others might prefer the Classes screen as a default. Other sections were to be added in the future so the design solution had to be future-proof. Also, some customers might want to only have certain sections showing. For some small gym facilities (like in a hotel) there wouldn’t be a timetable so it wouldn’t make sense for those types of customers to show this section.
Another important factor was the default screen. After a user would browse the app and then leave the iPad idle for a certain while, the app would revert back to the default screen. So it was important for gym owners to know which default screen will be most relevant in their environment. The design had to be clear and self-explanatory about this behaviour.

Framing this in the form of a User Story:
“As a gym facility owner, I want to be able to customise the navigation of the app that my customers will see so that it fits my specific needs and only shows relevant info.”

Prior to my arrival in the Auckland office, the team had been thinking how to design for this feature but their solution—having mutually exclusive switches—wasn’t ideal from a UX perspective.

Below is the prototype of the solution I proposed and the one that eventually got implemented. This shows the app when a gym admin has unlocked access to Help and Settings. It consists of UI Components that can be reordered via drag and drop. A switch is there to toggle their visibility On/Off. The default section cannot be toggled off, hence the switch being dimmed out for the section in 1st position.

Dark mode and UI-revamp

Goal: increase workout discoverability
User Stories:

1. “As a gym subscriber, when a studio is free, I want to be able to browse through available virtual classes so that I can pick one and play it on big screen”
2. “As a gym staff, when a studio is free, I want to be able to browse through available virtual classes so that I can pick and play the one that fits the needs of the audience”

Below is a video of a quick prototype I made to show how a user could filter through videos. The design caters to both mental models of looking for a workout either by type or name.