National Steps Challenge is bigger and still far from appealing
Disclaimer: Writer is a relatively new UI/UX designer who still has a lot to work on. All suggestions are welcome!
The Health Promotion Board (HPB) of Singapore has recently rolled out their 4th edition of the National Steps Challenge (NSC), with the slogan:
Step up to our biggest season ever!
The NSC promotes a healthier lifestyle among Singaporeans as it encourages people to step out of their homes and walk more. Free step trackers are available for collection at various carnivals and booths across the island.
The NSC requires participants to download an official HPB app named “Healthy 365” to pair and sync with the data recorded on the step tracker.
Ideally, there would be hundred thousands of people using the app on a daily basis trying to synchronise their data and redeem vouchers. That means a sizeable proportion of the population is using a mobile application with User Interface (UI) and User Experience (UX) that have some fundamental violation of design principles.
Can we do something that will benefit their eyes and health? Hmmm…
UI/UX Analysis
This is a screengrab of the dashboard for the Healthy 365 mobile application.
It has out of proportion icons and an unnecessary placement of advertisement at the top.
As a dashboard screen, it should display the most relevant information without scrolling down.
The tabs at the bottom requires the user to swipe left and right to access more functions, which is not the most intuitive feature.
You would notice the camera button that is placed right in the middle of every single screen. On a use case point of view, i don’t think we will need to snap a photo or scan a QR code that often throughout the entire user journey.
In the rest of the article, i will attempt to redesign the iOS version of the Healthy 365 app and retain the use cases.
1. Loading Screen
Shifted the logo and tagline to the centre of the screen and changed the overall color and style.
2. Dashboard
Changed the overall colour scheme of the application to the HPB colours.
Shifted 3 tabs to the top as shortcut for quicker access, removed the tabs at the footer completely. Renamed ‘History’ as ‘Statistics’.
Rearranged the advertisement all the way to the bottom. The active challenge, healthpoints and rewards are viewable at first glance without having to scroll.
Removed iBeacon icon which doesn’t seem important enough (I could be wrong). Placed the notifications icon at the top right corner instead.
The top left corner is replaced by the profile thumbnail and it also serves to expand the side menu.
This newly designed side menu is accessible from any of the tabs, so it will be easy to navigate around the application.
As the camera function really meant a QR scanner, i’ve chose to use another icon to represent a scanner instead of a camera icon.
I removed the profile tab and replaced it with a dedicated area at the top of the side menu like most other apps that have customised user profiles do.
The healthpoint is also viewable which means that the user can have a quick glance from any screen and also click in for more.
Renamed “Apps” as “Tracker Device” because the tab allows the user to change the tracker paired to the application.
3. Syncing / Refreshing
I think the original syncing animation feels alright, perhaps just a little squeezy. And to be honest, I don’t have a much better idea.
4. Notifications
In the original design, the text are too close and decreased the readability despite the color difference and border line. Proximity theory should be applied to associate the content, but the original designer took it too seriously?
I tried to keep the notifications journey concise by keeping everything in a single screen when user clicks to view the message.
Added the function to mark all notifications as read to save the hassle from opening the messages one by one. For the OCD people who cannot stand the notification badge, like myself.
5. Rewards
The double bars of information seemed a little out of place. I couldn’t really understand the ‘Get 20HP!’ as it looked and sounded like a call-to-action, which it isn’t.
I tried to make the ‘20 HP’ look less like a call-to-action button and also redesigned the whole quantity input form. It will calculate and show the required Healthpoints simultaneously as the user changes the voucher quantity.
Kept the terms and conditions text hidden until the user expand them to read.
6. Healthpoints
I couldn’t really understand what are the use-cases for this screen as it has numbers as well as buttons. Two of the buttons actually goes to two other repeated screens (Redeem Healthpoints to Rewards screen and Healthpoint History to statistics screen), making the user flow a little confusing.
I tried to fill up the screen by adding a donut chart that sums up the healthpoints left for the user. Replaced the 3 buttons with card links instead to blend in with the design above.
Separated TransitLink from TapForMore and thus removing the need for checkboxes and declutter the screen.
7. Scanner
That barcode scanner is just… i’m speechless. I had to toggle it to realised its for the flashlight.
Tried a roulette style for the switching of scanner modes. Works similar to the native camera app. Added some markers and frame to show that its a scanner.
8. Reminder / Pop-up
The one thing to avoid is to have different style for the same experience. The Healthy 365 application has different kind of pop-ups on various screens (at least 3 different look), which shows the inconsistency of the design.
To be continued…
9. Deals and Discount
10. Challenges
11. Diet Journal
12. Statistics
13. Nearby
14. Tracker Device
15. Profile
16. Partners
17. About
