ReVITAlise your health
Be a better version of yourself
Premium Web Design
Engaging in a philosophy and a mission of “Enriching Lives” for more than 70 years, VitaHealth believes that health is absolutely more important than wealth. The brand is also at the forefront of providing a comprehensive range of high-quality and premium health supplements to meet the diverse health needs.
All of VitaHealth’s products are formulated with carefully selected ingredients with proven effectiveness, using the latest scientific research and cutting-edge technology.
Recognising that the revamped website should be clearly aligned with Vitahealth’s brand focus, we included consistent colours, fonts and logo placements that correlates with all regions that VitaHealth covers such as Singapore, Vietnam, Thailand and China. By doing this, users instantly associate the revamped website with Vitahealth, which is essential in garnering trust and staying loyal to VitaHealth.
We also kept the revamped website simple and accessible so that it feels like a natural extension of VitaHealth that isn’t complex, resulting in a pleasant user experience. The revamped website is also infused with personality in the form of custom animations and optimistic lifestyle visuals that make the website and Vitahealth feel more approachable.
By reinforcing Vitahealth’s brand profile through meaningful and current content such as product features, authoritative blog posts and many more, we kept the revamped website relatable and relevant. Moreover, we utilised modern design trends to ensure efficiency and user experience in order to keep up with the competitive online market.
Additionally, we took into account responsiveness while emphasising technical flexibility and taking the user’s device into account. Language translation aspects were also considered so that the revamped website is easily bilingual for each region that VitaHealth operates in.
GIF Website Banner
Above the fold
Understanding that there we only 3-5 seconds to capture a users’ attention and send out a brand message, we used a striking image of a 50-60 year old man in the above the fold view to dispel the notion that being old/elderly doesn’t necessarily mean being immobile and weak. Users who land on the homepage will be treated with a seamless animation of the elderly man being energetic via the banner. This further illustrates the vibrant lifestyle that the elderly can still lead at a prime age, all thanks to Vitahealth products.
This notion is further complemented by an attractive copy (ReVITAlize. Reinvigorate. Recharge for a healthier, happier you!) resulting in reaffirming Vitahealth’s role in giving energy, vigour, and power to customers who need a “power-me-up” in their life.
To highlight the importance of how Vitahealth can positively affect its customers, the revamped website places more emphasis on youthfulness and vibrancy, serving the purpose of capturing the users’ attention.
With the perfect partnership of product visual, attractive colours and compelling description copy supplemented by concise benefits, users’ have a clear understanding of what each best-selling product wants to promote as well as firming up the users’ purchase decision.
Loading Icon (video)
When the website page is loading or refreshing, VitaHealth’s logo will be affixed in the centre of the page with the white ‘V’ in the orange box slowly growing from the bottom down. To signify the successful loading or refreshing of the website page, the logo icon will be fully formed before transitioning.
A variety of aesthetically pleasing hero banners are used on VitaHealth’s website. Considering that VitaHealth wants to highlight a positive and energetic aspect, each hero banner’s layout follows a revitalising superimposition of cheerful block colours with various characters portraying happiness and youthfulness, so that it relates to a diverse target audience ranging from children to the elderly is easier.
This website design is also largely motivated by the usage of soft vectors, beautiful icons and soft rounded typefaces whilst retaining the branding identity of Vitahealth with the integration of colourful elements.
Key Product Feature
Product Mouseover Effect
Recommended Products Feature
Appealing to users who haven’t fully formed their purchasing decision, the Recommended Products section serves to persuade them to move that particular product into the cart. These products are tagged at the bottom of every article page when a user requires more information about a particular product, or if he/she just wants to find out more. If the user wants to buy the product, he/she simply has to pull up the Recommended Products section and add to his/her cart instead of heading to the full product feature.
Instead of employing a Navigation bar that follows the user as he/she scrolls the website, VitaHealth went with a Navigation bar that disappears as the user scrolls down the website. The Sticky Navigation reappears when the user scrolls to the top of the website again. This is largely due to the fact that VitaHealth did not want a Navigation bar that would obstruct or distract a user’s vision as he/she explores the website.