LABORIE • UI design • 2014 - 2015
The LABORIE website was updated as the second example to showcase their commitment to the established branding guidelines and values. This was demonstrated through the consistency of the typography, occasional use of accent colours and functionality that allows more accessibility to disabled individuals.
UI Layout • Information Architecture • Photo retouching
Before this redesign, the homepage was filled with information, with hardly any white space to give the eye some room to breathe. There was no obvious hierarchy in the information either. By reducing the information to what was most necessary (and substituting some text for imagery) for a homepage, more white space was introduced, making the webpage look more balanced and easier to look at. The menu was also simplified by better categorization of products, and the reduction of frivolous visual effects such as 3D shading and separating tabs. Having a flat, semi-transparent navigational bar aligned with the objective of achieving a cleaner aesthetic overall.
Although the main colours from the LABORIE branding are dark blue and orange, the frequent use of those colours have proven to be visually overwhelming. Instead, they were assigned as accent colours, to emphasize a link, or a certain region on a map. For the rest of the website interface, a monochromatic colour scheme was used for greater contrast compared to the accent colours, and to provide a sleeker aesthetic that goes along with the updated branding guidelines.
While the previous iteration had a homepage slider, it was not dominant enough and competed with overwhelming bodies of text. For this version, more emphasis was placed on the slider by making it the main focus the viewer would see, placed with more visually enticing images that would maintain their attention. Banners were introduced for better categorization and more visual interest, and individual product pages received their own image galleries too. This allowed the user to see the product in different angles and to zoom in on details if they wanted to.