« Back home

Revamped gym app

Company: Friskis & Svettis (concept)

My roles: UX and UI designer

Short description: As a customer of Friskis & Svettis (the largest gym chain in Sweden with more than 550 000 members) I would love to see improvements to the user experience of their iOS app. Said and done, I did a clickable prototype with a lot of changes that I believe would improve the usability, and a new visual design based on their current website design.

Outcome:
“I’m totally speechless – how beautiful it is!
And it looks really user-friendly.”
Catrine, Communication manager, Friskis & Svettis, Västerås

Table of contents

Phase 1: Define improvement areas and find inspiration

Personal experience

As a customer and user of Friskis & Svettis iOS app for many years I have noted quite a few areas where I would love to see improvements:

Book a gym class
  • No way to see the length of a class.
  • Very little information about the classes.
  • Not possible to filter on several class types (it’s one or all).
  • Lots of taps to reach the wanted date.
  • Not possible to see if a class is bookable without going through the entire booking process.
  • The booking terms are nowhere to be found in the app.
Visual design
  • The design is not at all in line with the current Friskis & Svettis website design.
  • The design is not adjusted for iPhone X (released in 2017) and later.
General
  • News, general information and other relevant updates are nowhere to be found within the app.
  • There is no information about your membership, e.g what type of subscription, renewal date etc.
  • The physical membership card has a barcode that you scan to check-in at the gym. This barcode is not available within the app.

Looking into competitors

Due to limited access to multiple gym subscriptions, hence gym apps, most of my competitor research consisted of looking at information and screenshots I found in the app store, and on the competitors’ websites. Still, I got good inspiration using this simple approach.

The current app is in need of a visual update to be aligned with Friskis & Svettis’ current website, and there is a lot of opportunities for UX improvements.
Screenshots from a few of the competitors' apps I looked into for inspiration.

Phase 2: Hand drawn mockups

As I almost always do I started by sketching some ideas and thoughts by hand. Since I had no access to either stakeholders or users during the process of creating this concept I did not go on to create any wireframes, instead I went straight to hi-fi prototyping after sketching.

I tested a few thoughts and ideas by hand before moving on to hi-fi prototyping.

Phase 3: Prototyping

Current website as visual design reference

Since I don’t have access to any brand identity or style guide documentation I used Friskis & Svettis’ website as reference for the visual design.

I did not make any changes to their color schemes even though I feel that the web booking UI would benefit from colors with a bit more contrast for better accessibility compliance.

I used the current website...
...and web booking UI as references for the visual design update of the app.

Clickable prototype

The final result was a clickable prototype showing the following suggested changes:

  • Completely new design based on the current website design.
  • New start page with…
    • …a brief summary of your training for the last 30 days (to increase your engagement).
    • …your upcoming booked classes.
  • Class booking reworked with…
    • …length of class added.
    • …possibility to filter on multiple class types (filter settings are saved between sessions).
    • …a new date picker at the top of the class booking page, making it easy to jump several dates back and forth with just one click.
    • …visible indication when classes are not bookable.
  • New details page for classes including…
    • …more information about the class.
    • …an image illustrating the type of class.
    • …the name and an image of the class instructor.
    • …a map link to find the gym location for that class.
    • …the possibility to request a notification when the class is bookable (5 days before the class)
    • …a button to add the class to your device’s calendar when you’ve booked it, and also subscribe to your bookings (you can subscribe to your gym calendar as of today, but it is very hidden).
    • …information on how late you may cancel a booking, and what will happen if you don’t show up at a booked class.
  • Reworked information page where you can find…
    • …opening hours, locations and booking rules for each gym (your favorite gym is shown by default).
    • …the latest relevant information for you from Friskis & Svettis (local and national).
  • New “My profile” page with…
    • …information about your membership.
    • …a digital version of your membership card (possible to add to Apple Wallet for easy access).
    • …information on if you have any “no shows” on previously booked classes and what that means.
    • …visual training statistics in your profile.
Splash screen.
New start page with dashboard.
Schedule for class booking.
Filter options for class booking.
Class details page.
Details on a booked class, with the possibility to add the class to your calendar.
Details on a non bookable class, with the possibility to be notified when booking is available.
Information about all the gyms and news.
“My profile” page with your membership card and details about your membership.
Statistics regarding your workouts.

Phase 4: Delivered the concept to Friskis & Svettis

After finishing the concept, I sent it to Friskis & Svettis as feedback and potential inspiration for any future updates of their app. One quote from the reply was:

  • “I'm totally speechless - how beautiful it is! And it looks really user-friendly."

Catrine, Communications manager, Friskis & Svettis, Västerås

Get in touch

I’d love to get in touch with you to hear about your goals and vision for your website or app. So don’t hesitate to send me an email or a message on LinkedIn.

 …and hey! If we meet in person I will make sure to bring my favorite Swedish candy “Dumle-kola“. I think you will love it too :).

Scroll to Top