jQuery(function($){ if (!$('#et-info').length) { $('#top-header .container').prepend('
'); } $('#et-info').prepend('Welcome to my website'); });

Azure Lighting Solutions

 About Azure Lighting Solutions 

 

Azure Lighting Solution is a market-leading supplier of Architectural LED lighting products focused on understanding customers’ pain points and addressing them by providing efficient solutions that exceed expectations. 

Project Background

Azure Lighting approached me about Design Their website. The company wanted to kiick on and they wanted to be professional enough and rarely used it to market business. This website mainly will be used to refer potential customers to the product and service and pricing structure. We met and determined what the main goals of the site were the following: a site that is easy to navigate (many of their clients were busy business owners), attractive and modern, make it simple for people to send interested product and contact online, and easy to find products. Additionally, having a call to action everywhere on website to cut down on missed apportunities (and therefore missed revenue).

Our aim for this project was: improve user experience, to not only meet the competitive baseline, but to exceed it.

As a key designer, I worked on this project along from the very beginning. I started fom competitor analisis and research, then conducted several interviews, after that, I created a clickable low-fidenity prototype and tested it on potential users.

DISCOVERY 

Research Goals

  •  What kind of information people look for buying lighting.
  • What is the primary reason is for going to lighting website.
  • find out more about industry and industry trends.
  • What are some of the pain points people experience on other lighting solutions website.
  • Compitator analisis.

 

Interviews

This project has very specific customers ew could have only 3 interviews:

  • age between 45-50 years old.
  • 2 x Project Managers , 1 x Purchasing Manager.
  • 2 x associated, 1 x Bachelore
  • All from Sysney.

Key Summery

  • All had experience with online shopping and browsing.
  • 2 of them prefered the phone conversation rather than email.
  • All of them asked for very detailed information about products.
  • All asked for easy navigation. not big menu and easy to understanding website.

 

DEFINE

Persona

For this project, I developed one persona called David he is a Proffesional Project Manager , cost conscious, prefers online browsing to find the best Lighting Solution for the project he has on his hand.

Information Architecture (IA)

I used Information Architecture to arrange and sort the products to be easy to access. I used Hybrid Cart Sorting technics and asked participants to arrenge them into logical categories and how everything hangs together.

Solutions

After showing the client some competitor’s websites, and nailing down the site architecture, we had a feel for how the site should look. We wanted to keep it very loose and not get distracted with a lot of detail. This exercise allowed me to start thinking about where content would fall on the page.

DESIGN

Responsive Wireframes

After reviewing and senthesizing all research with the client and show him some skeches with couple of iterations, it’s time to start refining in the form of a low fidelity wireframe. Here, I further identified the layout of the interface. Utilizing wireframes in the beginning phases of design, is an efficient way to communicate placement of elements without getting too bogged down in minute details. A huge benefit and timesaver is that the layout can easily be changed

Branding

Logo Design

The logo is the letermark of branding. This process began with coming up with words that embodied what the company was about.

Style Tile

This is where Azure Lighting branding really starts to take shape. By using the moodboard elements as inspiration we came up with the resulting style tile. The client was presented with a choice of color palettes and he chose the one pictured. This gives me an idea of how the site could look by listing out all the different variations in logo styles, colors, and photo usage. The style tile helps set the mood and tone of the brand and is used in the next step. View the full size style tile.

UI Kit

From our responsive design and style tile comes the UI Kit. The UI kit is a standardized inventory of all the components and design patterns and defines how they should look inside of the site. It sets the standard for the developers to follow and for the design of subsequent pages. A UI kit also identifies navigation and button states.

font-family: ‘Rubik’, sans-serif;

Colour pattern :

High Fidelity Responsive Design

In this step, I did a more polished, high fidelity version of the low fidelity responsive design mockups done earlier. It’s the same concept, except I applied the aesthetics from the style tile. This version contains all of the fonts, buttons, components from the style tile.

Logo Design

The logo is the letermark of branding. This process began with coming up with words that embodied what the company was about.

UI Kit

From our responsive design and style tile comes the UI Kit. The UI kit is a standardized inventory of all the components and design patterns and defines how they should look inside of the site. It sets the standard for the developers to follow and for the design of subsequent pages. A UI kit also identifies navigation and button states.

font-family: ‘Rubik’, sans-serif;

Technical page design

I have design their technical pages for each product as you can see and used same colour pattern.

High Fidelity Responsive Design

In this step, I did a more polished, high fidelity version of the low fidelity responsive design mockups done earlier. It’s the same concept, except I applied the aesthetics from the style tile. This version contains all of the fonts, buttons, components from the style tile.

Main Page

Product Page

Contact us

Thanks for Looking my Portfolio!

I'm Available for CHAT