Sport Singapore’s core purpose is to inspire the Singapore spirit and transform Singapore through sport. Through innovative, fun and meaningful sporting experiences, our mission is to reach out and serve communities across Singapore with passion and pride.
ActiveSG is SportSG’s portal for booking public sports facilities and sign up for public sporting events.
User's Goals and Needs
We compiled the user's thoughts and emotions while interacting with the app. Then translated it into a journey map. The timeline indicates how the emotional state changed during each of the interactions. After that we came out with the HMW statements to optimise the experience of it.
How might we help users find the most suitable venue and time to play their game/exercise?
How might we streamline the navigation of a regular user's journey such that her experience is as efficient and to the point as potentially possible.
Customer Journey Map
Success with A Heart
Goals
Signals
Metrics
Happiness
- User satisfaction.
- Number of new users download.
- Ratings and reviews from users.
- Referral rates (the number of app download).
Engagement
- Connecting with people of the same industry.
- User activity.
- Amount of feedback / reviews from users.
- Number of booking made.
Adoption
- Features / components implemented successfully.
- User onboarding.
- Number of components used in new design.
- Number of time users booked the same facilities within a period of time.
Retention
- Daily search.
- Active users.
- App usage time.
- Number of pass purchased.
Task Success
- User goals completion.
- Users give positive feedback.
- Consistency in the implementation of the design system.
Success Metrics Using Google's HEART Framework
Defining the Key Design Principles
Before we proceeded to brand identity, we first defined what our key design principles should be. We turned up with some key principles and structured them into 3 main things such as Motivational, Intuitive, Inclusive and Human.
Key Design Principles
Tone and Voice Determination
For tone and voice to express the core brand values, it’s more casual but not really serious nor funny. Also enthusiastic enough to be between irreverent and respectful. It reflects more of being friendly, helpful and inclusive. Once we mapped the voice to emotional needs, the results occurred as thankful, friendly, encouraging, attentive and sincere.
Tone and Voice
Color Pickups
The colors were mainly selected from the Sport Singapore and ActiveSG scheme. We also filled up with some other colors as secondary. They all aligned to the organisation’s branding. Variety of colors represent diversity and inclusivity. It's like vibrant, hype and ready to move vibe. Dark theme will be used as an app background hence those bright colors will pop up as excitement and with full energy!
Dark mode gives a break to our eyes from looking at bright screens all the time. It does save some battery and motivates us in terms of visualisation.
Color Pickups
Typography and Iconography
The typography focused on readable, consistent, modern and clean. Headings are used with Proxima Nova and Cereal for buttons and body texts.
Usage of Typography
Since our design will be on a dark theme, we decided to use white outline icons so that the icons will be recognised obviously. It gives consistency on design as well for not mixing the solid and outline style icons.
Usage of Iconography
Components Prioritisation
We scanned through the app and identified the key components. Once noted down all the identified components, we prioritised them on the 2 by 2 matrix which is based on frequency and complexity. We tried to do most of the components within the green box to have significant improvement to the UI.
2 by 2 Matrix
Anatomy of a Component
Carousel Slider
Pattern — Larger font size title for active item and normal font size for inactive. The image on top followed by the labels.
Transition — Enlarge box item and the distance label only appears at active stage.
Flexible — Long text will break into next line instead of truncating.
Carousel Slider
Low-fidelity Wireframes
We arranged the Wireflows on the idea of the facility booking process. Then we designed the Wireframes in order to be on the same page for everyone before we actually come out with the prototype. The Wireframes served great help from not deviating our thoughts.
