Goal Setting
Decode the Request
Is wanting to improve the ad page because you want more engineers to buy our components?
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.
OG Request
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
Behavior and
Journey
Look into how do electrical engineers hunt components for their jobs
The project looks at the electrical engineers' early experience of hunting for components for their jobs. However, the team needed more research looking at this stage. Hence, Researcher Allana Wooley and I collaborated to learn from the electrical engineers.
We did Co-design/Card Sorting to gauge how electrical engineers understand each information type shown on a manufacturer's web page. We did 8 rounds of 1:1 interviews to dig into the 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' Quick Jobs-to-Be-Done
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.
Electrical Engineers' Behavior
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
Strategy
Creation of
EE Hub
Expand the project from "improving a 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.
Step 2 Identify
Electrical engineers scroll through the diagram to find the component pod.
Step 3 Compare
Electrical engineers compare the components in the same pod.
Level 1 System
System Option
System-level Technical Documents
Level 2 Diagram
System Diagram
Level 3 Component
Component
Component-level Technical Documents
Challenges
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.
Evaluation
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!"
Management
"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.