CLIENT

Colgate-Palmolive

ROLE

Digital Designer

TIMELINE

3 months

TOOLBOX

AdobeXD

GOAL

The goal was to redesign one of Colgate-Palmolive's European oral care brands - elmex - in German. The client wanted the site to be more modern and innovative as it had not been updated for 8 years. 

About

ELMEX COVER ABOUT.png

ANALYSIS

I needed to gain an understanding on elmex's current site layout and functionalities; so I carried out an in-depth analysis on their site and noted any issues I that I noticed:
  • Overbearing with green (from the logo)  as a background thus making it difficult to read text.
  • The logo didn't blend with the background as it had a white background to it.
  • The text fonts were not consistent in font type and size.
  • The layout of the information was not organized and had too much text in one area.
  • The images were colourful - a mix of human interaction, words and food. 

Analysis

INFORMATION ARCHITECTURE
With elmex's current website in mind, I began to restructure the existing pages so that it flows more easily:

Planning

Group 4061.png
elmex mockup 1.png
LOW & MID-FIDELITY WIREFRAMES
Now that I had established the information architecture of the elmex, I was ready to sketch the low-fidelity wireframes by hand and turn them into black and white mid-fidelity wireframes using AdobeXD; here are some of the screens below:

Sketching

HIGH FIDELITY WIREFRAMES & DESIGN SYSTEM
I made the following design system on XD for the elmex - including styles, typography, colours, components etc.

Create

press to zoom

press to zoom

press to zoom

press to zoom
elmex mockup 3.png
elmex mock up 4.png
177.png