Health Promotion Board - Nutri-Grade Page Redesign
Nutri-Grade “grades” your drinks
As part of the second-year campaign for Nutri-Grade, our task was to revitalize the existing Nutri-Grade page on Healthhub.sg to make it more user-friendly and easily understandable, in line with the campaign's relaunch. This would allow consumers to access relevant information easily, assisting them in making informed decisions about their beverage choices.
​
I worked closely with Digitas, a UX team from Publicis Groupe's Experience agency. My responsibility was to reassess the user journey, produce high-fidelity wireframes, and incorporate micro-interactive elements that are in harmony with the brand's voice and new content.
My role
User Research, UI & Visual Designs
Year
2024
The research was conducted in two parts, with the objective of obtaining targeted feedback. The participating group consisted of five individuals spanning a general age range of 16 to 40.
Old website
Part 1: Focus Group
objective
To gather data on group interaction and pinpoint common behavioural patterns, as well as to understand shared personal experiences and viewpoints, and to introduce fresh ideas and perspectives.
Part 2: Individual
objective
Delve deeper into user interactions, identifying pain points, and conducting usability testing.
Logic flow is not intuitive
Lack of visual aid/ Too much text
Potential Consideration
Relook at the flow of content to give more context and clarity to consumers. (e.g. starting with “What is Nutri-Grade”, followed by more details and examples).
Potential Consideration
Include the use of interactive visual aids to ensure the information is easily digestible and engage the user’s interest.
ABCD beverage examples
Potential Consideration
Unable to retain information besides less sugar and less fats
Include the use of interactive visual aids to ensure the information is easily digestible and engage the user’s interest.
Available useful tips
Potential Consideration
Potential Consideration
- House the Nutri-Grade section in a dedicated tab on the menu bar to allow users to better focus on content without distractions.
​
- Consolidate Nutri-Grade A & B (directory) within the same tab for easy navigation.
To include examples of ABCD beverages for consumers to better understand how they can use Nutri-Grade to make healthier beverage choices.
Two critical points to consider when designing the user journey and content:
1. Easy to read
2. Content is more applicable
Dedicated Landing Page
Nutri-grade Mark will have a dedicated page to consolidate all nutri-grade information and beverage list under the Nutri-Grade tab.
Chunking of Information
Transformed into easily digestible information to enhance user-friendly scanning and minimise cognitive strain.
Nutri-Grade Tabs
Break down information of each individual Nutri-Grade with corresponding information.
Highlight key information
Highlighting critical data enhances both user scanning and retention.
Prominent User Task
Emphasising the Nutri-Grade Directory to boost page visibility and conversion.
Hero Banner
Implementing a banner with key call to action to lead user to key task and pathway for returning users to the Nutri-Grade Directory.
Nutri-Grade Products
Beverage Samples to help visual aid.
Trivia
Call-outs for helpful bite-size information
FAQs
Long form information will be housed under FAQs
