Where To Buy Zurn Website
Streamlining customer’s ability to contact sales reps for product purchase.
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 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.
Explore the task repetitively.
Lo-fi - Improving access to information.
1.
Used the similarity principle to grouped similar elements and separate the flow.
Ex: User can flip between Find a representative & Finding Distributors in a card component with tabs.
2.
Added user control & freedom by adding a map the can view and allowed them to adjust distance/move around within the map.
3.
Used aesthetics & minimalist design by adding more visual elements that simplified the process and guided the user down the page.
4.
Focused on scannable & clear hierarchy by having results show up in a card component with clear labels that showed user who they can contact.
Where To Buy Zurn Tool
Sales Rep Finder - Improving User Connections & Driving Revenue
Redesigned a core B2B sales tool, boosting conversions by 8% by streamlining rep search.
My role
Designer & Researcher
Tools
Figma & Maze
Timeline
3 weeks
Revitalizing a Critical Sales Tool: Enhancing User Experience & Brand Alignment
During the Zurn-Elkay merger, the "Where to Buy" tool — a critical customer touchpoint for finding local sales representatives — needed a full redesign to align with the new brand and improve usability.
Before:
The "Where to Buy" tool was crucial for connecting customers with local sales reps, but it had usability issues: slow load times and inaccurate search results. This led to lost sales opportunities.
After:
I helped lead the redesign to improve:
Structure: Streamlined search flow for faster access
Flow: Simplified the user journey for better navigation
Visuals: Refined UI to align with Zurn-Elkay’s new branding
After:
I helped lead the redesign to improve:
Structure: Streamlined search flow for faster access
Flow: Simplified the user journey for better navigation
Visuals: Refined UI to align with Zurn-Elkay’s new branding
Revamping a High-Stakes Tool to Stop User Drop-Off and Revenue Loss
The ‘Where to Buy’ tool, vital for connecting customers with local sales reps, was plagued by slow load times and inaccurate results, causing user frustration and dropped opportunities.
The Challenge
The "Where to Buy" tool was critical for customers to find local sales reps and place orders. However, users faced:
Slow, inefficient flows to reach desired result
Unclear results with multiple numbers & names listed
Incorrect IA structure resulting in no results = when there are options.
Impact
Increased frustration
Higher drop-off rates
Resulting in lost sales and reduced revenue
This tool was critical for driving revenue, so these issues affected not just user experience, but potential sales.
Redesigned a Core Tool During a Brand Overhaul
Team
2 Developers, Senior UX/UI Designer, UX/UI Design Intern(Myself)
Role & Impact
As a UX/UI Design Intern during the Zurn-ELkay merger, I independently redesigned and rebranded the "Where to Buy" tool, aligning it with the updated Zurn brand while improving its user experience.
With mentorship from a senior designer, I collaborated with marketing and development teams, increasing the conversion rate by 8% and ensuring the tool seamlessly integrated with the broader website redesign.
Uncovering UX & Revenue Gaps: Competitor Analysis & Interviews
So I had to work around these obstacles and tackle methods that would be the most effective:
• Competitor Analysis: Evaluated competitor tools to identify UX gaps and benchmark performance.
• Usability Review: Identified key pain points in the existing tool, causing user frustration.
• User interview with w/secondary target audience(sales reps): Gathered customer pain points from sales reps who engage directly with users.
So I had to work around these obstacles and tackle methods that would be the most effective:
• Competitor Analysis: Evaluated competitor tools to identify UX gaps and benchmark performance.
• Usability Review: Identified key pain points in the existing tool, causing user frustration.
• User interview with w/secondary target audience(sales reps): Gathered customer pain points from sales reps who engage directly with users.
Reviewing Existing Usability Issues: Efficiency & IA Issues
Using a usability checklist, We went through current pain points that existed to see what issues users were having.
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 filter information more efficiently without being distractive.
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.
How are these affecting users?
Poor IA Structure
Users select by location, then product, but nearby reps may be missing. Some zip codes aren’t listed, with no guidance on next steps.
What should I do next?
Lack of clarity
Locations and zip codes are listed but lack product details and proximity. No visual reference to the user’s location.
How do they choose? What if multiple share a zip code?
Weak aesthetics
Results lack scanability and priority, causing confusion and delays. There are different options with no clear labels or direction.
Who do I contact? Which number or email?
After reviewing these issues, we decided to meet with our secondary target audience to see if they saw the same issues from customers.
User Interviews: Sales Rep Interviews Revealed Key Friction Points Blocking Conversions
A roadblock we had to work around was not being able to interview customers directly, and we had to pivot to the next best thing: sales representatives who talk with them everyday.
We also had to acknowledge that it is not directly from customers, but work around it. Here is what we found:
Losing Customers. Customers faced long wait times to reach the right rep, and sales reps noted many users abandoned the tool out of frustration, turning to competitors.
No sales rep near me? Customers were often mismatched with nearby reps, causing frustration and lost sales opportunities.
Which number do I call? Customers were confused by multiple contacts listed per location, unsure of whom to reach out to.
Feature Matrix: Competitor Benchmarking Informed a More Intuitive Search Experience
Feature/Brand
Map-Based Search
Search by Product Type
Search by Location (ZIP/City)
Filter by Distributor vs. Rep
Dealer Detail View
Mobile Usability
Search Result Feedback
Kohler
✅ Yes – interactive map
❌ No
✅ Yes
❌ No
✅ Full contact, directions
✅ Fully responsive
⚠️ Basic error states only
American Standard
❌ No map view
❌ No
✅ Yes
❌ No
✅ Basic contact
⚠️ Partial responsiveness
❌ No guidance
Delta Faucet
✅ Yes – embedded Google Map
✅ Limited by category
✅ Yes
❌ No
✅ Limited info
✅ Fully responsive
⚠️ Minimal support
We reviewed the following companies: Kohler, American Standard & Delta Faucet who were two direct companies who had a similar tool to see what customers were experiencing on their end. Here is what we found from competitor analysis.
Map-Based Search is Essential for Navigation. Most competitors use map-based search tools, helping users visualize dealer locations.
Search Filtering by Product Type & Location. Ensuring this flow is supportive and helps users find a sales representative near them.
Clear, Direct Contact Information. Competitors like Moen and Kohler provide direct contact options within their locator tools.
This was valuable to see that our other findings from other methods supported by this analysis by having flows be efficient, decreasing information input, and yielding results that had good usability while being aesthetically pleasing.
Our Overall Research FIndings: Quick Access + Clear Results
Our main constraint was the inability to directly interview customers. Instead, we relied on secondary perspectives, which we analyzed cautiously, based on designers' firsthand experiences."
Quick access to options. Our users were businesses that wanted quick access to sales representatives to learn about products or make direct orders.
Our flow structure is wrong. Picking location first then product line caused users to have no results at times.
Too much time. It took too long to get to the desired result and steps could be minimized.
Who do I reach out to? The results were not clear with different numbers and names listed without titles.
Information Overload. Poor result aesthetics leading to poor scanability and confusion among users.
But this layed a foundation of understanding from which ideation and designing could have fundamental areas of focus: efficiency and usability with improved aesthetics.
Ideation Phase: Streamline Flows and Align with a Rebrand
Ideation & Collaboration
Collaborated with two developers and a senior UX/UI designer to address user pain points and align the tool with Zurn-Elkay’s rebrand. Led wireframes and layout decisions during a full-site redesign, rethinking the user flow for better usability.
Goal:
Redesign the “Where to Buy” tool to reduce friction, improve efficiency, and reflect updated branding.
Key Contributions:
✅ Led wireframes and layout for a user-focused, flexible redesign
🔄 Reworked information architecture to streamline navigation
🧩 Simplified the user flow with a clean, scannable layout
📊 Worked with data teams to ensure accurate, usable results
🎨 Applied new brand visuals with UX best practices
Outcome:
Improved usability, increased task efficiency, and reinforced brand trust.
Improved User Flows to Streamline Sales Rep Search
Problem:
Users struggled to find the right sales rep because the tool forced them to choose a product line before entering their location—often leading to no results or incorrect matches.
Approach:
To solve this, we mapped the existing information architecture and user flows to identify friction points, then collaborated with data teams to restructure the logic and improve accuracy.
Key Actions:
🗺️ Mapped IA and user flows to uncover usability issues
📊 Worked with data teams to analyze backend data accuracy
🔁 Reordered the flow: location first → then product line
✅ Improved rep matching, reducing drop-off and boosting trust
Next: Lo-fi wireframes for reducing friction points & determining layout
Our main goal with lo-fi were making designs efficient and reduce any friction points when entering information, the output focus was to have clean readability and information for the customer. So here is what we did:
✅ Grouped inputs in a single block for focused interaction
🗺️ Interactive map tied to location cards for better visual clarity
🧾 Labeled, scannable cards for fast identification of contact reps
We faced a constraint: the data team’s delay in providing usable backend data. So we created design alternatives that would still function gracefully in case the data wasn’t available.
Lo-fi - Improving access to information.
Users can toggle between “Find a Rep” and “Find a Distributor” using tabbed cards. (Similairty Principle)
1
Users can pan, zoom, and adjust search radius directly on the map.(User Control & Freedom)
2
Introduced visual elements like a map without overwhelming the user.(Aethetics & Minimal design)
3
Used labeled card components to highlight key contact info.(Scannable & clear hierarchy)
4
Lo-fi - Improving access to information.
With the launch deadline approaching, we ran A/B tests on layout variations to validate our design decisions in a simple flow. We also gathered targeted feedback through interviews with sales reps to refine usability and accuracy.
A/B Testing
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.
A/B Testing - Validated Layouts for Clarity, Speed & User Confidence
We tested two layout variations for the input and results pages with a secondary user group to identify the most intuitive structure before moving to high-fidelity designs. We tested 6 sales representatives through zoom by gather qualitative and quantitative data through observations, comments & task on time.
Key Findings:
🧹 Less clutter = more clarity: Users preferred results shown below inputs to reduce visual noise.
👀 Wanted more flexibility: Requested a “View All” option to browse all reps, leading to increased satisfaction.
🧭 Clearer starting point: Grouping input fields helped users know exactly where to begin reducing confusion.
These insights directly shaped our hi-fi designs—ensuring a layout that’s clean, efficient, and aligned with user needs.
Adjustments from Testing: Group & Guide Through Information
Grouping information for clarity.
Instead of scattering actions across the page, we centralized the core inputs and guided users step-by-step—leading them clearly to the primary call to action.
Adding the “View All Page” for flexibility.
Based on testing feedback, we added a View All page to let users browse all reps by product line—helping contractors reach specific contacts for unique delivery needs.
Adding visual hierarchy for importance & decision-making.
introduced visual hierarchy using contrast to draw attention to key actions, reducing cognitive load
These findings led us to make vital adjustments to hi-fi’s and led us to designing hi-fi that were aesthetic yet supported our customers in terms of efficiency and clarity reducing confusion and user error.
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.
Scalable, Accessible, and WCAG-Compliant Foundations
We prioritized accessibility and consistency by building from WCAG-compliant standards and flexible UI foundations—ensuring a seamless experience for all users.
Key Accessibility Highlights:
WCAG-compliant color contrast, font sizes, and interface flexibility
Dark mode and mobile-friendly layouts for user comfort
Alt tags and SEO descriptions added for all meaningful content
Unified design system to ensure consistency across components
Adjustments from testing
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 and is easily readable. It also clearly states the location and gives a clear indicator of the different calling options.
Hi-fi prototypes
Mobile Designs
Clear action box
Visual representation
Clear card components
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.
High-Fidelity Designs That Enhanced Navigation, Streamlined Results, and Strengthened User Focus
In this stage, we applied Zurn-Elkay’s updated branding, colors, and visual system—refining layout details based on user feedback and testing. I worked with developers to bring these designs to life while adjusting and staying withitn our design systems guidelines.
Key Improvements:
🧭 Introduced a "View All" page for broader rep browsing
📍 Displayed results below the map for a more intuitive scan path
🎯 Enhanced visual hierarchy in card components for clearer contact info
✨ Polished micro-interactions like drop shadows and input box styling to reinforce focus and depth
Mobile Designs
Clear action box
Visual representation
Clear card components
Ideation & Design Summary
Our designs were approved after stakeholders, the business team, and secondary users saw improved value and efficiency. We then collaborated with developers to ensure a smooth handoff and implementation.
Outcome: An efficient, visually streamlined tool that helps customers easily connect with sales reps.
UX Outcome
• +8% Conversion Rate: A measurable increase in users connecting with reps after launch.
• Streamlined Flow for Faster Sales Support: Simplified user journey, minimizing friction and improving task completion.
• Cross-Platform & Scalable: Reusable UI components, optimized for mobile/desktop, and WCAG-compliant for accessibility.
Business Outcome:
• Revenue Potential: Improved rep matching increased lead quality and the likelihood of completed orders.
• Brand Alignment: Fully aligned with Zurn-Elkay’s updated brand, ensuring a seamless user experience across the site.
• Platform Scalability: Became a model for other digital tools—setting design and usability standards company-wide.
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.
But wait there more....
Where To Buy Zurn Website
Streamlining customer’s ability to contact sales reps for product purchase.
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
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.
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.
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.
Lo-fi - Improving access to information.
Used the similarity principle to grouped similar elements and separate the flow.
Ex: User can flip between Find a representative & Finding Distributors in a card component with tabs.
1
Added user control & freedom by adding a map the can view and allowed them to adjust distance/move around within the map.
2
Used aesthetics & minimalist design by adding more visual elements like a map while straying from overwhelming the user.
3
Focused on scannable & clear hierarchy by having results show up in a card component with clear labels that showed user who they can contact.
4
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.
Mobile Designs
Clear action box
Visual representation
Clear card components
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.