Deco Lighting Website

Redesigned and created web design standards for getdeco.com to comply with corporate visual identity guidelines and usability best practices.

beauty.png

My Role

Project Manager

UX Designer

Team

Myself

Marketing

Customer Service

Design

Key Contribution

User Research

Concept Ideation

Prototyping

Interaction Design

Tools

Adobe XD

Adobe Photoshop

Timeline

months

problem.png
The Problem

To understand the problems with the website, we had an all hands on deck meeting to determine understand that we faced 2 main issues. The first being that the visual representation of our brand was not consistent. The second one came with the help of the customer service team who were able to provide a list questions they would receive on a regular basis.

 
questions.png
understand.png
Understanding The User

In order to understand the recurring questions, I met with the customer service team to understand what were the type of people they had to deal. With enough data provided by the team, we created user personas to help in our informational meetings with the executive team.

 
Matthew.png
Robert.png
Michael.png
analysis.png
Competitve Analysis

We looked at several other lighting company websites to study how they structured their website. We took into account their commonalities and strongest, most impactful design features during this analysis.

 
competitve.png
comp-home.png
comp-product.png
audit.png
Website Audit

Once we established the users and took a look at our competition, the next step was to go through our website to determine what the visual pain points were. As I audited the website, I took notes on the visual problems with the website and noticed:

 
Old-Home-Page.jpg
old-vector-page-1.jpg

Branding

The main problem was that the brand was not established and there was no fluidity throughout the site. The colors did not create brand awareness. The images did not represent the quality of the products. There was not a target audience established which created a clutter of unimportant information. 

Homepage

The home page suffered from being uninviting and failing to lead the user to the end-goal of understanding the product. The lack of call to actions made it difficult to navigate and understand what was important. Because of this, there was a high bounce rate which affected sales.

Product Page

The product page is the page that makes the sale. It should tell a story and help the end user understand what the product does. It was not the case for Deco Lighting. The products were not the predominant item on the page. There was an overwhelming amount of text without visual elements, which caused users to click away from the page instead of learning more 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.

This image is scrollable

solution.png
The Solution

Once the website audit was complete, I circled back to the design, marketing, and customer service teams to discuss our findings. With a clear understanding of our target audience, we removed all the clutter and useless information that prevented them from reaching the desired product. An overwhelming amount of information with no visual throughline was creating a high bounce rate. Once we determined how to streamline the path to the product pages, our next goal was to update the pages themselves. We achieved this by providing visuals that were not only aesthetically pleasing, but also informative. 

 
wireflow.png
Wireflow

In order to make sure that the user ended up at their desired product page, I established that every page would have effective call to actions. I made sure that no matter where they went through on the website, there would be easy access to the product page.

 
wireflow.png
wireframe.png
Wireframe

With a better understanding of the wireflow, I made a wireframe in Illustrator to help communicate layout ideas with the design team and guide the executive team to better understand the hierarchy of the customer’s needs.

 
detailed-wireframe.png
style.png
Style Guide

Prior to the High Fidelity Prototyping, a style guide was created following Deco Lighting's branding for consistency.

 
styleguide.png
final.png
Final Design

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.

 

This image is scrollable

Product Page Key Features

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 for the product.

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

Responsive Design

Insight from the marketing team, revealed that 68% of people who visited the website were on mobile devices, so we made sure all the designs translated into a mobile friendly screen.

This image is scrollable

impact.png
Impact

The final result was a responsive and interactive website based more around the audience's experience, as opposed to a confusing laundry list of irrelevant information.

 

Ultimately the changes we made to the website, elicited a positive emotional response in our audience and translated directly to a 15% increased conversion rate in the following quarter. Marketing noticed an 8.75% decrease in bounce rate within the first month of launch. Time spent on product pages increased by over 1:30 minutes which translated to less phone calls for the customer service team regarding answering questions regarding products.

 
after.png

After

before.png

Before

conversion.png
bounce.png
time.png