# ToB Across Device
# Desktop Software
# Design System
# Branding # Icon
Project Manager
Front-End Developer
Market Manager
July-Aug, 2020(6 Weeks)
UX/UI Intern
Client: LQ-Optics
LQ-Optics (Shanghai) Optoelectronics Technology Co., Ltd（LQ-Optics）is a high-tech enterprise with 500 employees, an industry leader dedicated to the development and manufacture of Raman spectroscopy detection systems.
Flavor is a self-owned brand of LQ-Optics. The original version of Flavor 1.0 can no longer meet the needs of current market, so during my internship, I was tasked to work with front-end developers and PM on designing Flavor Spectrometer Detection Desktop Software App from 0 to 1. We needed to rethink about what role that desktop features should play within the whole IIoT system to satisfy user needs.
The main role of Flavor in the entire spectrum detection system is to directly control the handheld spectrometer or separated modules to perform real-time detection of substances. It also supports users editing, exporting and storing spectral image results in local drives or the cloud.
Metro APP's main user groups are family users age between 25-40. In Metro App, there are 2 types of membership.
1. Normal trial membership is for one-time use.
2. Paid yearly membership ￥199 ($31.13)can get access to both in-store& online shopping.
Metro App is a touch point to connect Metro members online and offline shopping. People can access Metro online shopping in App or enter offline mall by showing membership barcode in App. They also use Metro Apps to get access to self-checkout and self-pick up at Metro and check other membership benefits.
From our earlier industry analysis, the growth rate of the New Retail Industry has slowed down. It is in the late stage of the incremental market for "Retail 4.0" era and is about to reach the stock market. In the future, the development trend is towards high-end and high-quality supermarkets. Also from "SWOT" analysis, we concluded that Metro's opportunity exists in its service quality by taking advantages of its Germany brand gene. Therefore, NPS is the goal.
* The Net Promoter Score is an index ranging from -100 to 100 that measures the willingness of customers to recommend a company's products or services to others.
Since our proposed iteration being launched
According to 2022 C-NPS Brand Rating
Metro's NPS score has since risen from 11.5 to 44.3(+300%)
20.7 higher than its industry average
.Metro Group has since become the Top 1 in NPS score in its Hypermarket sector.
So what could be a better online experience for Metro's existing customers? With this NPS goal in mind, we designed our questionnaire to mainly investigate 3 questions (on the right). We also use mixed user research to collect data:
1) Online service currently brings even more inconvenience to its users 🙇🏻
Metro App not only is an online shopping platform for users, but is also a touch point when people access some online info when shopping in-store. Users have trouble quickly accessing functional information like membership barcode at the entry, self-pickup/checkout and or track their delivery status etc,.
2) Online service in general doesn't convey brand and membership in an efficient way 💬
Metro App is a "virtual window" for Metro Group to communicate with its users. However, they also have trouble perceiving what value Metro Group brand or the paid membership can bring them as a whole through App.
3) Two persona types has merged 👥
2 persona types of Metro users have merged: 1) Quality-driven 2) Practical-driven.
I then helped the team create 2 persona diagrams so that the team can keep in mind of both users needs & behavior patterns in the later redesign stage. Also we summarized what are the detractor/passive/promotor aspects for Metro to help guide our NPS design strategies.
1) We then conducted usability tests on 5 participants of both types of users to investigate what are the prioritized pain points that we need to solve in interface to reduce the percentage of detractors in NPS scoring?
2) We also conducted Competitive Analysis on key points mentioned by both users in "what I focus on" section with Metro's 3 other competitors' App products to analyze how Metro's competitors outcompete/lack in these places and why?
3) Referencing back to what both users' "what I recommend" for Metro, we also mapped out all Metro's touch points and started brainstorming how we could interact with users through our product services to let them "feel" Metro's brand key spirit:
View the GPS location-based available delivery service and delivery status directly on the home page. More membership items.
Feel Metro's brand tone of Rigorous, Professional, Reassurance through interface layout, content strategy and the product image style.
Browse for items in a more intuitive menu structure and more logically understandable information categories.
Show more membership benefits such as redeemable items with membership points, total money saved for membership etc,.
Show a detailed location of self-pickup with a pickup station photo for no more confusion on where to pick up items.
Convey sense of dignity in displaying membership digital card and membership benefits.
1) Responsiveness and Accessibility In Desktop Interface
Due to the short time period of the overall design and development, the feature selected and the correspondence information architecture are mainly refer to competitors. Therefore I will need to consider about what else users may need or what are the alternative solutions here through more in-depth user interview.
2) Design Pattern Exploration
Although it shows after our rounds of iterations that users can find the functions they are looking for in a shorter time compared to other products, I will keep study about whether there exist more optimized interaction design patterns.
Hardware Installation Compatibility 📲
The supporting app is installed in the 50mm thickness phone sized hand-held Raman spectrometer, so it only has one fixed screen size, and also the design need to consider user interaction constraints in both single/double hand holding gesture.
Short Development Cycle and Tight Budget 📅
The project is a 6-week development cycle. Also this redesign is based on the company's existing App framework developed for 2 different target users of the client company considering the control of development costs and the ease of maintenance of the software.
Technical Support 🙋🏻♂️
This project has been set to the highest priority, so I was able to work closely with the development team who would give me freedom in UI pattern design and as much support as they could.
Throughout this UX&UI Redesign task, I also learned a lot about collaborating with engineers, being adaptable about fast development process and exploring new UX design patterns in unfamiliar industry field, and being intentional about each design decision. I was able to:
During this project, I also contributed in:
Explored spectrometer desktop UX design pattern
Established Responsive Layout, Design Guidelines
Designed functional Icon and Components in brand colors
Save 20% development time by using design system
Optimized exporting slices to developers workflow by saving 50% time
Successfully launched in schedule
Before getting started on design, I looked into how different modules and devices work with each other as a system. This whole system consists of 4 main types of products:
To better guide our design and enable everyone on the team to empathize with our users, I further synthesized 2 main user groups through one-on-one user interviews
1) Novice users are Customs Officers in charge of narcotics and explosives detection.
They do not have much professional knowledge about Raman spectrometer. They are sensitive to the detection time and since they may work in a moving environment so they want to avoid any unexpected irreversible accident mistakes.
2) Expert users are Researchers in the labs for test result detection.
They usually test 5-10 samples at a time and are not sensitive to the time. They care about whether the spectrometer app can give professional results constantly, as well as support flexible adjustment.
Through a Heuristic Evaluation, the original app version contains serious usability issues, preventing a smooth usage.
I, together with developers and PM came to 3 most prioritized redesign goals
1. Split Journeys but merge at some points
2. Ease of use is the core
3. Enable consistency and flexibility
Reduced steps and split user flows to cater different user habits
1) Show Model Update status directly on the main page for both users to reduce steps
2) Expert users set parameters for laser before they start the detection task
2) Novice users want to go straightforward towards detection after login
Information Architecture(IA): Optimized Structure for shorter path and more understandable names
I split Information Architecture into 2 and optimized elements' names for users to understand without any professional knowledges needed.
Both users can go straightforward to detect with having to go into Model Updates page to check status.
Our team has experienced 3 main iterations through collecting feedback from clients and user test participants. From 1.0 to 2.0, we expanded the Mid-Fidelity prototype from the main detection user flow to most of user screens, and from 2.0 to 3.0, we iterated based on client's and usability test feedback.
To enable consistency and flexibility, I also created style guide according to Exponent brand color patterns and brand keywords. Also I complied to WCAG 2.0 Accessibility and referred Material Design components dimensions for a quicker development.
Catering For Different Needs of Expert and Novice Users
Home Page
1) Give Novice users preset 3 strength levels for quick detection; "double click to unlock" to prevent accidental touch
2) Give Expert users short cut on Home Page to adjust parameter setting; "swipe to unlock" to minimize displacement from vibration by tapping
Detection Result
1) Give Novice users text version result with five alternatives to select from because they need to see whether there contains any explosive/drug substances
2) Give Expert users spectrometer version result because they need analyze it further
3) Reorganize page layout and interaction pattern to help both users view and edit substance info efficiently
Model Library
Before: Users need to click into each button to access library or related functions(load library, search library and synchronize library)
After: Users can view and control most of functions within one page
Device Calibration
Before: There is no clear indication of the progress of calibration and no safety and sequential instructions for new users
After: Add sequential instructions and highlight safety tips; Add progress loading animation to show calibration progress
Our team has experienced 3 main iterations through collecting feedback from clients and user test participants.
1) Responsiveness and Accessibility In Desktop Interface
Due to the short time period of the overall design and development, the feature selected and the correspondence information architecture are mainly refer to competitors. Therefore I will need to consider about what else users may need or what are the alternative solutions here through more in-depth user interview.
2) Design Pattern Exploration
Although it shows after our rounds of iterations that users can find the functions they are looking for in a shorter time compared to other products, I will keep study about whether there exist more optimized interaction design patterns.
1) Interaction ways differ across platforms 💻📱
How to understand the differences of different platforms, and maximize the advantages of using Desktop software through interface layout and interactive settings?
2) Short Development Cycle and Tight Budget 📅💰
How to let our targeted user switch platforms for different tasks seamlessly and how to manage multiple connected instruments in a unified way through the desktop terminal?
3) No Existing Visual Language System 📈
The desktop software has more professional functions that allow users to edit and adjust the detection spectrum results. How to establish a set of interface design system (icon, UI module) to make the interface easy to understand?
4) No Established Standard Among Current Competitors 🤷🏻♂️
The interfaces from current competitors products provides a general viable layout. However the existing layout is not intuitive and user friendly enough when it comes to actual detection.
Based on our previous user materials, our targeted user group of Flavor is Expert users(Researchers) who use desktop version spectrometer softwares for substance detection. I then created persona to help align the team about user needs throughout the product development process.
In order to figure out what problems are users currently facing with, I used Shadowing methods to observe Expert users on-site about how they use current desktop software solution to detect chemical substance and how are the needs differ from their needs when working completely on handheld spectrometer platform. I then Identified 3 main user pain points that we want to address in our new Flavor Desktop software:
Through analyzing differences in desktop interaction, the role that desktop software plays in the whole IoT system, as well as design guidelines proposed by Alibaba and other companies for the design of To B products, I created design goal of Flavor, which is further confirmed by PM and Developers on the team.
After ideated for design solutions, I finally narrowed down to 4 main design strategies.
Based on 4 main user tasks(Detection-Library-Parameter-Setting), I created new information architecture through Card Sorting with our target user representative, this ensured that all features related to each task are intuitive for users to find, and also, helped us improve the titles of some professional feature based on users mental model.
The left and right toolbars can be shrunk and expanded so that it can adapt to :
1) Different screen widths so that the software can be used in both desktop and laptop on the go
2) Different user tasks, for example when users view the spectrum image they want an more immersive interface with no sidebars
1) Use similar mobile version design elements and some logic to reduce additional cognitive costs for users when switching between the two.
2) Drawing on design elements and inductive logic from Adobe Illustrator and Excel, users can migrate and understand and master them quickly.
In the traditional navigation bar solution, the functions of different steps are placed on the same interface no matter in which user task scenarios.
So I use tab system so that users can know what functions they can use corresponding to their different tasks.
Using the difference between the desktop mouse and the mobile finger interaction, the advantages of the desktop are used to meet the needs of users to meet more spectrum editing and viewing tasks:
1) Mouse left-click to see the
2) Hover (hover displays multiple x, y axis values at the same time)
3) Convenient mouse floating view operation: function shortcut menu
4) Drag to pan the map, combined with other shortcut keyboard keys ctrl/shift, etc.
5) Scroll the wheel to zoom the map scale, different states (for example, when the mouse is placed in some specific positions, it will become a horizontal adjustment arrow)
I designed Flavor Logo, and icon sets to help better represent professional spectrometer functions.
Planned for Desktop software features, layout and Information Architecture from 0-1
Explored spectrometer desktop new UX design pattern
Established Responsive Layout, Design Guidelines
Created a design system with components, font , icon, logo for visually consistency
Save 20% development time by using design system, successfully launched in schedule
Optimized exporting UI slices to developers workflow by proposing Zeplin
Due to the short time period of the overall design and development, the feature selected and the correspondence information architecture are mainly refer to competitors. Therefore I will need to consider about what else users may need or what are the alternative solutions here through more in-depth user interview.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.element
We outreached to various Seattle-based senior communities and conduct 40-minute semi-structured interviews with 1 resident of a senior assisted living community in Capitol Hill and 1 staff member of a senior community center in Lake City, Seattle to explore the domain and understand different perspectives. We are curious about :
Our interview provides us with a clear picture of how the disaster response system structure works in senior communities and what are some gaps inside it. We also discover that there are several potential service directions for us to further dive in.
So based on Ecosystem Map we chose to prioritize the mid-level management staff at a senior living community as our primary user because in a typical senior living community, mid-level management (directors, managers) interface with all levels of staff in the community, from residents to vendors to administration.
The goal of this Co-design session is:
I further synthesized 3 main findings about disaster preparedness through Co-Design.
Based on our Co-Design and previous research, we have decided that our service will be a disaster emergency plan toolkit for mid-level management users, we conducted Easy 8's and decided that:
Our solution should be a lightweight sets of disaster preparedness tools that will help educate staff interactively by embedding into their daily work routine.
We finally picked idea:
To further visualize how our toolkits help train mid-level staff , we created user journey map to demonstrate how our solution appear as a complete journey for mid-level staff getting trained for disaster preparedness.
1) Card Deck Concept Prototype
To further demonstrate how the whole service will be look like after training and to better communicate our solution ideas with stakeholder in Kin On to get more feedback, we created Service Blueprint and after-training ideal User Journey Map.
1) Service design depends on heavily on communication with stakeholders and CoDesign is not Panacea.
CoDesign sounds very fancy and we think it is some standard "must-have" for service design. However, as we practiced it by gathering multiple stakeholders onsite, we discovered that we need to pay close attention to the social dynamics exist in multiple parties and we should mind people may act differently depending how we narrate and guide the activities.
2) One need to feel comfortable when dealing with ambiguity
In a service design project, we need to equip ourselves with a systematic thinking ability to look at the whole picture and framework inside a complex ecosystem. Therefore, I learned to get comfortable with keep ambiguity of end solutions and be more open to an overarching solutions beyond screen.
Fun Facts About Me —「I have been a cat sitter for total 3 cats for my friends and I really enjoy doing this favor 」