Deco Lighting Website
Redesigned and created web design standards for getdeco.com to comply with corporate visual identity guidelines and usability best practices.
🤔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.
🔎Research
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.
Competitive Analysis
As part of the research, 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.
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:
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.
This image is scrollable
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
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
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.
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.
Style Guide
Prior to the High Fidelity Prototyping, a style guide was created following Deco Lighting's branding for consistency.
🖌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.
Key Features Added
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.
Documentation Section: All important documentation that is related to the fixture is found here.
Functional Styles: Are the rest of the features and options that are part 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.
This image is scrollable
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
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
Before
Scope of Work
Problem
Before reworking the website, I worked with different teams to answer the questions that would surface when navigating the website.
Research
Personas
Competitive Analysis
Website Audit
UX Design
Based on the research, I started to think about the wireflow and wireframe for both mobile and desktop. Once the layout was done, I moved on to the style guide
Meet Matthew, the Sales Rep
Matthew is a sales representative for a lighting company in Arizona. He successful converting leads into sales in his region. As such, he strives on making sure he continues to be the top seller for manufacturing companies he represents.
Matthew needs:
-
Products to have all necessary certifications
-
Product selection should require minimal effort
-
All specifications available for the product
Meet Michael, the Architect
Michael is a recognizable architect within his colleagues. He regularly works on the go with mobile devices. He tends to work with people he has established relationships with. He works closely with the engineers to caluclate the necessary electric power loads for the entire building.
Michael needs:
-
To have visual examples of how a product looks before committing to his design.
-
To be involved at every stage of the project, to maintain budget and code requirements.
Meet Robert, the Electrical Engineer
Robert is an electrical engineer with 15 years of experience. He is an expert at his field and knows exactly what would work in any location he is commissioning. He wants to save time and money when scoping new jobs.
Michael needs:
-
Products to be available when he needs them
-
All necessary installation instructions available
-
Needs all technical data available for the product