top of page

ui design case study

ActiveSG app redesign

Background

ActiveSG Circle is Sport Singapore's online platform that aims to inspire and empower the nation to live better through sport. 

Project scope: Timed challenge to redesign ActiveSG app
As a gym goer who frequently uses the app, I decided to give myself a timed challenge to redesign the UI/UX.

Timeline

1 week

Role

  • With a short time frame, I chose to prioritize and redesign the key functions of the ActiveSG app with Figma, in order to address the main UX issues that I observed and personally experienced as a user.

01 | Problem

Low ratings due to lack of UX considerations

With a 1.9 out of 5 stars rating on the app store, ActiveSG stands as one of the lowest-rated apps, plague by numerous 1 star rating and complains mainly due to the lack of UX considerations.

Screenshot 2024-03-24 at 9.50_edited.jpg

Identifying personal pain points

As a user myself who has experienced similar frustrations and encountered my own set of challenges while using the app, I decided to identify and map out some of the existing problems that I have. 

research new.jpg

(-) Home button lacks affordance

(-) No distinction between primary and secondary features

(-) Too much empty space

Frame 869_edited.jpg

(-) Lacks information hierarchy

(-) Multiple unnecessary steps

(-) Information overload

(-) Lacks information hierarchy

site map_edited.jpg

Site map of the app to better visualise the information architecture

02 | Solution

Redesigning the landing pages

My solution focuses on the high-level overview of the 4 key landing pages:

Home, Facilities, Programmes, Buy Pass and Game on.

after screens_edited.jpg

Home page

(+) Combined 'ActiveSG Credits' and 'My Cash'

The app defaults to deducting from the 'ActiveSG credits' before 'My cash'. Rather than showing them separately in the previous version, I combined both amounts into one total for easier reference.

(+) Enlarged QR code for ease

of access

Enlarged the QR code since it is one of the primary function in the app. Reduced the number of steps from 2 to 1 to access the function.

(+) Redesigned Home button

Changed the ‘Home’ icon to make it more intuitive.

Facilities page

(+) Combined 'Facilities' and 'Programme' pages into one 

I combined 'Facilities' and 'Programme' page into a single page as both have similar services and activities provided, and would make more sense if they were grouped together.

after screens 2_edited.jpg

Engaging in aerobics helps one stretch further to chope seats at the hawker centre.

Playing badminton trains one to fight off the dengue mosquito with the racquet.

Practising archery helps one shoot the goal of retiring early.

(+) Adding fun and relatable
Singaporean illustrations 

Recognising that ActiveSG is used mostly by Singaporeans, I decided to add fun visual elements to the app by designing illustrations with quirky Singapore references which are more personable and relatable to the users.

Buy Pass page

(+) Reduced steps to access important information

Removed the information icon by flashing out the descriptions under the header, reducing the steps for users to access important information.

Group 785_edited.png
Frame 789.png

(+) Improved visual hierarchy

Changed the font size, weight and added brighter colours for Call-to-Action button to improve visual hierarchy.

Tracker page

(+) Reduced steps to access important information
Combined 'My health stats' and 'Manage tracker' into one page, reducing the number of steps that users have to go through to sync their trackers.

after screens_edited.jpg

03 | Reflection

Setting a short timeframe for this project provided me with valuable insights into my role as a designer and the aspects I prioritize when faced with the challenge of redesigning an app.

Focus on user experience

One of the initial issues that caught my attention as a user was the app's lack of intuitiveness, particularly in the 'Programmes' and 'Facilities' tab. This prompted me to create a site map to gain a comprehensive understanding of the overall flow and swiftly identify areas for improvement.

Information hierarchy

Drawing from my experience in publication design, I quickly noticed the lack of information hierarchy, layout and visuals in the app, especially in the 'Buy Pass' tab, which prompted me to redesign the layout.

Visual

This personal case study has provided me with greater creative freedom to work with illustrations, something which is usually constrained by the project briefs set by clients. 

Skills required: Figma, Adobe Illustrator

bottom of page