back arrow

Watchbox management application
UX / UI Design and Usability Test

UX/UI Design
About

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

Project Goal

Building a product from scratch based on client's requirement, including User Research, UX/UI Design and Usability Test.

Type
UX Research, UX/UI Design,  Usability Test
Members
1 UIUXDesigner  2 Project manager  1 Front-end/Back-end engineer
Timeline
2022 | 3 Months
Outcome
Delivered a user-centred smart watch collection box app, addressing key pain points of watch enthusiasts. Optimised the watch addition process, enhanced visual design, and implemented improvements based on usability tests, 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 users mainly focus on male watch enthusiasts and collectors aged 25-40, who typically own multiple watches.

and our research shows that their pain points mainly are two:

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?

Wireframe
/ Wireflow

Then I used wireflows to have a clear discussion of the interface functions and process with the client.

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 program 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 / Guideline

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.
以首頁為例,前後有諸多改動

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.

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
以首頁為例,前後有諸多改動

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

Result Analysis

I marked the performance of the interface by analyzing 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.

SEQ testes, SUS tests, and desirability tests outcome
Discussion notes. Includes test observations, design suggestions, user quotes and thoughts, number of responses etc.

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

Other projects