Hygiene System
UX Redesign, Product Design
Maximizing Device Management
Duration
3 months
Role
UX Design Intern
Tools
Figma, Figjam, Skype, Microsoft Office
Background
Faner Aroma Co. Ltd. is a manufacturer company based in China that specializes in hygienic and aromatic products. As the company grows in recent years with increasing emphasis on IoT (Internet of Things) connectivity technology, it is working towards providing technological services to its customers, distributor brands. Thus, they developed mobile applications HygieneKey and HygieneCloud to help the distributor companies manage dispenser devices. As an UX/UI design intern, my task is to collaborate with the team to assess the current application, devise redesign plans, and coordinate with cross functional teams in the product renewal process.
After understanding the core values of the company and assessing the original design thinking, we found that HygieneKey fails to maximize the multi-device management process due to incoherent settings for single devices, ambiguous scheduling feature, and overall uninviting user flow. Therefore, we set out to redesign its features to facilitate the multi-device management process.
See prototype
Problem
The current design of HygieneKey fails to maximize multi-device management due to overwhelming setting information for single devices, ambiguous scheduling feature, and overall uninviting user flow.
Research
We conducted preliminary understanding of the product by reviewing design ideation blueprints, mechanical implementations, and past design solutions.
Engaging in meetings with the Sales department, we gained more insight about customers’ wishes and desires as well as their demands for the renewal project. We also coordinated with the Engineering department and the Design department to understand the product from multiple perspectives. From these meetings, we gathered the following major insights:
Insights 1.
-
Information overload for single device: the three right-hand corner buttons are overwhelming on the page and difficult to navigate their uses
Insights 2.
-
Ambiguity with scheduling: timer feature is confusing without the tutorial guide
Insights 3.
-
Uninviting user flow: unresponsive UI widgets and buttons making it difficult to execute different commands
Design Process
Wireframing
After discussions, we came up with multiple iterations, mainly in two versions:
-
Version 1: Device information + Edit device on single page
-
Edit is a single section​
-
Off button on top of page
-
Appeal to clients who prefer a minimalistic and straightforward managing system
-
-
Version 2: Device information and Edit device page separated
-
Device information is presented with pre-established settings
-
Edit is a separate, independent page
-
Off button at the bottom of page
-
Appeal to clients who prefer two modalities: view and working
-
After meetings with the Sales Team and the Third-party developer representative, we decided to retain the Info + Edit single page design, with the Off button at the top because more clients prefer a comprehensive system due to their prevalent intent when opening the application: making changes to device settings.
Solution
Clarification of Setting Features
Before
After
-
Separate account settings and relocate to Device List page
-
Relocate and rename Import to View History
-
Relocate Save button
Re-established Scheduling
Before
After
-
Emphasized timer setting
-
Defined working interval and mode
-
Clarified duration setting; changed counter-intuitive wording
-
Changed Import to View History
Redesigned UI Widgets and Buttons
Before
After
-
Re-sectioning different settings
-
Redesigned buttons
-
Specified animated reminders
See Final High-Fidelity Prototype
Takeaway
Through this internship I learned to leverage between multi-dimensional perspectives from varying departments and find balance between original design ideas and viable redesign plans. I also learned to coordinate with cross-functional teams and handle real-life constraints and difficulties.
Wireframing
After discussions, we came up with multiple iterations, mainly in two versions:
-
Version 1: Device information + Edit device on single page
-
Edit is a single section​
-
Off button on top of page
-
Appeal to clients who prefer a minimalistic and straightforward managing system
-
-
Version 2: Device information and Edit device page separated
-
Device information is presented with pre-established settings
-
Edit is a separate, independent page
-
Off button at the bottom of page
-
Appeal to clients who prefer two modalities: view and working
-
After meetings with the Sales Team and the Third-party developer representative, we decided to retain the Info + Edit single page design, with the Off button at the top because more clients prefer a comprehensive system due to their prevalent intent when opening the application: making changes to device settings.
Final Design
Takeaway
Through this internship I learned to leverage between multi-dimensional perspectives from varying departments and find balance between original design ideas and viable redesign plans. I also learned to coordinate with cross-functional teams and handle real-life constraints and difficulties.