UI/UX Design

Swisse

Vitamins

Australian Wellness

More Videos

Location

Melbourne, Australia

 

Brief

Finalise UI and UX design to professional, production standard desktop and mobile website for Australian wellness and pharmaceutical brand Swisse' mobile and desktop website. Including the basic layout along with the site's snack-bar icons. Apply correct and scalable typographical elements so as to be able to scale properly from desktop to tablet to mobile device.

 

Tools

Figma, Adobe Photoshop, Adobe Illustrator

Swisse is a vitamin, supplement, and skincare brand. Founded in Australia in 1969 and globally headquartered in Melbourne. The Swisse vitamin and supplement product range caters to all stages of life – from pre-conception supplements for men and women, to infants, children, teenagers and adults of various ages to the elderly. Swisse multivitamin products are unique in that they were the first products targeted to gender and specific age ranges globally.

 

Swisse had created a brand new marketing campaign involving an online video campaign starring Chris Hemsworth on to of a complete rebrand of their brand identity. My responsibility was to improve the Swisse UX design which had been created by a recently departed designer. The creative director was keen to have be on board as apparently, "nobody was creative," at the agency. The overall impression was that the UI design was not proportional so that was my main concern. The project was ultimately cut short due to the Covid-19 pandemic.

...We pride ourselves on the development and manufacture of scientifically validated products...

Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.

A key goal of the project was to realign the Swisse website to a scalable 8-point grid, creating a more consistent and modular design system across all pages. The redesign aimed to enhance visual hierarchy, streamline layouts, and improve overall usability for users. Unfortunately, the project was cut short due to the 2020 COVID-19 pandemic, which halted further development and implementation.

 

Given more time, additional refinements would have focused on iconography, ensuring all icons had rounded corners to improve visual harmony and readability. The project encompassed all aspects of the Swisse website experience, from the desktop interface to tablet layouts and mobile-responsive design, demonstrating comprehensive skills in UI/UX design, responsive web development, and scalable design systems for a major health and wellness brand.

Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device

Similar Projects

© MMXXVI  Rory J. Murphy | All rights reserved.

Departments

Rory J. Murphy Logo - Click to go back home
Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device
Envelope icon linking to an email address for quick and easy contact.
Clickable home icon to inicate to the user that tapping this will take them to the homepage
"Product icon (active) – Currently browsing our print-on-demand store.
Product icon linking to our print-on-demand store page for browsing and purchasing items.
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Testimonials icon showcasing customer reviews.
Active contact icon indicating you are on the Contact page
Contact icon directing to the social and contact page.

Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device
Clickable home icon to inicate to the user that tapping this will take them to the homepage
Arrow icon; click to go back to the previous page you were on
Mail icon providing a direct link for users to contact the website via email.
Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device

Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device
Clickable home icon to inicate to the user that tapping this will take them to the homepage
Arrow icon; click to go back to the previous page you were on

Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device
Active contact icon indicating you are on the Contact page
Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device
Clickable home icon to inicate to the user that tapping this will take them to the homepage
"Product icon (active) – Currently browsing our print-on-demand store.
Product icon linking to our print-on-demand store page for browsing and purchasing items.
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Testimonials icon showcasing customer reviews.
Active contact icon indicating you are on the Contact page
Contact icon directing to the social and contact page.

Close-up snippet of the swisse homepage showcasing the strapline and vibrant design emphasizing health and wellness. This is the before image.
Close up of the Swisse website, this has been converted to obey the 8-point grid and isplays supeior compoistion, spacing and sizing.
Mobile UI design system with navigation, shopping cart, and user interface icons displayed on three phone devices
isometric view of mobile screens displaying different sections of the website interface, showcasing user-friendly design and navigation.
tablet and mobile comparison of the Swisse website, showcasing responsive design with consistent layout and health-focused visuals across device