Production, Ideation, and a Brand Refresh
Westlake Pipe & Fittings is a prominent PVC pipe manufacturer offering a variety of industrial solutions for municipal water, sewer, residential plumbing, water well, agricultural, and turf irrigation applications.
- Senior UI Designer
- 4 week duration
- Interaction Design : Design System
Jump to:
Overview
After digesting the design brief developed by the UX team, I was able to synthesize the provided client goals, user research, and wireframes into 3 main objectives:
- Provide an interactive design refresh aligned with the company's brand guidelines
- Design a user-focused parts catalogue, and resource center for an enhanced user experience
- Develop an atomic design system capable of scaling alongside the website's growth, ensuring consistency and adaptability across all elements.
3
Designers
100+
Screen Designs
75+
Components
200+
Design Hours
design
After joining the project post the UX team’s user research and wireframing phases, I seamlessly integrated into the design process. Leveraging their insights, I refined the wireframes into visually compelling UI designs while ensuring alignment with the company’s brand identity and user expectations.
Drawing from the client brief and insights provided by the UX team, I iterated on various screens and design components to optimize the overall user experience.
Table of Contents
The client wanted to feature a jump-scroll Table of Contents navigation on the Home and Segment pages to simplify user navigation on the main sections.
According to user testing insights, feedback from the audience supported this design decision.
After a few iterations, I was able to design a stylized component for desktop view.
Search and filters
“More interactive” was a key takeaway from synthesizing the client brief and user research. After collaborating with the development team to uncover any constraints, I was able to design and iterate a hover animation for key elements.
Hover interactions
“More interactive” was a key takeaway from synthesizing the client brief and user research. After collaborating with the development team to uncover any constraints, I was able to design and iterate a hover animation for key elements
Mobile design
For every web screen designed, I created a mobile version ensuring to keep in mind usability and accessibility. This involved incorporating horizontal scrolling and drop-down content, creating an optimal mobile experience.
"We really love the sub-menu on the left-side of the homepage. This was a perfect implementation of our thoughts and vision. Great job!"
-Westlake’s Product Manager
Summary
During my tenure, I played a pivotal role in the UI buildout across four design sprints, encompassing over 100 screen designs, fueled by countless cups of coffee. This project significantly honed my skills as a UI designer, allowing me to refine my craft of prototyping, advanced auto-layout structures, atomic design systems, and unwavering focus on both user needs and company objectives.
Collaborating with such a proficient UX and development team on this project further enriched my skill set, providing and invaluable opportunity for growth and learning.
With great satisfaction, I was able to successfully meet and exceed the design needs and goals outlined in the beginning
of the project.
- Provide an interactive design refresh aligned with the company's brand guidelines
- Design a user-focused parts catalogue, and resource center for an enhanced user experience
- Develop an atomic design system capable of scaling alongside the website's growth, ensuring consistency and adaptability across all elements.