Healthy 365

Redesigning the Singapore Health Promotion Board's healthy-living app

↓ View
context context context context context context context context context context context context context context context context context context context context context

Overview

The Health Promotion Board ➚ is a statutory board that promotes healthy living in Singapore. It sets out to empower Singaporeans to take ownership of their health through a range of policies, programmes, and initiatives.
Healthy 365 ➚ is an app developed by the HBP to nudge Singaporeans towards healthier behaviours through features like diet and steps tracking and providing incentives for making healthier choices.

Role

This project was undertaken as part of my User Experience Design Immersive Course at General Assembly Singapore. I was in a team with two other UX design students, taking a lead on this project in research synthesis, journey mapping, and visual design. I also helped my teammates in other aspects like user interviews, user testing, and service blueprinting.

Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach Approach

Approach

1. Improving core functionality

During our discovery process, users highlighted several common issues including complicated navigation (featuring a rather unconventional navigation bar that scrolled horizontally), a lack of a centralised location for app functions, and inconsistent implementation of feedback for triggers across the app (for example, deletion of items prompts a confirmation in some parts of the app but not others).

Redesigned Healthy 365 homescreen showing bottom navigation bar and a slide-out menu

Homescreen showing main navigation bar and side menu

Navigation

The poor discoverability of app functions was one issue we tackled by implementing a combination of a navigation bar, which affords quick access to the most commonly used features in the app, and a hamburger menu that provided access to all functions of the app in one place. The redesigned dashboard also located some functions at the top of the homepage for quick access.

Our app design also included multiple ways to get users to the same destinations, providing considered redundancies and allowing more flexible use of the app. For example, users can access the fitness and diet journals from the dashboard, but also from the side menu; users can also log their meals directly from the dashboard, or do so in the diet journal.

A selection of modals from the app, showing feedback, confirmation, and warnings.

Additional confirmation modals

Providing Feedback

Another aspect we wanted to tackle was to provide more considered feedback when users take in-app actions. We relooked the use of dialogues in the app, as well as refined microcopy for key actions to a variety of ends, like providing more friction for destructive actions, providing feedback to certain actions, as well as to direct users to related parts of the app.

2. Redemption and rewards

A key insight we gleaned from our interviews was that a majority of users were using Healthy 365 for the financial incentives, and the use of other functions in the app was largely in service to these ends. Users, however, also griped about the convoluted process of redemption – highlighting issues like a poorly-designed rewards page, and a complex redemption process on site.

Overview of the redemption process

Rewards Page

While the rewards page was one of the most-accessed features in the app, it had no easy means of access in the original app – users had to scroll down on the dashboard and choose between two easily-confused links.

We made the rewards page easily accessible from the main navigation bar and also redesigned the rewards page to be a centralised location to access all Healthpoints- and redemption-related functions.

Redemption process

The strategies we employed to make the rewards process more pleasant and intuitive – all the way from exchanging purchases for Healthpoints to on-site use of redeemed vouchers – span service design and interface design:

  • Extending the validity of QR codes – which currently expire at the end of the day – to as little as an additional day to provide more flexibility for users who might forget to scan their codes immediately
  • Redesigning the QR scanner to be more frictionless and easily-accessible
  • Allowing users to cancel the loading of vouchers and removing a forcing function that redeems a voucher whether or not it has actually be scanned at the POS
  • Possibly a more robust back-end that immediately detects the use of, and prevents repeated use of, the code to be scanned at the point of sale
  • Provision of in-app confirmation when a redemption is successful, with easy instructions to reach a customer service representative if needed.
A caveat about school projects
Wallet section of the rewards page, showing vouchers in your walled and already-redeemed vouchers. A floating panel at the bottom shows the amount of Healthpoints currently available.
Redemption screen in the rewards page, showing vouchers available for redemption, as well as a details page of a voucher.
QR code scanner showing a target areas for users to position their QR codes, with a highlight indicating if a scan is successful.
Screens showing the process of redeeming a voucher in a physical location, with a prominent "use now" prompt and a way to undo accidental use of vouchers.
A screen showing a confirmation page for the successful use of a voucher.

3. Considered and deliberate feature design

Healthy 365 relies heavily on financial incentives to motivate its users, and many of our interviewees noted that they don’t use the other features in the app owing to a lack of interest, or having other apps that serve their needs better.=

The other available, and potentially useful, functions (like the diet journal and event pages) seemed tacked on and not properly fleshed out. To this end, we decided to redesign some of these “secondary” functions in Healthy 365 so that they at least feel thought-out and deliberately designed.

"Nearby" section of the app, showing nearby events, food, and facilities.

Nearby activities

"Diet Journal" section of the app, showing a summary meal log and the process of logging a meal.

Diet journal

"Diet Journal" section of the app, showing an analysis of caloric intake.

Calorie counter

reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection reflection

Thoughts

One thing that we knew we were missing in this project was internal research. Just getting public facing information on HPB was sufficient for the project, but we felt it would’ve been immeasurably more useful if we had more insight in HPB’s efforts thus far, any parallel campaigns or even financial information. This information might have helped shape the direction of the product, or in the least, give us some insight into the workings of HPB, or helped us quantify certain success metrics (e.g., how many more app downloads, or how much more time spent in-app would be considered a good measure of success?). With access to the organisation and its stakeholders, in-depth research is definitely something that can be done with more deliberation in a future project.

On the design side, we were perhaps a bit overenthusiastic in getting things done quickly at the start, and made a few false starts that ended up not being useful to the outcomes of the project. These included a small prototype of the original registration page that fell by the wayside to vastly more important parts of the app that we determined during feature prioritisation, and a survey that we set up that didn’t end up with any significant or high-quality data that wasn’t already revealed to a higher resolution in our user interviews. It was a good (if a bit effortful) way to learn to be a bit more considered in our planning process and not to jump right into the doing before the discovering.