Company Description

Deco Lighting is an advanced-technology LED lighting company that delivers comprehensive, end-to-end solutions for the architectural and energy markets. They design and develop LED solutions that deliver superior quality, great energy-efficiencies, and smart system connectivity. Deco’s goal is to serve everyone from designers to electricians with a strong list of beautiful and sustainable luminaires. Deco Lighting’s commitment to quality is the driving force behind our innovative foundation, allowing Deco to continue to create fixtures that will shape today’s industry and beyond.

User Research

The Challenge

Redesign the Deco Lighting website into a visual experience that is also highly efficient in dispersing critical information.

Defining the problem

I met with the customer service team to understand the complaints they received from their customers and representatives. I tasked my design team with helping to solve some of the recurring issues:

“I can’t find the product”

“What does the product come with?”

“Are there other options?”

“I didn’t see application photos, do you have any?”

While those questions were being answered, I took a look at the visual problems of the website and noticed:

Branding : The main problem was that the brand was not established and there was no fluidity throughout the site.

Homepage : The home page suffered from being uninviting and failing to lead the user to the end-goal of understanding the product. It lacked visual cues and flow.

Product page : The product was not the predominant item on the page. There was an overwhelming amount of text without visual elements, making it difficult for the viewer to learn about the product’s important features. Additionally, the text was not interesting to look at. It also included various links to other products that distracts the end-user and leads them to click away from the light fixture instead of inquiring about it.

The Solution

User Flow

Once we established the problems, we drove the end-user down a clearer path which provides the opportunity to understand the product in full.

Rapid Ideation Sketches

Prior to creating the detailed design, I made a series of sketches to help communicate layout ideas with the design team and guide the executive team to better understand the hierarchy of the customer’s needs.

Final Results

The most impactful thing we started with was changing the background from white to black. This was consistent with the brand and gave the overall feel of elegant, innovative, and high-quality products. 

While diving further into the main pages, we removed a lot of the text and unimportant links (better suited for other locations on the site) and added impactful imagery.

On product pages, we added interactive sections to create a visual experience that would both appeal to the end-user as well as inform them on all the key features of the light fixture.

Product Page Key Feature:

Hero Shot: A full-size application image of the light fixture in a creative space. It gives the end-user an immediate visualization of how the product looks in a location.

Wow Factor: We added 4 “Wow Factor” images that are considered some of the most important features of the product, setting it apart from others.

 

Functional Styles: Are the rest of the features and options that are apart of the light fixture.

 

Features & Benefits: Basic specifications and technical information of the product.

 

Case Studies: This feature was added to give more examples of a specific product in an environment.

Style Guide

I created a style guide for easy maintenance by the design team and to help the development team’s efficiency.

Fonts

Text Styles

Before & After

Here is a final side to side comparison of the old and new website.

Project Details

Client: 

Deco Lighting

Project Date: 

January 2019- May 2019

Project Category:

Branding/UX/UI

Deliverables: 

Website

©2020 by Fabian Lucero