Survival of the fittest meets the 21st Century

Petter Karlsson
Apegroup — Behind the Screens
5 min readJul 8, 2016

--

SATS case study — getting Scandinavia’s most popular fitness club into shape.

With over 160 centers and half a million active members, SATS ELIXIA is one of Europe’s largest players within health and fitness. Apegroup’s collaboration with SATS ELIXIA began in 2011.

The brief

Based on user survey responses and the level of engagement in the app made it clear that a mobile first perspective was critical to SATS ELIXIA’s core business. These opportunities called for a modular och flexible design system, which paved the way for a complete rework of the SATS ELIXIA web. Apegroup was asked to develop the new concept as well as the detailed design system.

The insights

We started off with gathering insights through data analysis and user research. What was already working well in the product and what was causing friction? We also worked to identify new opportunities.

Based on the insights, we mapped out key user scenarios to uncover what functions the users required. Once we understood how the user’s behaviours overlapped with core business drivers, we could set the goals the service needed to reach, as well as hypotheses on how to reach them. The team used hand-drawn sketches, visual mockups and clickable prototypes to quickly communicate and test these hypotheses. The client stayed involved through frequent workshops and reviews.

These are the three main areas that we identified as being able to significantly improve the user experience as well as SATS Elixia’s business.

Since motivation is such a huge part of fitness, providing a source of inspiration and engaging content would help SATS ELIXIA gain traction with their customer base.

By making it easy to find centers near you and book classes online, we could help lower the barrier of entry to getting to the gym

Since SATS ELIXIA had a plan for progressively updating their web presence, the design system had to be flexible and allow for growth

The Experience

Our research showed that videos related to working out, especially for fitness classes, get a lot of attention from visitors and members alike. Therefore, we created a visual grid of videos greeting visitors right of the bat. Visistors are encouraged to dig deeper and learn more about fitness classes and memberships.

A grid elevating inspiring & engaging content

Of course, once we’d peaked their interest, we wanted visitors to get involved and sign up to a membership. The proposal we developed streamlined the membership process by removing steps, clustering options and keeping the communication simple.

Wireframe outlining a step in the simplified signing up experience

Since we found that facilities and location were key factors in deciding whether or not to sign up, we had to make it easy for users to find and explore centers near them. We created a flexible map module, accessible from the landing page, allowing you to easily see the available centers and zoom in on individual ones. We also created individual pages for each center, making it easier for visitors to find information about and contact the centers they were interested in joining.

InVision prototype we made for a concept for the sign-up flow

We found that group classes were a big reason why existing members had chosen SATS Elixia. To improve their experience, we created a brand new booking module, making it easy to find & book classes. We implemented short-cuts to bookings, cancellations, recommendations and reminders.

Booking module available up front when logged in

The technology

We designed and developed a pattern library of components and patterns working beautifully on smaller screen sizes and reflowing effortlessly on larger ones. Modules and layouts are easily rearranged, reused and repurposed.

Design system delivered as a HTML and CSS-based pattern library

Take aways

  • We designed and built a responsive design pattern library that can be used for mobile, tablet, desktop and beyond
  • Our design is implemented on Sweden, Norway and Finland sites
  • Same design system used for sister brand HiYoga
  • The design system could accommodate new concepts such as the launch of online training.
  • We also applied the design language to all of the clients email communication and newsletter
  • The design language was used to explore a possible Apple TV venture

My name is Petter Karlsson and I’m head of product design at apegroup, a design, technology & communication agency in Sweden. We help organisations build great digital products with engaging content. Want to know more about how we work? Learn more at our website.

If you enjoyed this article, don’t forget to press♡ below! And if you have any questions please, bring them on!

--

--