A New Design System Saves 50% of Development Time for the Hot Spring Spas Website.
SUMMARY
Company:
Hot Spring Spas
Project:
I led the creation of a new design system for the brand website, with the goal of saving development time, improving responsiveness, and modernizing the brand look and feel.
Responsibilities:
Experience Design, Visual Design, and Process Optimization
Timeline & Team:
6 months with cross-functional team members from web development, content, brand, and graphic design.
OUTCOMES
By introducing a new website design system, we saved development time and improved responsiveness with the following outcomes:
Created over
150 reusable components.​
Provided a
responsive UX on the new site.
Optimized 31 core pages, reducing the bounce rate by 14%.
COMPANY OVERVIEW
Hot Spring Spas offers luxury hot tubs distributed wholesale to dealers worldwide, who then sell them in their stores.
​They are known for their specialized jet systems, innovative water care systems, and energy-efficient features.
​
Their website provides detailed product information, educates visitors about hydrotherapy, and supports lead generation, bringing in over 1.2 million unique visitors annually across roughly 250 pages.
PROBLEM STATEMENT
The website lacked a design system, responsive layout, and modern visual identity, creating friction for the development team and online shoppers.
The old website shown here, which lacked a modern brand look and key responsiveness areas.
PROCESS
This case study features a shortened version of the full process. If you’d like to dive deeper into this project, feel free to contact me!
I led this 6-month project through launch and collaborated with internal and external web development, content, brand, and graphic design team members.
MONTHS 1 – 3
Experience Design
Built the design system on a framework with unified spacing and grids, enabling reusable components and consistent responsiveness.
We used 8px spacing as our base measurement to keep things consistent and 12-column grid setups that fit within our defined breakpoints to keep the website responsive.
Condensing and refining key sections was essential. For example, the jet system area on each model page needed simplification so users could quickly grasp the overview while still having interactive options to dig into the details when they wanted.
MONTHS 4 – 5
Visual Design
Designed modern, high-end components that showcased the product, created an emotionally engaging experience, and eliminated UI inconsistencies.
The primary color palette ensured WCAG compliance, while the secondary and grayscale palettes provided colors for other use cases.
The first formation of simple components come to shape.
MONTH 6
LAUNCH
Process Optimization
Streamlined UX-dev handoff by documenting components, aligned on naming conventions, and developed a shared QA checklist.
One of my process optimizations included documenting grid, layout, and functionality details for each component to eliminate guesswork, streamline handoff, and save time for development.
See the Website in Action!
Disclaimer: The information in this case study is my own and does not necessarily reflect the views of Hot Spring Spas or Watkins Wellness. This case study features a shortened version of the full process. If you’d like to dive deeper into this project, feel free to contact me!
