back arrow

Watchbox management application
UX / UI Design and Usability Test

UX/UI Design |  UX Research | B2C App
About

Freelance work. I am the UI/UX designer for an application that will support a digital watch collection box. The app allows users to perform real-time inspections and check various stats related to their watch collection.

Project Goal

Building an app product from scratch based on client's requirement.

Tasks & Deliverables
UX/UI Design: Wireframing, prototyping, and design system creation.
User Research: Stakeholder interviews, Usability testing (planning & execution).
Team Members
Collaborated with 2 project managers and 1 front-end/back-end engineer.
Timeline
2023 | 3 Months
Outcome
• Delivered a user-centred watchbox app, addressing key pain points of watch enthusiasts.
• By implementing improvements based on usability tests, including optimising the watch addition process and enhancing visual design, resulting in a more intuitive and efficient interface.
Impact
• Demonstrated expertise in end-to-end product design, from user research to implementation.
• Successfully translated user needs into an intuitive interface.
• Showcasing strong problem-solving skills and ability to manage stakeholder expectations whilst delivering improvements for a niche, high-value product.

Problem

Our primary users are male watch enthusiasts aged 25-40, typically owning multiple watches. Our research identifies two main pain points:

Lack of Expertise in Movement Diagnostics

When a watch is dropped, over 90% of watch enthusiasts cannot tell if the movement is functioning properly, making it difficult for the average enthusiast to assess the watch's condition.

Maintenance and Care

Mechanical watches are precision timepieces that require regular winding and maintenance to function accurately. Many collectors own multiple expensive watches but cannot wear and wind them all daily.

Product Feature

The main feature of the watch box is the real time inspection function, it allows users to check on the conditions of the watch box, and make adjustments to manage it on the interface. It also provides related statistic information to the user.
以首頁為例,前後有諸多改動

Design Process

User Research

In the early stages, I conducted lightweight user research and communicated with the client to identify preliminary user pain points.

Desk Researh

Understand the features of watch boxes from different brands on the market.

User interview

The client helped connection with two interviewees, both of them are watch collectors.

Interview outline:
A. Understand User
1. Please tell me about your watch collection. How many watches do you own?
2. How long have you been collecting watches?
3. What types of watches do you collect (e.g., mechanical, quartz, smartwatches)?

B. User Behaviour and experience
1. How do you currently store your watches when not in use?
2. What challenges do you face in maintaining your mechanical watches?
3. How often do you wind your mechanical watches?

C.Product-Specific Questions
1. What features would you consider essential in a watch storage solution?
2. How important is automatic winding functionality to you for stored watches?
3. Would you be interested in a storage solution that could track the performance of your watches?

Feature Development

After research, we define the design scope based on key features derived from user needs, I created the 5 core user stories that guided our development process:

User Story 1  💬
’As a new user, I want to complete the initial setup smoothly so that I can start using my watch box without any hassle.'
✅ Feature: Onboarding
User Story 2  💬
’As a watch box manager, I want to quickly check the winding status of my watches to ensure they are functioning properly.'
✅ Feature: Know the status of automatic winding
✅ Feature: Real-time measurement
User Story 3  💬
’As a watch box manager, I want to easily add and organise my watches to ensure that each one is properly tracked.'
✅ Feature: Add a new watch   
✅ Feature: Replace the watch that is not bound to the watch clip
User Story 4  💬
’As a watch box manager, I want the system to detect any anomalies and notify me immediately so that I can address potential issues.'
✅ Feature: Check the watch anomaly  
User Story 5  💬
’As a watch box manager, I want to set up automatic scheduling so that my watches adjust based on different conditions, reducing manual effort.'
✅ Feature: Enable the watch smart chain scheduling  

Wireframe
/ Wireflow

Then I used wireflows to facilitate a clear discussion with the client, ensuring alignment on UI interactions and user flow.

About 118 pages in total.

Flowchart

Additionally, I used flowchart to help visualise my idea and align easily with client.

With the use of a flowchart, I picked out the focal points or unclear processes to comb through the details, making sure not to miss any chance to improve the design.

Including: log in/sign up process, the pairing of watches and watch box, editing the box, adding new watches to the list.

Mockup

This application was developed based on webpages, RWD version was also made accordingly.

About 90 pages in total.

Includes mockups for mobile, desktop and tablet version.

Design System

Usability Test

Purpose and process:
1. Test the usability. Check if the device interface fits the needs of the users.
2. Search for other potential functions for future development.

Background

Scenario Task

Plan scenarios and tasks targeted to test the chosen functions, allowing the testees to interact with the prototype while the interviewer observes on site.
Think Aloud

Describe behaviour and thoughts when exercising the specified task, to let the interviewer know why and how the testees complete the task.
Interview & Questionnaire

Testees were asked to provide their thoughts on difficulties faced during the test and the product in general. Filled out SUS, SEQ and desirability surveys.
以首頁為例,前後有諸多改動

Usability Test
Subjects Background

The age of the subjects span between 25 to 40 years old, all of which are collectors of mechanical watches or those interested in said watches. One of the testees were a sponsor of the product.

Usability Test
Task

By discussing with the client and PM, we decided on 7 main tasks to perform the tests. The decision making process was filtered by the importance, complexity, and expected time spent on task. It was later paired with a User Story to better describe the scenario.

Prototype

以首頁為例,前後有諸多改動
以首頁為例,前後有諸多改動
Prototypes overview
Taking task G as an example
Prototype Link (All)
以首頁為例,前後有諸多改動

Usability Test
Recap

To quickly grasp the crux of the feedbacks, I guided the client and PM through a 30-minute recap after every test, and established mutual understanding on the outcome of the tests. We took notes on mainly three points: observation, conclusion, and future actions.
Observation: the body and facial expression of the testees, impression on their experiences and stories, and topics that interests us etc.
Conclusion: positive outcomes and regrets about the interview.
Future actions: Things we can do to further improve the experience.

one of discussion notes

Usability Test
Result Analysis

I marked the performance of the interface by analysing the scores of the SEQ tests, SUS tests, and desirability tests, and data from observation notes, interview notes, and test recaps. By pointing out insights and problems from the conclusions drawn from the data, we cleared out directions to carry out further iterations.

Based on SEQ test results, the onboarding process was identified as one of the more challenging user flows:
Based on SUS test results, the design meets the testing standards; however, there is still room for improvement to enhance usability and user experience:
The desirability test results indicate an overall positive reception; however, one piece of negative feedback regarding complexity highlights areas for improvement :
Beyond validating the design and identifying areas for improvement, the test results help clients better envision the final outcome, facilitating buy-in.
Discussion notes. Includes test observations, design suggestions, user quotes and thoughts, number of responses etc.

Usability Test
Iteration

After discussing with the client and PM, we made most fo the adjustments regarding the UI:
1. Optimise the process of adding watches: Previously, we had all the fields to fill in on the same page, which caused a cognitive overload for our users, so we decided to split the fill-out process into several pages to lower the burden.
2. Improve the visuals: The previous design had too much blank space, after the iteration, the spaces were used more efficiently.

18 adjustments made.

Optimise the process of adding watches
Improve the visuals

Key Learnings

End-to-End Design Leadership – Led the entire design process independently, from user research and workflow definition to prototyping and final UI delivery.

Client Communication & Expectation Alignment – Developed strong client management skills, effectively communicating design decisions and iterating based on feedback.

Decision-Making in Research Methods – Every research choice required careful communication and justification, reinforcing the importance of strategic selection and clear rationale.

Confidence in Handling Complex Projects – Strengthened my ability to manage full-cycle projects while ensuring both user and business needs were met.

Other projects