WorkMeResumeVisual

Lighting Component Speccing Tool

EE Hub,
the component speccing tool

Refresh component-buying flow and
Redesign component-buying site

Presentation
Live site

Role

Lead UX Designer, 4 Months

Team

PM, Developer, Senior Management,
UX Researcher, Visual Designer

Tool

Research, Figma

Delieverable

Optimized component-buying workflow
End-to-end design for a web-based tool

EE Hub redefines the way electrical engineers source technical information to make lighting control component buying decisions.

With EE Hub electrical engineers browse multiple systems and get technical documents all at one place.

You're an electrical engineer trying to buy components that fit client's technical requirements by downloading technical documents

Lutron Electronics is a world leader in lighting control system

Lutron Electronics designs and manufactures more than 17,000 energy-saving lighting controls, automated window treatments, and total light management solutions for commercial and residential clients. Lutron Electronics products are sold in 100+ countries around the world.

For commercial, some larger clients include
‍New York Times Building, New York
‍Empire State Building, New York
‍Wimbledon Centre Court, UK
‍Guggenheim Museum, Bilbao, Spain
Bank of China headquarters, Beijing
‍Shanghai Tower, Shanghai, etc.

For residential, Lutron systems are at apartments, palatial homes to hotels
‍White House, DC
‍15 Hudson Yards, New York
‍Windsor Castle, UK
‍Marina Bay Sands Hotel, Singapore
‍Four Seasons, Saudi Arabia, to name just a few.

Context

Lighting Control
Component Buying

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

Lutron Electronics

Design, manufacture, and sell

Lighting Control Components

Lighting Control Components

Electrical Engineers

Spec if the

Lighting Control Components

fits their clients' construction jobs

Challenge

Underperforming
Component-buying
Digital Channels

Lutron’s digital sales channels for component-buying
are experiencing high bounce rate

Business hope to re-design them to
lower bounce rate and
increase engagement rate
for EEs (electrical engineers)

Digital Sales Channel 1

Advertising Page

Digital Sales Channel 2

Official System Page

I proposed to expand the scale from
just redesigning the channels to  
look at users’ whole buying journey

Ad Page

System Page

Lutron’s Digital Sales Channels

Offline

Ad Page

System Page

Buy

EE’s Online Component Buying Journey

Approach

Meaningful Online
Buying Experience

I successfully pitched the business stakeholders with the concept of encouraging online sales by creating a meaningful experience for electrical engineers

UX Goal

Align Goals with Stakeholders

Effectively offer electrical engineers meaningful information that can encourage them to buy Lutron components for their jobs

UX Strategy

Research, Evaluate and Design

Step 1

Conduct

user research

to create JTBD and enhance user understanding

Step 2

Examine the current experience

Lutron is offering for the targeted component-buying flow

Step 3

Evaluate

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

Preliminary Research

Fill the Gap

I conducted co-design/card sorting and 1:1 interview with 8+ electrical engineers with my UX researcher and synthesized findings into user insights

Research Synthesis

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.

Research Synthesis

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.

Research Synthesis

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

Simplifying Workflow

Home Page

Email

Google

Advertisement

System Introduction

Document Archive

Home Page

Email

Google

System Introduction

EE Hub

Current Experience

Issues

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

Adjustments 1

Increase Find-ability

Instead of Email,

prioritize Google SEO

as that’s how electrical engineers spec lighting control components

Adjustments 2

Eliminate Meaningless Information

Eliminate the ad page

as it's not offering electrical engineers meaningful information while they are speccing components on our webpage

Adjustments 3

Make Meaningful Information Accessible

Create a brand new platform we call

"EE Hub"

that put together all information an electrical engineer need for their job

Evaluation

Previous Workflow

Evaluate the workflow of
deciding what lighting control components to buy

The original workflow was lengthy and
not ideal for electrical engineers

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 Introd

→ 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

Solution 1

User Flow Refresh

Streamline an intuitive flow
to meaningful information

Drastically improved the user flow of
EEs’ online component buying process by:
‍
➔ Cut out Meaningless Information
➔ Reduce Clicks to Meaningful Information

Prioritize Google Search

The process to technical documents is lengthy for EEs. By focusing on working with SEO team to get Google search directly to our information page instead of email, can make the process more efficient.

Eliminate Advertisement Page

Information on Advertisement Page is not meaningful for electrical engineers while they are buying components on our digital channels.

Combine Meaningful Information

Meaningful information is scattered. My merging system intro and doc archive into a new platform "EE Hub", meaningful information can be available at one place.

Before

Home

Email

Ad

System Intro

Doc Archive

After

Google

Home

System
Intro

EE Hub

Solution 2

EE Hub

Organize meaningful information
in a clean fashion

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

Feature 1

Diagram

Blended two important information electrical engineers look at when buying lighting components - Wiring Diagram and Technical Documents

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

Documents are sorted by component instead of by document type (cut sheet, application, etc) as engineers' mental model is "first component and then documents."

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

Feature 3

Scanning before Downloading

Improved scan-ability by prioritizing complex information and enabled friendly job experience by introducing bulk download function

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.

Challenge

Cross-function Communication
and Collaboration

Challenges 1

While aligned with the UX goal,
the solutions pushed the original project request
and require big moves across functions

Story telling

Advocate for the users to the stakeholders
Story tell EE’s component-buying journey

Value Proposition

Meeting user expectation
Heighten component discoverability
Opportunity to sale

2-Phased
Role-out Plan

Validate the concept
Iterative the product with data

Challenges 2

1000+ Technical documents are owned
by different system teams, and have
different logic of categorizing and naming

One template

Iterate on one template with essential criteria
Navigate across 6+ systems
Learn technicals fast

Escalate discussion

Collaborate with high-level
PMs about product strategies
Balance business interests and user needs

Contribution

Metrics and Impact

EE Hub achieved the metrics
the team aligned at the beginning
and made business impacts

KPI

Site Visit 30% Growth

Validated the need of EE Hub

Task on Time lowered by 70%

EE Hub increased efficiency for EEs

Doc Download 30% Growth

New experience encouraged EEs to spec our components

Business Impact

Initiate a Company-wide Data Overhaul

Digital asset update across all commercial and residential systems

Bumped as High-Priority Product

Prioritized to be developed
Selected to be showcased at annual sales launch

Shade Automation
for Programmer, since Feb '23

Shade Automation

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

Timer for Smart Home Lighting