Zip Water
Zip Water

Zip Water

Brand
Zip Water
Contribution
UX DesignUI DesignDelivery DocumentationInteraction Design
Platform
Web
Type
Website
Year
2023
Credits

User Experience: Joe Purves; Development: Codehouse;

Website
https://www.zipwater.com/

Delivering a complete ecommerce redesign for Zip Water across Australian and UK markets, balancing brand expression with technical constraints.

End-to-end redesign of Zip Water's Australian and UK ecommerce websites serving both retail and wholesale customers. The project encompassed product discovery, purchasing flows, and after-sales support across all touch points. Working alongside the Codehouse development team, I translated high-level wireframes into a comprehensive design system and detailed UI specifications. The project required navigating the constraints of Sitecore CMS and the MUI framework, while maintaining brand integrity and creating scalable solutions for future content authoring.

Challenges

Technical constraints from Sitecore CMS and MUI Core component library often conflicted with product requirements and client expectations. Close collaboration with engineering was essential to balance ambition with feasibility. Managing interconnected design artefacts required a bespoke design operations system to maintain consistency whilst enabling parallel workflows.

Design Process

Working in two-week sprints with continuous collaboration and validation. Each sprint included planning sessions, progress check-ins, feasibility reviews with developers, and stakeholder showcases. I created a design operations framework with six interconnected files: MUI foundations, Sitecore components, documentation libraries, showcase and playground files, and finalised designs. This system enabled efficient iteration whilst maintaining consistency and preparing for project handoff.

Delivery

Delivered comprehensive design documentation across 40+ individual page designs and templates, 40 interactive experiences including search, product filtering, HydroTap selector, and environmental impact calculator, plus 6 complete flows covering cart and checkout, authentication, and service booking. All deliverables included responsive behaviour documentation, accessibility specifications, and developer-ready component documentation to support implementation after contract completion.

✏️

Walkthrough available with additional information on implementation

Homepage (landing)
Homepage (landing)
Homepage (landing) (mWeb)
Homepage (landing) (mWeb)
Homepage (section)
Homepage (section)
Homepage (section) (mWeb)
Homepage (section) (mWeb)
Homepage (image carousel)
Homepage (image carousel)
Homepage (image carousel) (mWeb)
Homepage (image carousel) (mWeb)
Company history
Company history
Company history (mWeb)
Company history (mWeb)
Product listings
Product listings
Product listings (mWeb)
Product listings (mWeb)
Product details
Product details
Product details (mWeb)
Product details (mWeb)
HydroCare
HydroCare
HydroCare (mWeb)
HydroCare (mWeb)
HydroTap Selector (step 3)
HydroTap Selector (step 3)
HydroTap Selector (step 3) (mWeb)
HydroTap Selector (step 3) (mWeb)
HydroTap Selector (step 5)
HydroTap Selector (step 5)
HydroTap Selector (step 5) (mWeb)
HydroTap Selector (step 5) (mWeb)
Articles
Articles
Articles (mWeb)
Articles (mWeb)