# Online Retail To Customer
# NPS Score
# Goal-Driven Design
# UX/Service/Branding
8 designer teams
Client: Metro Groups China
July-Aug, 2021(6 Weeks)
UX Design
User Research
Metro AG is a German multinational company which operates business membership only cash and carry stores primarily under Metro brand. Starting from 2003, Retail Industry in China entered「Retail 4.0」era. In this trend, Metro China started its expansion towards online platform.
The Metro app of Metro China(麦德龙中国) is an omni-channel shopping platform that cooperates with Metro's offline chain warehouse supermarkets. In this current redesign task, the goal of Metro Group is to improve their current NPS value which was 11.5 (Walmart was 23.3 in 1st place) at the time our project began, according to C-NPS Report from 2020 Chnbrand.
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.
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:
1) Find the right place in collaboration with other designers
When collaborating with other designers, I find my strength is to come up with plans and tools for the team to collaborate in a unified cohesive way, both visually and content-wise. I am also a detail-oriented person. So throughout this project, I got to know where could be my place within a team.
2) Keep business and user goal in mind throughout the Double Diamond process
Managing through the Double Diamond process but always keeping our goal of improving NPS in mind is way more difficult than we previously imagined. As a designer we need to dig deeper into huge amounts of user data to pull out useful insights but at the same time, we need to look up and refer back to our ultimate goal from time to time.
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:
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.
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) Find the right place in collaboration with other designers
When collaborating with other designers, I find my strength is to come up with plans and tools for the team to collaborate in a unified cohesive way, both visually and content-wise. I am also a detail-oriented person. So throughout this project, I got to know where could be my place within a team.
2) Keep business and user goal in mind throughout the Double Diamond process
Managing through the Double Diamond process but always keeping our goal of improving NPS in mind is way more difficult than we previously imagined. As a designer we need to dig deeper into huge amounts of user data to pull out useful insights but at the same time, we need to look up and refer back to our ultimate goal from time to time.
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.
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.
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.
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.
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:
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.