SKU/Spec Sheets Finder Tool Zurn Engineers
Boosted Engineering Workflow Speed by Streamlining Custom Product Selections
My Role
Sole UX/UI Designer (intern), working with 2 developers
Tools
Figma, Photoshop, Maze
Client
Early-stage startup
Timeline
2 month
Overview
Redesigning a Critical SKU Tool for Engineers
Zurn Elkay provides water solutions and commercial plumbing products to architects and construction professionals. One of their key internal tools—the Options & Specials Tool—helps Zurn Enginners configure and access spec sheets and CAD files for customizable SKUs. The tool suffered from a cluttered layout, inconsistent branding, and friction in key flows—slowing down projects and frustrating engineers.
Role:
Leading user interview & a usability reviews.
Ideating through prorization matrix & sketches
Designing mid-fi & working with developers to bring hi-fi's to life
Conducting A/B testing
Presenting decisions & decisions to stakeholders.
Problem:
Zurn’s technical users (engineers & architects) relied on this tool daily—but poor UX slowed down spec retrieval, increased confusion, and created brand inconsistency across the site. Internally, this tool was undervalued—despite its central role in revenue-generating projects and workflows.
Results:
⏱ 55% Faster SKU Retrieval – Usability testing showed engineers completed key tasks in nearly half the time
✅ 88% Success Rate – Engineers located CAD/spec files with minimal confusion or help
🎨 Visual Consistency Achieved – Applied Zurn's design system to align with broader brand experience
🤝 Stakeholder Buy-In Secured – A/B tests and clean mid-fis helped drive leadership alignment
📈 Workflow Efficiency Gains – Faster file access reduced engineering delays and planning friction
Before
After
Challenge
The Problem: No Trust, No Quotes
The tool’s clunky UI, slow performance, and inconsistent branding frustrated users trying to access files and spec sheets—causing delays in documentation, project planning, and ultimately revenue generation.
Critical issues:
Cluttered UI and lack of visual hierarchy for the results
Difficulty locating and configuring product options efficiently
Long list of SKU's = takes alot of time = Engineers are on this all day
Problem Statement:
Technical users rely on speed, clarity, and structure to complete their work efficiently. But Zurn’s SKU tool introduced friction at every step—slowing down teams, hurting productivity, and damaging efficiency.
We needed to redesign the tool with UX clarity and brand alignment at the center—making it faster, easier to navigate, and better equipped to support engineers doing high-stakes work.
Has sections but not clickable, must scroll to access. Even if we made it clickable, there would be long scroll/load time with 30+ categories for certain sections.
No branding, what does this page do?
Even though it is an internal tool, our design team is aiming for brand consistency across all platforms.
Poor scanning to view needed information.
Engineers would mention they would be on this all day, and looking back and forth on a monitor.
To inform the redesign, I conducted a usability review of the existing tool and led user interviews with engineers and architects—laying the foundation for a research-driven strategy grounded in real workflows and pain points.
Research Foundation: Where the Tool Failed Technical Users
Constraints:
Stakeholders initially didn't see the value in redesigning the tool, seeing it as low-impact during the merger. My senior designer and I pushed back, because of its daily use for engineers. We proposed mockups to show value — and when other priorities pulled her away, I took full ownership of the project, with her guidance in the background.
As the only UX/UI designer on the project, I focused on real workflow friction experienced by Zurn’s engineers and architects. While internal stakeholders initially undervalued the tool, user interviews and usability analysis revealed its daily importance—and the high cost of poor UX.
Goal: Identify pain points in the documentation workflows of Zurn engineers and architects to guide an efficiency-focused redesign.
Challenge: Stakeholders underestimated the tool’s value, creating resistance to investing in design improvements.
Approach: I led lean, user-first research—combining interviews and usability audits—to highlight critical issues and advocate for a more consistent, scalable design across Zurn’s digital ecosystem.
Usability Review: Outdated UI, Inefficient Flows, and Brand Mismatch
To identify where users faced the most friction and prioritize issues based on usability heuristics, not assumptions. This helped set a focused foundation for design decisions grounded in proven UX principles.
Flexibility & Efficiency of Use Issue. Long, unorganized lists forced users to scroll endlessly, slowing down selection tasks.
Efficiency Issue. Inefficient way of filtering through information to find the proper product & its related files.
Consistency & Standards Issue. The UI felt disconnected from the main site, weakening trust and brand continuity.
Proximity & Scanning Issue.Key product details weren’t grouped well, making it hard to scan and slowing down decision-making.
Options Zurn Website
Streamlining Car Shopping: Compare and Analyze Car Price Quotes Across Multiple Platforms
My role
Designer & Researcher
Tools
Figma, Photoshop, Maze
Timeline
1 month
View Final Work
View Final Work
What is this?
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Impact on business.
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Scope
Streamline engineer and architect work efficiency through improving existing interface while supporting design and brand consistency.
Understand
Explore
Materialize
Understanding the problem - Current pain points
Information Architecture Issues.
Current site makes user select by zip code/city first, but what if the zip code/city is not listed?
Discoverability Issues.
There is no ability to change the range of the inputted zip code.
Needs Minimalistic Design.
Need supporting aesthetics to find and filter information more efficiently = Need for support while avoiding distractions.
Findability Issues.
Not all product lines are under all the different zip codes.
Lack of Feedback/Findability Issues.
When choosing a different country, it kicks the user back to the main page.
Poor Error Use.
A ”no results page” does not exist.
Let's discover
What does this do?
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
Which to choose?
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
Lack of Aesthetics
The information for the product SKU is not shown to scan information quickly and can be shown in a cleaner way.
Lo-fi - Improving access to information.
Used a tag dropdown system to simplify and filter options so that engineers can find what they need.
Ex: User chooses a tag option in the dropdown and the list filters to that specific category saving time.
1
Kept the list system to easily track information down the page with short numbers was easier, and used colored columns to break up content with branding too.
2
Kept the the look the same with other tools with the card that has all action needed to be taken. This connects the Zurn brand so that learnability and consistency are used throughout the website.
3
Once results are found, we used card components to clean up information using visual hierarchy through typography and color.
4
IA structure flows
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
IA structure flows
We came down to two main options and decided A/B testing would allow us to see which ones users would prefer.
Their recommendations were:
-Preferred results being shown below. Users they talk with want said too much information causes confusion.
Add a View All page. Many users want to see all representatives regardless of location at times.
Group the initial portion so all the elements are in one spot & users don't have to find what to input and where it is.
Materialize the final product.
Accessibility
Implementing a design system that would have consistent fonts, colors, and standards.
All designs follow WCAG standards in terms of font, colors, and flexibility.
All designs implemented dark mode & mobile versions.
Alt tags and SEO descriptions included with all necessary content.
Adjustments
Grouping information to be direct
Instead of having a page of options all over the page, we centralized and brought attention to the main actions needed. It guides the user through the actions and arrives to the CTA.
Adding the “View All Page”
An addition through testing, users the ability to see all representatives of a product line. This would let them reach out to representatives in a certain area if contractors need to deliver to a particular customer.
Adding visual hierarchy through contrast for importance.
For each card component, they have a visual importance as to which individual they should reach out too. It also clearly states the location and gives a clear indicator of the different calling options.
Hi-fi Designs
Mobile Designs
Clear action box
Visual representation
Clear card components
Clear action box
Conclusion
This project was one of the first projects I worked on during my internship and receiving a project with so much impact on the company overall in terms of revenue, customer interactions, and support. I was able gather research, go through my process, and be able to design solutions that hit the heart of the problem and support users.
What I learned
Data influences design.
Design is limited without data, which helps us see we have to work with, which effects and shapes potential designs.
Progress over perfection.
Collaborating with marketing, digital operations, and HR teams demands quick, iterative designs. Feedback trumps “perfect” designs.
Testing trumps all.
Testing reveals gaps in designs and provide a quick feedback loop of information which provides key improvements.
Let’s delve deeper into this.
Inconsistent UI
The landing page does not clearly describe what this page does and what is being conveyed. Also, the page has no correlation to any other page on this website. Looks like a different website.
Slow Filtering
It presents a long list, requiring users to know the product type and scroll extensively—slowing down their workflow.
Cluttered Product Info
The information for the product SKU is not shown to scan information quickly and can be shown in a cleaner way.
While the usability audit issues, I needed to understand the deeper workflow challenges and context—so I turned to user interviews with engineers and architects to hear directly where the tool was falling short.
User Interviews: Uncovering What Slowed Engineers Down
Initially, I assumed engineers just needed a visual refresh. But during interviews, I discovered that they were using this daily for hours on end, and were increasingly frustrated with how slow it was to use, affecting their work.
"I spend too much time trying to find the SKU especially when I need spec sheets multiple times during the day"
- Zurn Engineer
🧾 Too Many SKUs, Poor Organization. A long, single-line SKU list and 30+ category pages made it difficult to find what they needed.
🔍 Hard to Scan, Hard to Matchs. Results lacked hierarchy—users struggled to match files to the right SKU quickly.
⏳ Wasted Time on Simple Tasks. Grabbing files—something that should take seconds—took minutes and disrupted project flow.
🎨 Poor Branding. Though internal, the tool lacked Zurn’s branding and didn’t reflect the company’s aesthetic.
Research Summary: Where the Tool Broke Down
Constraints
Stakeholders initially underestimated the tool’s value, overlooking how much it impacted engineering productivity and project timelines. Time was also low, with a barely a month for the whole process, I had to be picky with the methods we choose for all phases = give best ROI
Workflow Bottlenecks
Engineers struggled to locate spec sheets and CAD files quickly—delays in access slowed down projects.
Brand Trust Breakdown
The tool felt visually disconnected from Zurn’s ecosystem, reducing credibility and lowering confidence in the platform.
UX = Business Alignment
Highlighting friction through early design exploration helped shift stakeholder mindset, showing how UX could drive clarity and efficiency.
We took these findings and started to ideate and find solutions to these issues to improve efficiency for engineers and find ways to improve the aesthetics and branding of this page.
Ideation Phase: Designing for Clarity, Speed, and Real-World Use
In this phase, I translated user insights into early concepts for a faster, clearer SKU experience. I collaborated with a senior designer for feedback and partnered with developers to align flows with the structure of existing product data.
How I Transformed Research into UX Direction:
Sketched Key Task Flows to visualize the critical path from SKU search to document access
Used a Prioritization Matrix to focus on high-impact UI changes
Built Low-Fidelity Wireframes to test structure and sequence
To focus our efforts and make smart design tradeoffs, I mapped early ideas in a prioritization matrix—balancing user impact with technical effort to guide what we tackled first.
Priorization Matrix:
Low effort
High effort
High impact
Low impact
Incremental
Easy wins
Big bets
Money pit
START HERE
DO THESE NEXT
FILL-INS
THANKLESS TASKS
To make strategic design decisions under tight deadlines, I created a prioritization matrix to weigh impact vs. effort. This helped align the team on what would deliver the greatest value to engineers—and what could realistically ship before the merger deadline.
We focused on high-impact, low-to-medium effort features that directly improved productivity and reduced friction:
SKU Finder Filter System would reduce scrolling and find the cateogory for their SKU asap.
Clean Card components for improved scanning and hierarchy so users could find the right specs files faster.
Actions Box where users would enter actions - similar to other tools that I designed to create ecosystem.
After understanding the main features we needed to focus on - we then went ahead with how we wanted the layout to visually look before we dove into lo-fi designs.
Sketches
To quickly explore layout possibilities and address core pain points, I created low-fidelity sketches focused on navigation, information grouping, and task clarity. These early ideas helped guide feedback sessions and align the team on direction.
🔍 Key Focus Areas:
Explored card-based layouts for faster scanning and visual grouping
Had mutliple version through the "crazy 8 method by generating ideas quickly.
Tried different tag systems such as dropdowns, tags themselves, different list layouts instead of a single list format.
With a tight timeline we moved directly into mid-fi wireframes so we could show stakeholders it's value, have developers start to see the vision, and be able to do some A/B Testing.
Mid-Fi: Improving Speed, Clarity, and Brand Alignment
Goal:
Redesign the SKU selection flow to reduce friction, improve clarity, and align with Zurn’s design system—for quicker workflow for engineers and architects.
Key Design Decisions:
Tag-Based Filtering: Replaced the long scroll with a tag dropdown system to simplify navigation and help users find SKUs faster.
Consistent Action Cards: Used familiar card components from Zurn’s ecosystem to ensure visual consistency and improve usability.
Improved Visual Hierarchy: Introduced colored columns and structured layouts for faster data parsing and reduced cognitive load.
Brand Alignment: Applied Zurn’s UI standards throughout to build trust and familiarity across tools.
Stakeholders initially deprioritized the SKU tool, focusing on broader brand initiatives and viewing it as low-impact. Presenting lean mid-fi designs clearly demonstrated workflow improvements and daily user value, helping secure leadership buy-in and elevate the tool’s importance.
Lo-fi - Improving access to information.
Results were redesigned into clean, digestible cards—using typography and color to help users quickly find what they need.
Lo-fi - Improving access to information.
Maintained a vertical list format for scannability, while using color-coded columns to organize content and reinforce Zurn branding.
Replaced the full-scroll list with dropdown filters. Users can now select a tag to immediately narrow their results—saving time and reducing frustration.
Applied consistent action modules already used in other Zurn tools to ensure users could rely on familiar patterns across the platform.
With a strong mid-fi direction and stakeholder buy-in secured, we moved into usability testing to validate our design decisions and determine which layout best supported real engineering workflows.
A/B Testing - Validated Layouts for Clarity, Speed & User Confidence
"The tag filter system was quicker and saved me a tap, also I love how this is looking! It will make our lives so much more easier and quicker to do more important tasks."
-Zurn Engineer
To validate our mid-fidelity concepts, we ran A/B testing with 4 Zurn Engineers and improved ability find spec sheets with an 88% success rate — up from 55% in earlier wireframes. The goal was to determine which layout improved task completion, scanning, and overall usability for engineers working under tight project timelines.
We tried two layouts:
One with tag dropdowns and a multi-row format for the different categories. (First One)
One with a tags on screen and a wider layout of options. (Second One)
Results:
On a scale of 1-10, How effective was it to locate the files needed under each sku?
88%
7 Out of 8 Participants
rated this 8 or higher.
How much more quicker is it to get to the needed SKU or file?
55%
Faster SKU Retrival Rate
On a scale of 1-10, did you prefer using the tag filtration system?
100%
8 Out of 8 Participants
rated this 8 or higher.
Testing Adjustments: Group Information to find information effectively.
Grouping information to be direct
We centralized and brought attention to the main actions needed. It guides the user through the actions and arrives to the CTA. This format I made was also used on other tools in this ecosystem!!
Adding visual hierarchy through contrast for importance.
Each card component was cleaner, with needed information prioritized, and buttons to spec sheets or files were prioritized for quick access.
Accessibility: Making technical documents accessible and scannable.
Visual Hierarchy for Fast Scanning
Cards were redesigned with clear headings, font sizing, and spacing — critical for engineers referencing documents mid-task.
High Contrast & Brand-Aligned Colors
Ensured all text passed WCAG AA contrast standards while integrating Zurn’s color palette for brand consistency and legibility.
Keyboard & Screen Reader Support
Tag filters, download buttons, and action cards were made fully keyboard-accessible and screen reader-friendly.
We took these changes from A/B Testing and user testing while adding in branding and colors by grabbing similar tool components used in other areas. Here is how it turned out:
High-Fidelity Designs That Enhanced Navigation, Streamlined Results, and Strengthened User Focus
In this phase every decision prioritized speed, clarity, and accessibility—turning the tool into a faster, more intuitive experience aligned with company standards. I worked with two developers to ensure designs were built out with our changes and design system.
Faster Filtering with One-Click Tags
Removed dropdowns to let users filter SKUs instantly with a single tap—no extra steps.
Familiar List Layout Preserved
Engineers preferred the original list for scanning multiple SKUs. We kept it, but improved structure and spacing.
Visual & Brand Consistency
Applied Zurn’s refreshed design system for clean, accessible UI and improved user trust.
Clean Card Components
Cards visually grouped key specs, actions, and file downloads—making it easier for engineers to scan, understand, and take action quickly.
Mobile Designs
Clear action box
Clear card components
Clear action box
Conclusion
This redesign turned a slow, outdated tool into a fast, intuitive experience—aligned with brand standards and built for real engineering workflows. It proved how user-centered design can boost productivity, build trust, and unlock business value.
Outcome: Driving Efficiency and Business Growth Through Intuitive Design, Faster Workflows, and Stakeholder-Aligned Solutions
UX Outcome
55% task time reduction – Engineers completed SKU lookups faster with simplified flows and direct filters
88% file-finding success rate – A/B testing showed strong usability gains compared to earlier wireframes
100% filter preference – All testers preferred the one-click tag system over dropdowns
Stronger layout & scannability – Visual card grouping and spacing improved navigation and reduced overwhelm
Business Outcome
Increased internal buy-in – Test-backed designs and usability wins convinced stakeholders to prioritize the tool
Improved engineering workflows – Faster access to spec files helped reduce project delays
Better brand perception – Applied Zurn's refreshed design system to reinforce professionalism and consistency
Future-ready UX foundation – Reusable UI patterns set the groundwork for other internal tools and scale
What I learned
Stakeholder Buy-In.
I learned how to advocate for users in a business context where priorities didn’t align. I gained stakeholder support — a valuable lesson in balancing user needs with business timing.
Teamwork & Proactivity
Working for a larger company and having two large project to work on - I leaned on my team for feedback. I also reached out to other teams - marketing, developer, etc - for their insights too.
Empathy & perspective.
Push ego aside and take perspectives from not only users, but from others who are involved in the project such as engineers, etc. Ideas are everywhere.
But wait there more....
Options Zurn Website
Maximizing workflow & performance for engineers
View Final Work
View Final Work
My role
Designer & Researcher
Tools
Figma, Photoshop, Maze
Timeline
1 month
What is this?
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Impact on business.
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Scope
Streamline engineer and architect work efficiency through improving existing interface while supporting design and brand consistency.
Understand
Explore
Materialize
Understanding the problem - Current pain points
Consistency & Standards Issue. The overall aesthetics & designs are inconsistent with the rest of the website, feels like another website.
Flexibility & Efficiency of Use Issue. Long list of options that causes users to scroll endlessly.
Efficiency Issue. Inefficient way of filtering through information to find the proper product & its related files.
Proximity & Scanning Issue. The way information is displayed such as information on the product is not presented effectively.
Explore the task repetitively.
Let’s delve deeper into this.
Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
Lo-fi - Improving access to information.
Kept the list system to easily track information down the page with short numbers was easier, and used colored columns to break up content with branding too.
2
Used a tag dropdown system to simplify and filter options so that engineers can find what they need.
Ex: User chooses a tag option in the dropdown and the list filters to that specific category saving time.
1
Kept the the look the same with other tools with the card that has all action needed to be taken. This connects the Zurn brand so that learnability and consistency are used throughout the website.
3
Once results are found, we used card components to clean up information using visual hierarchy through typography and color.
4
Lo-fi - Improving access to information.
IA structure flows
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
IA structure flows
We came down to two main options and decided A/B testing would allow us to see which ones users would prefer.
Their recommendations were:
Preferred results being shown below. Users they talk with want said too much information causes confusion.
Add a View All page. Many users want to see all representatives regardless of location at times.
Group the initial portion so all the elements are in one spot & users don't have to find what to input and where it is.
Materialize the final product.
Accessibility
Implementing a design system that would have consistent fonts, colors, and standards.
All designs follow WCAG standards in terms of font, colors, and flexibility.
All designs implemented dark mode & mobile versions.
Alt tags and SEO descriptions included with all necessary content.
Adjustments
Grouping information to be direct
Instead of having a page of options all over the page, we centralized and brought attention to the main actions needed. It guides the user through the actions and arrives to the CTA.
Adding the “View All Page”
An addition through testing, users the ability to see all representatives of a product line. This would let them reach out to representatives in a certain area if contractors need to deliver to a particular customer.
Adding visual hierarchy through contrast for importance.
For each card component, they have a visual importance as to which individual they should reach out too. It also clearly states the location and gives a clear indicator of the different calling options.
Hi-fi Designs
Mobile Designs
Clear action box
Visual representation
Clear card components
Clear action box
Conclusion
This project was one of the first projects I worked on during my internship and receiving a project with so much impact on the company overall in terms of revenue, customer interactions, and support. I was able gather research, go through my process, and be able to design solutions that hit the heart of the problem and support users.
What I learned
Data influences design.
Design is limited without data, which helps us see we have to work with, which effects and shapes potential designs.
Progress over perfection.
Collaborating with marketing, digital operations, and HR teams demands quick, iterative designs. Feedback trumps “perfect” designs.
Testing trumps all.
Testing reveals gaps in designs and provide a quick feedback loop of information which provides key improvements.