A new watch customisation experience
Story
Undone is a boutique luxury watch brand based in Hong Kong, It offers premium quality customisable time pieces at affordable price by cutting the middleman & shipping it directly to your door steps
Problem
The watch customising experience both on desktop / mobile was not designed to be as intuitive as it could have been, It takes 29 clicks to complete the experience & on mobile it get’s even worse — I mean the overall experience
You can visit undone’s current desktop / mobile experience here
Responsive Design
Desktop
Based on the current breakpoints set up anything above / or 1440px in width is considered as the desktop version, As google recommends it based on their material guidelines here
But to cater devices like Acer Chromebook, Samsung Chromebook, Apple MacBook Air 11-inch, We will be sticking to 1280px as the start of the desktop version since their popularity is still high, See here
Mobile
Based on the current breakpoints set up anything above / or 360px in width is considered as a mobile version, As google recommends it based on their material guidelines here
But to cater devices like iPhone 3Gs, We will be sticking to 320px as the start of the mobile version
Desktop
Anything from 1280px — beyond is considered as desktop experience
- The left side of the the layout contains the actual product image & will stick during scroll, Making sure you get you an instant preview of all the changes
- Reassurance factors like ( Free shipping / 1 year warranty / 14 days returns ) is always visible to build trust
- The hierarchy has been re-worked to make sure that the actual customisation experience is as real as possible
Mobile
Anything from 320–1279px is considered as mobile experience
The experience for the mobile stays the same with minor amendments to preview the customised watch as you move along the process, Making use of the less screen real estate yet keeping the whole experience cohesive
Results
More than 59% of clicks or taps have been reduced
Seriously, That’s alot.. Not to brag you, Happy watch customising experience…
Thinking process
Below are some of my thought process when working on this assignment, I’m covering some basic stuffs like colour, grids, type & component interations to give you a better overview
Colours
Colours are cornerstone of a brand & It distingushes and helps to create consistent digital experiences, We use colours in meaningful ways in all expressions of the brand
The current UI design uses just 2 colours to make sure that the focus is on the actual product within the relevant mediums ( Print / Web )& not the other way around
Grids
Grids serves as the framework for a page’s layout. Think of it as a skeleton on which a designer could organise / align all graphic elements
The current grid is designed to be flexible
Columns are designed to be in %, Making sure the layout scales to the actual width of the customers screen
Margins ( Vertical space outside the layout ) & Gutters ( Vertical space within the layout in-between the columns ) are designed to be fixed at all mediums to stay consistent
A Baseline grid ( Horizontal space )of 16px has been used to adapt to the 8pt grid systems
Long theory short…
Since majority of the device resolutions are divisible by 8, It is recommened to keep all your spacing values like font sizes, component sizes, line height, etc.. to be divisible 8 as it works best across all the possible devices
Type
Noto, which aims to support all languages with a harmonious look and feel, It also helps to make the web more beautiful across platforms for all languages.
Currently, Noto covers over 30 scripts, and will cover all of Unicode in the future, Brands like IKEA have started using it as their preferred choice
Other components
These are some of the other components being used with in the whole design & along with their interaction design patterns which was used
Note:
This a personal project done with love for the brand ( Undone ), the industry ( Fashion / E-commerce ) & craft( Product Design )
I found this opportunity by visiting their website & thought they were lacking in this area and could have possibly improved
Azhar is the Product designer based in Hong Kong, Who builds experiences for websites / products / mobile apps / SaaS & enterprise softwares using end — end customer centric approach
Research — Design — Feedbacks — Repeat
Portfolio
Design projects
azhars.work@gmail.com
