UI UX DESIGN

Swisse Wellness

Australian Supplements

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's 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 with a focus on wellness nd beauty.

Tools

Figma, Adobe Photoshop, Adobe Illustrator

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign

...Inspired by nature and backed by science, Swisse championed holistic well-being for over 55 years...

Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout

Swisse is a globally recognised vitamin, supplement, and skincare brand founded in Australia in 1969 and headquartered in Melbourne. With a product range spanning every life stage—from pre-conception to later years—Swisse pioneered targeted multivitamins tailored by age and gender.

Following a major rebrand and high-profile campaign featuring Chris Hemsworth, I was brought in to refine the Swisse UI/UX design. The existing interface lacked proportional consistency and structure, impacting usability and visual clarity. My focus was on improving the user journey through grid-based design, responsive e-commerce UX principles, and scalable UI systems. Although the project was cut short due to COVID-19, it highlights key improvements in user-friendly health platform design and digital transformation strategy.

Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow

BEFORE

AFTER

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.

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 for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX

Similar Projects

© MMXXVI  Rory J. Murphy | All rights reserved.

Rory J. Murphy Logo - Click to go back home
Envelope icon linking to an email address for quick and easy contact.
Vimeo logo - click to watch Rory's video projects and portfolio on Vimeo
LinkedIn logo - Rory's LinkedIn page and connect with us
Dribbble icon - click to view Rory's design work and portfolio on Dribbble

Hire Rory

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX
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.

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX
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.
Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX
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
Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX
Active contact icon indicating you are on the Contact page

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX
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.

Chris Hemsworth walking through the Australian outback in the Swisse Ultivite Men's Multivitamin commercial campaign
Close-up of Chris Hemsworth in profile at sunset with his signature autograph, from the Swisse Ultivite Men's Multivitamin commercial
Close-up product shot of Swisse Ultivite Men's Multivitamin jar and pills from the Chris Hemsworth commercial campaign
Chris Hemsworth swimming in an Australian lagoon in the Swisse Ultivite Men's Multivitamin commercial campaign
Laptop showing Swisse website redesign homepage with responsive e-commerce UX, clean navigation, and user-friendly health platform layout
Swisse website before redesign showing inconsistent typography, lack of grid structure, and unoptimized health brand UI layout
Swisse UI redesign after applying 8-point grid system with improved typography, responsive UX, and optimized user journey flow
Mobile UI design system for Swisse with custom icons, shopping cart, navigation elements, and scalable health platform UX components
Isometric mobile screens showing Swisse website UI with intuitive navigation, responsive layouts, and health e-commerce UX design
Tablet and mobile Swisse website comparison highlighting responsive design, adaptive layouts, and optimized health e-commerce UX