Web design

Project info

Cavalio has been administered 3 different brands on three different websites with 3 different cms systems. The task was to gather these brands under one brand - CFVM: Centrum för ViktMinskning.

Project brief

Design and build a digital platform that could be easily be managed by CFVM. They should be able to create and edit content. Generating leads was one of the main goals of building the site.

What needed to be done

  • UI/UX of the site
  • Create the admin and structure of the platform
  • SEO optimisations
  • Setup events for leads

Challenges

When combining multiple brands into one there is a few things questions that needs to be considered when building the UI/UX.

  1. Create a consistent structure but keep the brands separate.
  2. Make sure that the user knows where they are on the site.
  3. Give the user a clear navigation between brands.
  4. Highlight the umbrella brand throughout the site

Creating the structure

The overall structure would stay he same all over the site and the typography would also be consistent.  Playfair Display would be used for the headings and Open Sans would be used for the copy and other type elements. This forced us to use other elements to separate the brands.

The main horizontal menu was the main navigation between the brands and a left vertical nav was the navigation within the brands. These navigations are sticky on both desktop and mobile to give improve the navigation between pages and reduce the bounce rates. These section navs are branded with both the logos for each section but also with the primary colors as background to strengthen the identity for each section.

We gave some elements in the gastric ballon sections rounded corners and the main headers the primary color to make them feel softer in contrast to the surgery section that needed to feel more clinical.

Tools used

  • Sketch/Figma
  • Photoshop, illustrator
  • Webflow cms

+ Google services. Analytics, Search console, Tag manager

Typography
Colors
Navigation
Navigation mob
Start page
Influencer page
Blog page
MObile pages
Next case