Cornavin Watches : Rapid Redesign Concept

Michael Zimmermann
considermichael
Published in
4 min readJul 28, 2017

Case study of Cornavin Watches redesign

This is the current design for Cornavin Watches

Premise

Cornavin has had the same website for years now. Theres nothing much wrong with it since it does what it should. Giving the visitor a simple overview of the watch collections whilst introducing the brand.

Theres no possibility to purchase the watches online since their relationship to dealers are important and beginning to sell through the website would most likely taint the partnership. So it remains primarily a showcase for the watches and brand.

A popular Cornavin model the 2012–2015R

Cornavin wants to renew the design of the page to be mobile friendly and provide an excellent experience to the visitor. The budget for the project is limited so wireframing and design arent pixel perfect but the result should be a prototype that gives the client a good idea of what the final site could look like. In this case we have opted for a desktop first approach. The reason being the minimal design will translate easily into mobile and the client can reach decisions quickly when reviewing the desktop view.

Wireframes

In the wire framing phase of the project I wanted to decide how to structure the content on the pages. First defining the sections as blocks and restructuring them until I found an ideal flow of information.

In doing so decided on splitting the content to the following pages;

Home -Collections -About -Points of Sale -Contact

Design

Once the structural elements and their placement was set during the wireframing phase I began fleshing out the design. Some things where discussed before hand such as typography. Cornavin uses Futura in all their CI documents so we’ll use a google font alternative such as Open Sans.

I tried to destruct and simplify the logo for the online redesign.

Cornavin currently uses a black backdrop online and in their catalogues. To signify a refresh we went the opposite way and decided on using white as the new backdrop to show the watches. Given that the watches are massive the white backdrop gives them alot more “pop” for lack of a better word.

This is what the sketch file looks like during the rough design phase. Trying out different sections and designs to see what works.

The sketches above is an example of rough screens used to refine the look of the page with the client. After a few screens sent back and forth we soon moved on to a better visual representation of the actual site seen below. The site is clean and minimal and thus needs movement to engage the user. These subtle animations where the next and final step in creating a cohesive concept that we could discuss with our developer.

After a little back and forth the design starts to come together. Minimal and to the point.

Opening the page only the logo appears. Until the user scrolls into the site.

Collection names are hidden until you hover over on desktop view.
To enhance the Cornavin claim we have implemented video’s proving the commitment to quality
About page onload animation and hover over
The transition from the Collection page to a single watch.
Rough mockup of what navigating between watches could look like.

Conclusion

Thanks for having a look at the concept. Please leave criticism in the comment section so we have something to address when we iterate the design. Much appreciated!

--

--