Lighting Component Speccing Tool for Electrical Engineers

Hey electrical engineers,
this is the one place to
quickly get technical documents for your component speccing jobs.

Lead UX Designer / 4 Months / Figma, End-to-end Design
Translated business goals in a user-centered approach and delivered a product that better fit the user's journey.
Influenced product direction and initiated new projects by proposing to stakeholders a new product vision experience.

Lutron Electronics is a world leader in lighting control solutions. The company designs and manufactures energy-saving lighting controls, automated window treatments, and total light management solutions for residential and commercial.

Founded in 1961, Lutron manufactures more than 17,000 energy-saving products, sold in more than 100 countries around the world. Lutron offices locate worldwide in London, Paris, Barcelona, Madrid, Berlin, Sao Paulo, Dubai, Hong Kong, Singapore, Tokyo, Shanghai, and Beijing.

On the commercial side, some of the larger Lutron light control systems include the New York Times Building, New York; Empire State Building, New York; the Wimbledon “Centre Court”, UK; the Guggenheim Museum, Bilbao, Spain; and the Bank of China headquarters, Beijing, Shanghai Tower, Shanghai, to name just a few.

On the residential side, light controls are installed everywhere from single-room apartments to palatial homes, including the White House, DC; 15 Hudson Yards, New York, and Windsor Castle, UK, to name just a few.


Lutron Electronics wants to attract more Electrical Engineers to buy our lighting control components

Electrical Engineers buy lighting control components from manufacturers like Lutron Electronics for their construction jobs

Lutron Electronics wants to attract more Electrical Engineers to buy our components

Hence the business tasked us to improve some current web pages we have, including advertisement and system intro page

Lutron Electronics

Lighting Control Components

Electrical Engineers

Construction Jobs

Electrical Engineers

Construction Jobs

Electrical Engineers

Construction Jobs


Examine the request, align on project goals, communicate the UX approach

Business wanted to boost sales of our lighting control components to electrical engineers by improving current web pages.

However, we think there should be a more user-centric and creative solution. So we aligned with the stakeholders on their goals and proposed how UX can get a more user-centered solution by exploring user needs and evaluating the task.

Business Goal

Increase the web page's conversion rate to have more electrical engineers adopt Lutron components

UX Goal

Effectively offer electrical engineers meaningful information that can encourage them to use Lutron components

Approach 1

Conduct user research to create JTBD and enhance user understanding

Approach 2

Examine the current experience Lutron is offering for the targeted component-buying flow

Approach 3

Evaluate the effectiveness of the proposed ask and come up with the solution

Preliminary Research

Understand electrical engineers' component-buying experience

I worked with my UX researcher to answer the questions that are crucial to examining the experience and delivering solutions. We did Co-design/Card Sorting and 8 rounds of 1:1 interviews and synthesized insights.

The followings are the research findings.

Research Directions 1

How do electrical engineers hunt for components for their job?

Research Directions 2

How do manufacturers' (Lutron and its competitors) web pages take part in the process?

Research Directions 3

What are some existing issues in the component buying process?

Electrical Engineer Behaviors

They take pride in their job. Enjoy that they understand complicated diagrams and electrical designing knowledge.

They are practical and want what they want immediately. They will try another method whenever things aren't working as expected.

They are straightforward. They prefer to avoid fluffy language and lengthy descriptions. They don't talk in circles.

Jobs-to-Be-Done (Simplified)

Electrical engineers pick the lighting components that fit their clients' needs and structure the components into wiring diagrams for their construction jobs.

Electrical engineers  come to manufactures’ websites when they are speccing if the components meet their jobs needs.

Electrical Engineers'
Component-buying Journey

Step 1 Design
Design the wiring diagram for the job

Step 2: Search
Look for manufactor options

Step 3 Spec
Check if the components meet the client's needs

Step 4 Create
Plug the components into their wiring diagram

Experience Design

New Experience for Speccing in Lutron Web

Previous User Journey

New User Journey

Home Page




System Introduction

Document Archive

Home Page



System Introduction

EE Hub

Examine Current Experience

I deep-dived into Lutron's current speccing experience and found multiple issues.

Previous User Journey of Speccing in Lutron Web

Home Page




System Introduction

Document Archive

Advertisement Page

→ Content is not meaningful, as electrical engineers are not here to learn how to do their job

→ Electrical engineers spend no more than 2 minutes on the web page

System Introduction

→ Systems are presented vaguely and it is not easy to tell the differenceLanguage is fluffy, which is not attractive to electrical engineers

→ Electrical engineers ultimately don’t think about what system to pick but if the components fit their job

Document Archive

→ Takes too many steps to get to documents are poorly organized which made it hard to scan and find the one

Changes for the New Experience

These are what I do to better the experience

Home Page



System Introduction

EE Hub

Step 1

Prioritize Google SEO as that’s how electrical engineers spec lighting control components

Step 2

Eliminate the ad page as it's not offering electrical engineers meaningful information while they are speccing components on our webpage.

Step 3

Connect electrical engineers' google search even closer to what they want by creating a brand new platform we call "EE Hub."


EE Hub

EE Hub is an interactive platform
for electrical engineers to
easily compare components,
quickly scan compatibility,
and precisely get the technical documents

Feature 1
Diagram View

I blended the two things that electrical engineers rely on when they are speccing: wiring diagram and technical documents. And created a way that allows them to get technical documents while browsing the wiring diagram.

In the process, I hosted several brainstorming sessions with the team and several rounds of user testing and one of the challenges I ran into was that the change was drastic and caused worries for the management. Hence I ...

I brought users to the managements

Storytelling. Kept stakeholders in the loop throughout the process.

I communicated the value proposition

Explain how EE Hub targets both the business and user goals of the project. Relate extra business values with the effect the features of EE Hub are adding, including heightening the component discoverability, enhancing workflow efficiency, and better fitting user expectations.

I proposed a doable role-out plan

Proposed a 2-phased role out plan for EE Hub with clear objective, evaluation, and reasoning.

Components are organized in a diagram view that electrical engineers are familiar with

Technical documents are attached to the components in the right column

Feature 2
Systemized and Prioritized Content

I worked closely with multiple sales teams to gather and audit 1000+ technical documents. One big change from the previous experience was that I sorted the documents  by component instead of by document type (cut sheet, application, etc) as engineers' mental model is "first component and then documents."

While making changes of how to organize the technical documents, one of the challenges was that the documents are owned by different teams and they have a set way of categorizing and naming the documents. Hence ...

I created a component-document template that can fit all systems

To build consistency that's knitted with the understanding of electrical engineers and forge effective and efficient communication, I started from focusing on one system (talking with one ream) and move on to the next.

In the end we created a template with unified categories, rules of naming, order of documents, etc.

I communicated with high-level PM about discrepancies around product naming

Changing component naming and categorization is highly impactful as it relates to overall product strategy and patents. Hence we discussed with high-level PMs to make sure user confusion is heard and can find a middle point.

Documents are sorted by component and prioritized by how often they are used

Feature 3
Scanning before Downloading

I made multiple interaction changes to eliminate electrical engineers' frustrations as they had a bumpy experience in the previous Lutron web experience. The changes focus mainly on allowing electrical engineers to quickly scan and identify potential components and have a less messy downloading experience.

One of the challenges I ran into was that the management suggested if this page is going to replace the data archive or where will this page be at in the current structure of official website?

Suggested that a broader research to other user sets is needed to answer this question

I mentioned how EE Hub is targeted at electrical engineers. Extra research will be required to determine what can we do to simplify the webpage structure while satisfying all users that come to Lutron web for technical documents.

Inspired explorations in other user sets’ JTBD and experience at Lutron website

As this project examined how electrical engineers had a bumpy experience navigating through our website, it started the discussion to expand the discussion to other user set as there are multiple targeted user set for Lutron website such as lighting designers, architects, space managers, etc.

Scan basic deciding information at the component level to encourage informed decision.

Check the needed document and get a bundle of document they need for a component.


Throughout the project

In the process, I ...

Advocated for users, challenged in-house norm, and influenced the product direction with storytelling

I brought user insights that are contrary to company norms and challenged them with a product that helps 90% of users while taking care of the 10% cases.

Learned technical knowledge fast to be able to design

I learned smart lighting control components structures and technical documents by actively reaching out to sales leaders and marketing managers.

Navigated through multiple teams of PM, tech support, sales across the 5000+ organization and reached consensus

I gathered stakeholders into different calls and made sure the product fits each parties’ interest along the way.

EE hub ...

Got bumped to priority development

From the original ask of just improving the web page, we successfully created a product that not only fit the aligned needs but got business recognition.

Got a second phase plan to explore integrating AI

The business is excited about the scalability of EE Hub and approved to have a next phase and experiment integrating AI to offer electrical engineers not just a better speccing experience but a better component-buying experience.

Got a full praise from the annual product launch

EE hub received user praise and was proved to be exciting and what the users think is game-changing.

Even more, this project ...

Caused a company-wide document overhaul

The effective story-telling of electrical engineers navigating through the documents persuades the company to examine all the documents we have.

Gave UX more exposure and set a new process of product development

As the first time marketing working with UX, the project sets as a great example of cross-functional collaboration to create a more user-centric and business-goal-fitting product.

Shade Automation
for Programmer, since Feb '23

Shade Automation

Smart Home Lighting
for Mass-market Homeowner,  July '22

Timer for Smart Home Lighting