Improving the Facility Booking Experience on the ActiveSG Mobile App

A personal UX Design case study

Photo by Sam Moqadam on Unsplash

Summary

This personal case study applies the UX Research and Design process. It demonstrates how I applied data gained from usability testing to make informed design decisions with clear business goals in mind.

Purpose of this Case Study

The ActiveSG mobile app has been heavily criticized on the Playstore and App Store. Through UX Research and Design, I wanted to see how could I help their users become happier with their experience while meeting business goals further.

The Client

ActiveSG is an organization providing sports facilities and programs for the public to support Singapore citizens with opportunities to live an active lifestyle.

Project Duration: 2 Weeks

Project Goals

• Uncover usability flaws affecting users from completing tasks successfully and efficiently
• Design a prototype to overcome usability issues discovered

The Problem

• Uncover usability issues in their mobile app which may be hindering users from completing tasks

Research Setup

Me performing remote usability testing with a participant

I recruited 5 participants who were familiar with the app and between the ages of 21 to 50. From there, I interacted with them one-on-one to conduct on-site and remote usability testing.

Why was Usability Testing used?

I needed to observe user behavior with the app and understand their motivations when using the ActiveSG mobile app.

Key Insight 1: Not all users could find how to book facilities on their own

Users care about:

• Being able to find the facility they want to book and visit

The Problem with the Current Design

ActiveSG Mobile App Facilities and Search Facilities Screen

• All 5 participants expected the app to be clear and convenient
• 3 out of 5 participants initially thought they could book facilities on the home screen
• Only 3 out of 5 participants were able to figure out how to book a facility
• 1 participant had given up trying to book a facility

How does this problem impact business goals?

Brand perception matters. Since ActiveSG can be considered a government app, users expect it to be clear and convenient to use. However, this was not the case for some participants as they struggled with using the app to complete tasks.

Users who choose to give up using the app to book facilities might result to contacting ActiveSG directly for booking. Therefore, potentially flooding their customer service and result in inefficient use of company manpower overall.

My UX Design Approach

Wireframing process for the Facilities screen

1. I drafted low-fidelity (lo-fi) prototypes to design a screen that overcome this key insight and assessed it with participants
2. I reiterated the designs based on their feedback and moved on to medium-fidelity wireframing to visualize the technical details on Android
3. Two design iterations later, I fleshed out the final design in high-fidelity to reflect the improvements in high detail

Original (Left), My improvements

How this UX Design overcomes problems from the existing design?

I redesigned the existing screen with the goal of providing a more straightforward and intuitive process when users want to book facilities.

Key Insight 2: Users felt discouraged when unable to find available timeslots for their chosen facilities

Users care about:

• Being able to plan their visit to a facility

The Problem with the Current Design

Selected Facilities screen with available and unavailable slots

• Participants cannot view timeslots once the slots are fully booked
• All 5 participants cannot tell when the slot timings start and end per day
• 3 out of 5 participants felt frustrated when they kept seeing ‘no available slots found’ as it does not inform them when the slots are open
• 1 participant thought the app was bugged when it kept showing ‘no available slots found’ during their struggle to find a facility with vacant slots

How does this problem impact business goals?

Users feel discouraged when they struggle to plan their visit to a facility. As a result, ActiveSG may lose these users to competitors who provide better services in planning their visit to their facilities.

My UX Design Approach

Wireframing process for the Selected Facility screen

1. I went straight to medium-fidelity wireframing since my design solution simply sought to keep the timeslot buttons visible even if the slots are filled
2. I assessed my wireframe with participants to gather feedback before reiterating them in high-fidelity
3. Two design iterations later, I fleshed out the final design in high-fidelity to reflect the improvements in high detail

How this UX Design overcomes problems from the existing design?

Users will have an easier time planning their visit to a facility when the timeslots continue to remain visible even if it has been fully booked. This should also prevent them from becoming frustrated or get the impression that the app is bugged when no slots are shown for their selected facilities.