Zip Tap Interface & System
(INDUSTRY PROJECT)
THE BRIEF
The client intrusted me to design their digital interface and system for their upcoming product of a Zip Tap. Due to my NDA I can only disclose approved details of my design process and outcomes below. The client themselves will remain anonymous.
THE SOLUTION
I designed two interfaces and systems, one for a screen integrated into the tap itself and another for the underbench unit. My goal was to utilise my UI/UX skills to design user-friendly, modern and aesthetic interfaces that are easy to understand and navigate. From my market research, I discovered that existing Zip Tap interfaces tended to be outdated or basic in their graphic design and presentation. I wanted to make this system stand out from the market and lean into a more modern design aesthetic.
SKILLS REQUIRED
TAP INTERFACE v1
There were three main screens to design for the tap interface. The home screen features the time, date and built-in warning icons for maintenance purposes. Then two alternative screens for when the tap was being used in either the cold or hot water states. These required the water temperature, time and warning symbols to be visible.
​
I started by sketching wireframe mock-ups in a client meeting to finalise the features the client wanted integrated. Next, I conducted market and existing product research, understanding the competitor's design and pinpointing elements I could improve in ours to make it stand out in the market. Before presenting a progress update exploring the screen states that can occur based on preset functions agreed upon in the meeting, these are shown below. I explored various layouts and typography to create a visual cohesive design that was intuitive, clear and readable.
ROUGH TAP ITERATIONS
Resting Screen
Warning ON Options
Colour variations to visually communicate the warning symbol is on to the user. When off the symbol stays 'grayed out' on the screen.
Individual Temperature Screens
Safety On Option
When the safety lock is on the symbol turns white, when off it stays “grayed out”on the screen
Symbol Variation
Alternate design for the symbol signifiers on the tap interface, we found these to be a bit crouded on the small screen.
Arial
Verdana
Font Variations
Lato
Lucinda Fax
TAP INTERFACE v2
After reviewing and receiving feedback from the client a second round of tap interface designs were generated for review. In this interaction round, I included the LED surround that will be integrated into the screen to help visually indicate the tap states to the user. I created a glow effect to the screens in Adobe Illustrator to represent a more realistic idea of what the final interface would look like with LEDs. (Note the time PM etc shifted during the conversion of the files so the have overlapped the time. In the final design these are spaced more apropriatly)
​
​
TAP ITERATIONS
INTUITIVE
Increased Readability through Typography
Recognisable Symbols
Clear Visual Cues - LED Integration
USER FRIENDLY
Designed for Human Error
Visually Apealing
UNDERBENCH
INTERFACE
The underbench interface is the largest part of this system. I produced an information architecture to map out every sub-page that was required in the settings. I then completed flow maps in tangent to designing the interface mockups to increase usability and account for human error whilst interacting with the system. Before designing the interface mock-ups I completed market research to understand existing competitor products and pinpoint areas where this interface design could stand out and be set apart from the market standard. The intention was to design a cohesive system that was modern and visually appealing. I recognised existing products in the market were quite outdated in their system design to what is stereotypically expected in the modern era.
​
INFORMATION ARCHITECTURE
FLOW MAPS
UNDERBENCH
INTERFACE
I have only been approved to share the final design interface that was selected as shown below. Prior to this, there were multiple mock-up designs sent to the client for review, There were multiple interactions sent for refinement to get to this point of the design. To maintain the client's privacy the company logo has been excluded.
UNDERBENCH INTERFACE
CODING & FINAL DESIGN
The final design mockups and information architecture were handed over to software developers to code and make the final product come to life.