top of page
My Role
Timeline
Tools
Methods
(Team of 4)
2 Weeks
Figma
User Interviews
17 Feb 2021 - 02 Mar 2021
Mural
Affinity Mapping
User Researcher
Heuristics Evaluator
Google Suite
Heuristics Evaluation
Competitive Analysis
Sketcher
User Persona
UI & Interaction Designer
Usability Tester
Customer Journey Mapping
Problem Statement
Feature Prioritization
User Flow
Wireframes
Interactive Prototypes
Usability Testing
Project Summary
ActiveSG have been rated very poorly on Play Store and App Store. Our team redesigned it with an aim to provide a more pleasant experience for user to book ActiveSG facilities. In addition to enhancing the visual outlook of the interfaces, we also introduced new features to provide ease of logging in, efficient searching of products, and navigation to cart.
The Problem
We find that the Web and App worked very differently for its main purpose - users find it difficult to book facilities/programmes. Therefore a balance must be struck between these to make them come together, making navigation intuitive without compromising quality.
Design Process
The Double Diamond Design Process Model was used to help our team to have a common understanding towards our goals and also as a means of effective communication. Besides, it represents a process of exploring ActiveSG's issues more widely and deeply with divergent thinking, and then taking focused action through convergent thinking.
Discover
Discover
What's wrong with the existing ActiveSG platforms?
Possessing only surface information about the platform from online research wasn't sufficient to further the study. We then conducted In-Depth User Interviews and Affinity Mapping with 8 existing ActiveSG users to identify the their common motivations and pain points. We found several key insights as below.
Using the Jakob Nielsen's 10 Heuristics, we evaluated the current App and Web and rounded up to 5 problem areas on each platform. Together with Usability Testing, here are some of the issues we found:
Users have to guess-check slot availabilities
There is no hint on the product listing that states the unavailability of the facilities. Users are required to enter the individual product pages to check if the slot is available
Recommendations:
Allow users to select multiple venues for easy comparison, as well as removing slots that are unavailable on the listings
Same picture used for every product listed
This is providing incorrect visual information to the users searching for a facility to book
Recommendations:
Together with other essential information that should be on the listings, each product should also be accurately represented by the picture
What can we learn from the competitor brands?
With the use of the 3 Competitive Analysis methodologies: Task Analysis, Pluses & Deltas, and Feature Inventory, as well as using Comparative Analysis, we compared and looked for gaps to fine-tune ActiveSG’s Unique Selling Points (USP); and here are some takeaways from this analysis:
As ActiveSG is not lacking in its feature inventory, refinement in existing features is necessary to keep up with its competitors and users' expectations, specifically towards the 2 features as shown below:
Submitting a feedback form
ActiveSG's competitors offer a way for their users to get in touch with them directly to resolve issues or provide feedback. This could be a way to solve users' frustrations instead of them ranting it on Play/App Store.
Access to facility rates
Unlike the competitors, ActiveSG requires their users to go to checkout page to be able to see the rates. Our recommendation is to include the rates in the individual products page.
Define
Who are our users?
The findings that were garnered from the Discover stage informed our User Persona as well as the Customer Journey Map to develop a clear understanding of target users as well as keeping the team aligned and focused on issues that mattered.
“Arif needs an efficient way to look for and book sports facilities nearby so that he can include his workouts as part of his schedule.”
Define
Which features to fix first?
With overwhelming insights garnered from the Discovery phase, on top of our time and logistical limitations, Feature Prioritization was used to plan out the order of priorities to be worked on. In addition, there are a few new features that we planned to implement in Prototype v1.0:
With our target users in mind, together with our research insights, a new User Flow was crafted to aid us in our next steps in Ideation and Wireframing.
Develop
Develop
Developing the Design System & Style Guide
Initially referencing from established design principles - Materials.io. Meticulously utilizing space, colours, typography & grids to ensure that our product brings unified experience to our users across various platforms. Our shared library was then adjusted along the way to fit the needs of our design process; enhancing the workflow among the group.
Streamlining the User Interfaces
Brainstorming with the team helped us come up with a variety of ideas. We started with Hand Sketches to quickly visualize concepts and ideas for the redesign. We then rolled out our low-fidelity re-design based on the findings from the 'Discover' stage.
How did we allow Arif to see only available slots?
Slots that are full or unavailable will not be shown in the listings
How did we differentiate the individual cards on the listing?
To make it unique, pictures will be accurately depicting the actual facility/programme. Essential information is also now provided such as distance, dates, and venue
App
Web
How did we make programme searching easier for Arif?
'Filters' and 'Sort by' was added to allow narrowing down to specific searches
How did we provide recommendations to Arif?
On product pages, there will be recommended products at the bottom of the page based on proximity
Deliver
Deliver
How did we validate our proposed designs?
Usability Tests were conducted with 8 different participants on our Interactive Prototypes v1.0 and v2.0 to validate our design based on the 4 tasks below.
-
Login to ActiveSG
-
Book a swimming pool slot for this weekend
-
Book a Zumba class
-
Submit a feedback form
After the Usability Test on the Prototype v1.0 with 8 participants, there is another issue that arose - users have difficulty in knowing the differences between the 2 types of credits that ActiveSG uses (ActiveSG$ v.s. MyCash).
Solving the unforeseen problem
Focus was placed on the main navigation of the platform but many users were confused by the different currencies in ActiveSG instead!
A Quantitative Research method was deemed suitable to solve the issue of the naming of the credits that we had identified from the Usability Tests. A Survey was conducted using Google Forms.
The current cash account (the amount you top up into) is called MyCash. Which new name should be given for better clarity?
42.2% preferred “MyCash” (original) to represent the topped-up credits
The current free $100 credits (given by Government) is called ActiveSG$. Which new name should be given for better clarity?
73.5% preferred “ActiveSG Credits” (new) to represent the free credits
Design Iterations
App
Web
Results
Results
How did we measure the outcomes?
Iterations were done to solve different issues - from more significant to less significant ones (according to functionality, task completion and understanding of the UI of the App/Web). We documented the findings of each usability test.
We were happy to see huge improvements in the Task Success, SEQ and SUS score for both App and Web with each test:
Web
Existing vs Prototype v2.0
App
Existing vs Prototype v2.0
System Usability Scale: 40.63 to 85.63
System Usability Scale: 25.25 to 88.57
Retrospective
Retrospective
Next steps
-
Information Architecture
Assess other parts of the Web to understand how user explores / navigate the site
-
Brand Colour Usage
Relook into into using red; even though the brand colour represents passion but it is also commonly associated with error messages
-
ActiveWallet
Look into refining the UI of ActiveWallet pages and better integrate merchant programs
Reflections
-
Through this, I see the importance in the first phase of the double diamond design process model, because it sets the directions clearly for and aligned the entire team throughout the project
-
Working in a team made me learn about one another's differences and work style through effective communication (using Slack as primary means of communicating), active listening as well as compromising
-
Having different opinions in a team may or may not be a good thing, hence we learnt that a consensus is necessary for us to progress in each phase to address concerns
-
I learnt how many other possibilities can be illuminated by conducting team brainstorming exercises
bottom of page