UX/UI DESIGN

Swisse

Vitamins

Swisse

Vitamines

- Herbal Remedies -

See More

Location

Melbourne, Australia

 

Brief

Finalise UI and UX design for production standard desktop and mobile website.

 

Tools

Figma, Adobe Photoshop

 

Sectors

Health supplements, nutraceuticals, vitamins, herbal products, mineral supplements, beauty supplements, sports nutrition, weight management, immune support, digestive health, bone and joint health, sleep and relaxation, cognitive health, skin health, pregnancy and prenatal care, children's health, men's health, women's health, anti-aging products, wellness and lifestyle products.

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 Ultivite 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 and involving an online video campaign starring Chris Hemsworth as well as rebranding their website. 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...

Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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 large part of my intention was to realigning everything to fit into a more scalable 8-point grid. This was all cut short by the 2020 Covid-19 global pandemic which unfortunately but a halt to the entire project.

 

Given more time I would have looked at the icons more, so as to make sure everything had a rounded corner which would have been easier on the eye.

 

The project covered all aspects of the website gamut, scalable from desktop site through to tablet site and finally to the mobile version of the site.

Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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

Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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
Rory J Murphy logo linking to the homepage, displayed in the footer
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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 button to send a direct email
Pressed envelope button; composing and sending a direct email now active
Arrow icon; click to go back to the previous page you were on
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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 home icon in mobile navigation indicating you are on the homepage.
Home icon button for mobile navigation to return to the homepage
Active About icon in mobile navigation indicating you are on the About page
About icon button in mobile navigation to visit the About page
Highlighted product icon in navigation indicating you are currently on the Product page
Product icon; click to browse and buy items on the Product page through print-on-demand services
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Praise icon; click to visit the Testimonials page and read client reviews
Active contact icon indicating you are on the Contact page
Contact icon button to visit the Contact page and connect via social media
Arrow icon; click to go back to the previous page you were on
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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 home icon in mobile navigation indicating you are on the homepage.
Arrow icon; click to go back to the previous page you were on
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
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
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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
Rory J Murphy logo linking to the homepage, displayed in the footer
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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
Laptop displaying the swisse homepage design with vibrant visuals and user-friendly navigation for health products and wellness.
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.
Compilation of UI elements for website navigation snack bar, displaying icons and interface options for seamless user access."
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
Rory J Murphy logo linking to the homepage, displayed in the footer
Active home icon in mobile navigation indicating you are on the homepage.
Home icon button for mobile navigation to return to the homepage
Active About icon in mobile navigation indicating you are on the About page
About icon button in mobile navigation to visit the About page
Highlighted product icon in navigation indicating you are currently on the Product page
Product icon; click to browse and buy items on the Product page through print-on-demand services
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Praise icon; click to visit the Testimonials page and read client reviews
Active contact icon indicating you are on the Contact page
Contact icon button to visit the Contact page and connect via social media