Speccing Tool for Electrical Engineers

Lead UX Designer / 4 Months
Figma, End-to-end Design

Where is the cut sheet
for the 0-10V ESN again??

Electrical Engineers need technical documents when shopping for components for their job. Here is the one-stop tech doc platform to get what they want quickly and precisely.


Goal Setting

Revised the original request into business and user goals

Business came to UX team requesting to improve the ad page since it is experiencing low engagement and high bounce rates.

With the request, we dug deeper and unearthed that the core need is to "encourage more electrical engineers to choose Lutron components for their electrical system." We brought this up to the stakeholders and reached a consensus to set it as the goal.


Improve the ad page for electrical engineers

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

Preliminary Research

The ad page doesn't fit electrical engineers' component-hunting jobs

The team didn't have enough insights into electrical engineers' early experience of hunting for components for their jobs. Hence researcher Allana Wooley and I collaborated and did Co-design/Card Sorting and 8 rounds of 1:1 interviews to gauge electrical engineers' component-hunting journey and where manufacturers' web pages stand.

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 Engineers' Insights

Jobs-to-Be-Done (Simplified)

Electrical engineers structure the lighting control systems for construction. They pick the components and design the wiring.

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


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.

Electrical Engineers' Component Shopping 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

Issue of the Ad Page

The ad page offers electrical engineers meaningless information

The ad page promotes system characteristics such as being easy to install, which electrical engineers don't care about.

The information provided is those that electrical engineers already know, such as installation steps and system scenarios.

The information the electrical engineers are made hard to find

The architecture of the ad page left no trace that this is the right place for them to get their needed information.

It takes electrical engineers multiple clicks to get to the tech documents they need.

The site's architecture doesn't fit the electrical engineer's search habit

Electrical engineers are thinking about the "components" rather than "systems," which the ad page is centering around


Expand the project from "improving an ad page" to "restructuring the technical document system"

Simply "improving an ad page" is insufficient to reach the project goal. We need a more practical, straightforward way to attract electrical engineers.

The team and I had several rounds of ideation sessions. Finally, we decided to focus on the user's step 3 of Speccing and create the EE Hub. A product that aims to attract electrical engineers by solving their most significant need while shopping for components: to find the correct technical documents to spec components quickly

The following is the strategy for the creation of EEHub:

Step 1

Focus on the electrical engineer's "Speccing" step

Cater to the stage when electrical engineers are here on a manufacturer's website

Step 2

Skip the ad page

Avoid offering electrical engineers information that is less meaningful

Step 3

Prioritize online information

Systemize our technical documents according to electrical engineers' mental models

Step 4

Merge the information in one place

Create a hub where electrical engineers can get all the docs needed one time

The EE Hub aims to attract electrical engineers by solving their most significant need while shopping for components: to find the correct technical documents to spec components quickly

Final Design

The Product

Look closer to the design and the reasoning behind for the EE Hub

I went through 2 rounds of user testing and reached the final design. Next, I worked with our visual designer to adapt the existing corporate design system.

EE Hub is an interactive dashboard for electrical engineers to quickly find component technical documents to spec. Let's walk through the product along the user flow.

Step 1 Access
Electrical engineers go directly to EE Hub when speccing components for their job. 

How will electrical engineers enter this page?

Why not allow them to pick a system before entering one? 

Step 2 Identify
Electrical engineers scroll through the diagram to find the component pod.

Why a diagram?

How to make sure the diagram is easy for electrical engineers to identify the category? 

Step 3 Compare
Electrical engineers compare the components in the same pod. 

Why are the component cards on the right-hand side fixed? 

How did we decide what information to disclose?

Step 4 Download
Electrical engineers compare the components in the same pod.

Why open up a new tab? 

How did we make sure the document is most meaningful for electrical engineers?

Level 1 System

System Option

System-level Technical Documents

Level 2 Diagram

System Diagram

Level 3 Component


Component-level Technical Documents


Communication and Negotiation

Thinking outside the box is one thing, making it happen is another.

I worked closely with the product manager and sales representatives to navigate connecting/cleaning the resources and bringing/communicating the design to people with authority.

We met plenty of challenges trying to realize this product. Here are three:

Unorganized Documents

There are thousands of technical documents for multiple Lutron lighting control systems. And the documents are stored unsystematically, formatted poorly, and named randomly. The situation makes it hard for the users to source and the team to organize in the EE Hub.

Create a Template for All

We focused on one system, one language, first. We looked at all the documents and worked on categorizing, renaming, and matching them with the correct file addresses. Once the template for this lighting control system is established and tested with the engineering team and the users, we use it on other systems.

Work Closely with Sales and Engineering

The tech docs are foreign to us. So we worked closely with sales representatives and the technical product team to audit and sort them in a logical system. To maintain simplicity, we created a nested system to store the complex tech doc system. So we also worked closely with the engineering team to ensure the design was feasible.

Meticulous Care Culture

The management expects us to take care of all needs. However, this goes against the goal of "effectively" offering electrical engineers "meaningful" information, as users are usually here for the same tech documents.

Bring the Users to the Discussion

I paired with our UX researcher to host sessions to explain to the management the pros of prioritization by leveraging the clips from user interviews, data from the research, and methods to solve their concerns.

Communicate the Progressive Disclosure Plan

We communicated with the management by juxtaposing their priorities and the electrical engineers' needs. We also emphasized that EE Hub aims to prioritize and solve 80% of electrical engineers' jobs. As for the 20%, we still leave options on the page for electrical engineers to source.

Big Change

The final product exceeds the original request to improve the ad page simply. Even though the team has been in the loop while the project proceeds, the work required to create EE Hub still causes hesitation.

Separate the Development into 2 Phases

We separated the full EE Hub development into 2 phases. So we can gauge the success after launching the first phase and make iterations. And then, we can decide how to move on to the development of the full EE Hub.

Set Metrics with the Team

We worked with the team and discussed how to evaluate the success.


Evaluate Success

Tie the design back to the goals

The project goal is to increase the conversion rate. To evaluate the impact, we aim to examine utilization and intuitiveness. For utilization, we collect data on the number of visits, document downloads, etc. For intuitiveness, we collect data on bounce rate, average session from enter to download, etc. We use the data not only to evaluate but inform future iterations.

The data has yet to be available, but we got immediate feedback from the management and sales representatives. EE Hub is the project that got the most shoutouts from the company-side project demoing and is prioritized for development.

Sales Representative

"This is going to be so helpful for the electrical engineers. We need it now!"


"Lets prioritize the development of EE Hub!"

Future Implication

Think Bigger

What are some other impacts of this project

Technical Document Audit

The team is doing an overall document audit of other Lutron lighting control systems following the rule we created. The process entails extensive collaborations across the pm, marketing, and development teams.

Data for Other Decisions

The data we collected to evaluate the project's success shed light on electrical engineers' component needs. Hence, the team can use the data to inform decisions on other related products.

The 2nd-phase Design

Current EE Hub targets the "Spec" part of electrical engineers' component-hunting journey. With the success of this project, we are creating the 2nd phase design for the EE hub, turning it from passive information delivery to a working tool.