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.

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.

(-) Home button lacks affordance
(-) No distinction between primary and secondary features
(-) Too much empty space

(-) Lacks information hierarchy
(-) Multiple unnecessary steps
(-) Information overload
(-) Lacks information hierarchy

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.

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.

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.


(+) 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.

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