App — A  

Removing the hurdles for an all-encompassing and inclusive national movement for sport

Project for: General Assembly UXDI Course
Teamed with: Haq and Jane
Duration: 2 weeks

The starting line

ActiveSG launched in 2014. It aims to provide a comprehensive sports infrastructure, through facilities and activities, to Singaporeans experiencing and sharing the joy of living better through sport.

Image Credit:

With Singapore moving towards a Smart Nation, the government built an app with five key features:

  1. Designed for all user types
  2. Smart Search
  3. End-to-end Booking
  4. One-touch Booking
  5. Virtual ID

All these look pretty amazing and catered to users in mind, but how do the actual users think and feel?

As we peek into the AppStore reviews, it’s not a rosy picture. The app despite being no.1 in Sports, only has an overall rating of 1.9 out of 5. Through the one star ratings, we could see the general complaint is about “bad user interface.”

Ready, Get Set, Go!

Our redesign methodology utilised the UK Design Council’s ‘Double Diamond’ process.

My team had overlapping roles in the project, but my primary responsibilities in the project were:

  • User Interviews
  • Wireframe
  • Content Audit / Sitemap / Information Architecture
  • Interactive Prototyping

Discovery Phase

Being curious about what the reviews meant by “bad user interface,” we did our evaluation by being users of the app itself. Based on Jakob Nielsen’s 10 Usability Heuristics:

  1. Consistency and standards
    Visually, the home page and subpages were inconsistent in the use of background colours. Page names were also named differently (e.g., Facilities on the side menu, but Facility in homepage)
  2. Aesthetic and minimalist design
    App home page had meaningless animation (Nila lion waving) and content (Mood selector).
  3. Recognition rather than recall / Help and documentation
    QR code and scanner on the homepage serves no apparent purpose, without any help or indication.

However, we needed our validation through cognitive walkthroughs and user interviews.

User Interviews and Cognitive Walkthrough

Our initial interviews limited our user base to the age of 25 to 30. To widen our age group, we did a site recce nearby to see if we can find different insights.

User Interview at Delta Sports Hall

We managed to get valuable insights from the trip, for example:

  • Booking badminton courts is competitive and time sensitive as users must wake up at 7 am to reserve the slots for playing 15 days after.
  • With that, a mobile app is a preferred choice despite ActiveSG having a website for booking too since it’s faster and readily available by their side.
  • The previous assumption was ActiveSG users are only active because of the free ActiveSG credits from the government, but the people we interviewed here tells us otherwise as they told us they preferred the courts nearby.

Discovery phase findings

Our results from 10 user interviews and walkthroughs validated a few pain points about the app:

Navigation issues

  • Users didn’t understand what “VCard” is for and couldn’t identify passes are for swimming and gym entry points.
  • Having too many items on the side menu posed a problem when some users didn’t know it’s scrollable and it doesn’t help when they only utilise a few things on the list.

Unnecessary information on the homepage

  • Users didn’t understand what the QR code and scan feature.
  • While some users appreciated the lion waving at them, the push of essential content down was too much of a trade-off.
  • Mood selection at the bottom was redundant and useless.

Booking process pain points

  • There was no way to find nearby facilities if they missed their chance to book a court based on their timings.
  • Countdown timer being too distracting.
  • Not being able to identify the favourites button and how One-Touch Booking can help them.
  • Ability to select both eWallet and Credit Card during checkout confused the users.

Define Phase

From the user interviews, we identified two primary personas:

The pro user

He/She books the facilities at least once a week and brings his/her children for swimming lessons.

The casual user

Uses the app infrequently, because he/she takes turns with his/her friends to book facilities or rely on friends and family members to book instead.

We then map out Customer Journey Map based on our research phase to identify possible opportunities for improvement.

Defining our design goals

We then set our core objective for the app redesign:

  1. Streamline and simplify the core user experience for booking facilities and buying a gym and swim passes.
  2. Create a consistent and coherent user interface across all screens of the redesigned ActiveSG app.

Design Phase

Solving problem #1: New Information Architecture

We proceeded with content audit, card sorting and tree sorting in attempt to solve the navigation pain points, as highlighted in the Discovery phase.

The new information architecture was refined after the card sort results:

  1. My Passes (2.1) was brought out as a separate section so that our personas (Dorothy and Syafiq) can access them easily when they reach the gym/swimming complex.
  2. My Wallet (6.1) was also separated from Shopping Cart as users should be able to top up credits even before accessing the cart.

However, they are taken into consideration for cross linking.

Buy Now or Book Now?

Our first tree test task was “You want to book a badminton court to play with your friends.” and we were shocked to find out users could actually fail.

As I went to find out the problem, my friend who chose the ‘wrong answer’ told me she was scanning for “Book Now”, whereas “Buy Now” didn’t make sense to her.

That made perfect sense to us as we made sure we used the correct terminology during the next stage.

Solving problem #2: Unnecessary information on the homepage

We started out with sketching in paper so that we can define the important elements in the homepage. Our decision was to keep only helpful stuff in the homepage and reduce all the clutter it previously had.

Sketching > Wireframes > Final Prototype (left to right)

After we reach an agreement, we transferred the lo-fi wireframes to Adobe XD to have our first round of Usability Test.

Solving problem #3: Booking process pain points

Current app does not have a ‘Suggest Nearby’ function to help users find alternatives if they miss their booking slots. Therefore, our proposed solution is to have a button readily available to access the information quickly.

Time slots confusion

Wireframe > Hi-Fi Prototype > Final Prototype (from left to right)

Wireframe stage
New or infrequent user actually wasn’t sure how to book a 2 hour time slot.

Hi-Fi prototype stage
We added the note “Each start time represents 1-Hour slot”, but our users still faced the same issue and we verified it with our users as the font being too small or in a blind spot.

Final prototype
We decided to change the slots to indicate the actual time range so that we don’t sacrifice the space for the instructional message and provide direct clarity instead.

Weekend/Weekday passes

Wireframe > Hi-Fi Prototype > Final Prototype (from left to right)

Wireframe stage
Users chooses Child/Adult/Senior Citizen pass type first and tends to ignore Weekday/Weekend options.

Hi-Fi prototype stage
We made Weekday/Weekend pass buttons larger and centralised because users gave feedback their eyes scan from the left to right. However, failure to notice the buttons were still apparent, which our users mentioned they notice the larger pass types first.

Final prototype
To solve the issue, we split the process so that users have to choose weekday or weekend pass first, before selecting the number of passes they need.

Delivering the result

To have a form of quantitative metrics, we used the System Usability Scale to compare the current and redesigned app and the results were impressive.

Our redesigned app had an astounding score of 90.5 versus the current app at 38.214.

I attribute the success of the redesign to my team mates as we worked together with great synergy. There was no lack of communication and our goals were aligned.

To the committee of ActiveSG, do hit us up if you would like to discuss about adopting our redesign!

Link to our prototype:

Link to our presentation:

Next Steps

There’s actually no finish line to the redesign.

  • While we were doing research, we identified a secondary persona who needed a form or matching up with other sports enthusiasts. This was not considered for this round because we had to focus on the core feature of the app instead and deliver a Minimum Viable Product (MVP).
  • We will definitely want to explore that route and see how we can integrate that feature into our redesign.
  • Micro interaction animations is also something we would like to explore so the app doesn’t just look only functional.

Further reading: Personal tips for success in impromptu interviews

Considerations for impromptu interviews

  • Being abrupt and possible disturbance to their activities might deter them from accepting our questions.
  • With our visit being late, there was a concern of time as our participants may need to get home or have their meals after.
  • Interviews always seem to be a smokescreen for sales purposes.

Tips and tricks I used:

  • Have a proper introduction and be as genuine as you can — Start with “Sorry” worked miracles, as a classmate provided this tip.
  • Informal questions without step by step structure — Impromptu interviews make it challenging, make questions direct and straight to the chase.
  • Incentivisation — Provide them with small rewards for assisting you and be appreciative. The senior generation loves NTUC FairPrice vouchers!

Redesigning ActiveSG App — A Case Study was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link


Please enter your comment!
Please enter your name here