Novacolor

B2C Marketplace

Novacolor is internationally known as a reference point for high-end architectural coatings and interior paint effects. The Company offers to architects and designers worldwide a complete assortment of textured effects and polished plasters, for interiors and exteriors, as well as wall coatings for modern or historical town settings.

ROLE: UX/UI Designer

TEAM: 2 designer, 1 PM, 2 developers

DURATION: 3 months

SUMMARY: Novacolor required a website redesign to enhance brand visibility and give their platform a more contemporary appearance. Collaborating with Novacolor's project manager, we worked on aligning content, components, and design. My role involved creating a fresh look and feel, developing a components library, and crafting a visual design style guide for both mobile and desktop devices, using the existing website as a foundation.

img.png

The approach

1.

Competitors benchmark

Run competitors benchmarks to analyze direct and indirect competitors and find inspiration.

2.

Sitemap

Organizing, structuring and labeling content in an effective way with the aim of helping the end user to find information and complete tasks.

3.

Wireframing

Create low fidelity wireframes making sure to include all the components and to respect the hierarchy between the elements.

4.

Modular system

Create a modular components library including components that can be easily reused and changed for future improvements.

1. Competitors benchmark and moodboard

 

To create the competitors benchmark I started by analyzing direct and indirect competitors, paying attention at how their websites are organized, which widgets they use and the overall UI, in this way I could pinpoint strengths and weaknesses of each. Finally, I realized a moodboard to capture the client’s preferences and to showcase interesting web components.

mood.png

2. Sitemap

 

After having analyzed and researched competitors was time to build the website skeleton. Novacolor was also creating new contents with the aim of increasing brand awareness. For this reason it was necessary to integrate new content pages with the skeleton of the website redesign built based on the competitors analysis.

sitemap.png

3. Wireframing

 

I used low fidelity and afterwards high fidelity wireframes to structure content and give to the client a taste of what the final result would look like. To create the designs I used tools such as Illustrator and Sketch.

4. Modular System

 

For the different web pages I designed interchangeable and reusable components for quick scaling in a modular system.

img6.png

High-fidelity mockups

Here can be found few high-fidelity mockups for mobile and desktop devices. The website will be soon accessible online.

img.png
img2.png

Style-guide

I prepared a style-guide template that summarizes the choices made in terms of typography, colors and icons.

img.png

Learnings

 

This project was very hands on and iterations on the design happened throughout the project lifecycle. For this reason I find it useful to develop a modular system which allowed me to quickly make changes and present them to the client without disrupting the overall layout.