back arrow

Watchbox management application
UX / UI Design and Usability Test

UX/UI Design
Project Brief

An iOT product, a smart mechanical watch colletion box.users may have access to real time inspections, stats checking. I am the UI/UX designer of the project, in charge of product interface designing, as well as planning and running usability tests.

Project Members
1 Designer  2 Project manager  1 Front-end/Back-end engineer
Role and tasks
Designer:Webpage UX/UI Design, Design finalizing and delivery, Design quality control, Usability Test planning and executing.
Timeline
2022 | 3 Months
Challenges
1. Lack of relative background
The design was carried out with no experience with watch boxes nor mechenical watches, but it was overcame by effective and detailed communication.
2. Completed under a tight deadline
The process was done within 3 short months, from finishing the design, to running usability tests, to finishing the iterations. It was a test on accumulated experience to make decisions to finish the project effectively.
Learning
My first time working as a freelancer made me realize that it's not an easy task to strike balance between satisfying the clients' expectation and my own, but I also gained insight on what parts to pay more attention to, in order to build a more complete SOP, so that I may work with a smoother workflow in the future.

Being able to get my hands on designing process other than researching was a great gain of experience, I learned a lot throughout the collaboration, and might work with them on the following iterations.

Feature

The main feature of the Weaven 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

Flowchart

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.

Wireframe
/ Wireflow

Started with a wireflows in the early stages to have a clear discussion of the interface functions and process with the client.

About 118 pages in total.

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

Ask testees to describe their behaviour and thoughts when exercising the specified task, to let the interviewer know why and how the testees accomplished the task.
Interview & Questionnaire

Testees were asked to provide their thoughts on difficulties faced during the test and the product in general. Testees also 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. Optimize 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. Optimize the visuals: The previous design had too much blank space, after the iteration, the spaces were used more efficiently.

18 adjustments made.

Optimize the process of adding watches
Optimize the visuals

Other projects