UX Case Study: User-Centric Luxury Catalog & CRM System

Introduction

It is hard to perform sales of luxury products in the retail store, the business needs an iPad application to assist in the sale process and to integrate the sales data with the existing ERP system.

I was in charge of the full UX/UI Design of the tablet application to enhance the customer experience and business process. After conducting field studies and several user research, we have a deep understanding of user behavior and mental modal, after several usability tests on the rapid prototype, we launched the application in the first sprint and received positive feedback from stores worldwide.

Vision

The Luxury retail shop needs a unique catalog application that suits the unique requirements of their users and business flow, the business also needs a solution sync with the existing ERP system to integrate with the whole operation of the business.

Realities

ERP systems are not focusing on the specific use case, especially for the special workflow of Luxury goods that have a unique life cycle and sale process, the company needs a user-centric solution for both their internal and external users.

Mission

Create a user-centric application for internal and external users that suit the unique business logic, especially to cope with the unique sale process. Furthermore, provide solutions to assist customer decisions and sync with the existing ERP system.

‍

‍

Problem Statement

It's hard to record the preference of the customer when they need a long decision time for a huge amount of purchase of the artwork, there are also pain points for store sales to record preference and demonstrate how the artwork will look in the customer's home.

The following are the major pain points the product needs to handle under this project:

1. Customers will lose interest during the long purchase decision, the product needs to record the customer's preference and allow sales to read the customer information anytime, anywhere.
2. It's hard to imagine how the artwork will fit in the customer's home or venue, we need visual assistance for the customer to make a purchase decision.
3. The traditional printed catalog is not a good approach to sales, the product needs to provide a digital catalog for a user to browse the artworks in an interactive way.
4. The purchase process with print-out paper is outdated, the product also needs to handle the purchase process and sync the data with the existing ERP system.
5. Stock keeping needs to be precise, artworks are not easy to move in nature, and the product needs to handle stock-taking works in a smarter way.

‍

‍

UX Research

With a tight project timeline, we don't have many resources for UX activities, we conducted several field studies and user interviews to understand the user behavior and mental model of the customer and store sales to design a user-centric solution. As I am under an NDA, the photos of the research process are altered and censored to cover sensitive information.

User Personas

After understanding the user behavior and mental model, we create a brief user persona to remind ourselves, there are mainly 5 types of users that will interact with the product:

1. Individual customers - using the product to make the purchase decision with the tablet app in the store and in the mobile app in later phrases
2. Business customers - using the product to make a bulk purchase of artwork for hotels or interior design projects
3. Store sales and managers all around the world - use the product to assist their sale process and to confirm orders
4. Back office admins - using the product to sync data with the existing ERP system to manage daily workloads
5. Management team - using the reports generated by the product and the existing ERP system to make the important business decision

‍

‍

User interview & Field Study

The business process and logic of the client are very special, after the stakeholder interview, we proposed to visit the store in Hong Kong to conduct user interviews and a field study.

The goal was to obtain qualitative data by interviewing store sales to understand their behavior and the mental model behind each step of the sales process. Besides interviews, we also observed the physical environment of the store, and try to visualize how the interaction between users and the product will happen, using this data to make the right design decision.

‍

‍

‍

Competitive Analysis

As the client is in a niche market, there are not many competitors in the market, with the constraint of NDA, I could not reveal the whole document, but I am able to share the research on the not compatible target I studied for the AR feature of the product:

‍

‍

UX Analysis (MVP)

After collecting data with the UX research, we gathered all the information in an Affinity Mapping miro board to analyze the finding we uncovered during the research.

We found that users need a simple onboarding process with minimal, the basic features of VB, good to have a reward system to collect points when users are interacting with the product and will try to convert the point to

Affinity Mapping

This is a cooperative UX activity to upload the finding in a Miro board for the team members to access, after the pause of the project, I carried on the research and removed all the sensitive data which is not allowed to disclose.

The Affinity Mapping Board mainly consists of the following information from the UX research.

• Interview Scripts
• Interview notes
• Usability Test Facilitator Menu
• Survey Question
• Survey Data Analysis

After several online affinity planning sessions and individual UX analysis sessions, we organized the finding and summarized the pattern we observed.

For usability tests, we are looking for:

• Primary and secondary goals
• Pain points
• Mental models

For the User interview, we are looking for:

• User goals
• Context

Section Images

• [Miro Affinity Mapping Session]
• We conducted the virtual affinity mapping session online in Miro to analyse on the data with video call. (Sensitivity data’s are covered)
• [Miro Affinity Mapping]
• We use the affinity diagram to gather all the quantitative and qualitative data, observing the pattern and to outline the mental model of the user and to summarise the user behaviour. (Sensitivity data’s are covered)

‍

Customer Journey Map

We identified the pattern in user goals, pain points, mental models, and context, then we summarised and defined the high-level steps to map with the touchpoint in our project scope.

With the customer journey map, we can have a macro picture of how the user will interact with the product and business in different touch points, knowing their pain points in a different stage of their journey to solve problems, discover the opportunities behind and introduce features as a touchpoint to map with the pain points of user and to create value for the user by solving certain problems they faced in the journey.

I created the following Customer Journey Maps to outline the user goals, behaviors, and pain points in each stage of the journey and to outline the touch points and opportunities behind them.

• User Onboarding & KYC process
• Funding and transfer money process
• Reward System and point conversion process

Section Images

• [Customer Journey Map - Onboarding & KYC Flow]
• Based on the research of our existing onboarding & KYC feature, we outlined the user pain points and design opportunities from our findings
• [Customer Journey Map - Funding & Money Transfer Flow]
• User mainly follow the onboarding flow to find their accounts and perform money transfer in the later stage. Touchpoint after their first transaction are the design opportunities for user to engage more with the product
• [Customer Journey Map - Reward, Point Convert & Web 3 Wallet Flow 3]
• It’s a relatively linear process that user interact with the reward system, accumulating point, convert the points to crypto and to interact with the web 3 wallet for storing the crypto

‍

‍

Solution Approach

The core thinking of the user-centric solution is to use dynamic interactive features to assist internal and external users to make relative decisions:

• Dynamic interaction during sales activities to record customer preferences
• The use of AR/VR to provide visual assistance for customers to make their decisions
• Dynamic syn with the ERP System during the different flow of business operations

Solution 1: Customer Profile - Tracking customer information for CRM System Integration

Using the customer profile feature to record and recall customer profiles to assist store sales with precise customer information they need during the sale process. After getting information, the product will sync the data with the existing CRM system

Solution 2: AR Preview and Questionaire - Use visualization to assist customers to make a big purchase decision

Preview feature with AR/VR visualization to help customers to make their purchase decisions, for customers without a concise idea, we also created the questionnaire and scenarios simulator to provide further assistance.

Solution 3: Order mode integration - ERP integration for different order methods

As to fulfill the needs to handle the different order modes of the business, we need to create a dynamic interface for sales to handle the ordering process and sync the data with the existing ERP system. Furthermore, we also need to provide a stocking solution for staff to sync stock data with the ERP system.

‍

UX Design

After confirming the solution approaches, we worked on the UX Design with Information Architecture to present the structure of the application to the client and to design and explain the flow design for the specific user flows under the solution approaches.

Information Architecture

Under a tight timeline, we are only able to start the UI Design and UX Design simultaneously. During the time we create the IA, we had already created the UI Designs in Figma, as to confirm the feasibility with the development team, the IA elements are included with the screen number adopted in Figma for easier reference for the developer and client.

Flow Design

Besides the structure of the problem, we also need to work on the overall flow design to make sure users can navigate the problem to perform their task to solve their problem.

We started with an overall flow design with a flow chart for faster confirmation and communication with the client and development team. After a few more meetings and presentations, we created a more detailed flow design with the actual UI for the specific flows, the normal customer flow, and the special flow for the order management feature which involved more complex logic.

‍

‍

‍

Features UI Design

Here are the highlight of the UI design of the main features to track user preference, assist users to make big purchase decisions, and for ERP integration within different sales & order flow.

‍

‍

▍【Solution 1: Tracking customer information for CRM System Integration】

• Feature 1: Customer Profile for CRM System
• Feature 2: Catalog Listing

‍

Feature 1: Customer Profile for CRM System

The customer profile bar appears in all the sales-related interfaces, after selecting the customer profile, the application will record the related information to the customer profile. The profile bar can also provide shortcuts to view the custom profile page with additional information and the ability to search for the recently open profile to assist sales to switch between profiles during peak season.

‍

‍

‍

Feature 2: Catalog Listing

As to replace the bulky printed-out catalog, we designed this streamlined e-Catalog with a search and filter feature, offering a clean UI to show product details and specifications, integrating AR preview, product video, and story content for users to view.

Stock management information is also integrated into the product which suits the use case of products with different specs under the same category. User preferences are recorded for follow-up in the CRM system.

‍

‍

▍【Solution 2: Use visualization to assist customers to make a big purchase decision】

• Feature 3: Home with Questionaire Feature and shortcuts
• Feature 4: AR Preview
• Feature 5: Scene Preview

‍

Feature 3: Home with Questionaire Feature and shortcuts

The home screen is designed with a questionnaire and sales shortcuts for store sales to do immediate action to assist their sales flow. After completing the questionnaire, suggestions will be provided to the customer, together with the customer profile mode, the store sale can record the preference of the customers and offer more information for the customer to make their purchase decision

‍

‍

‍

Feature 4: AR Preview

This is an expansive feature that was still under development by the time I wrote this case study, we test the technology with the client with the demo, under NDA, I could reveal too much, the screen in the image is just the representation of how it will work, not the actual UI of the final product.

The feature is embedded in some product details, user can click the AR preview button to place the artwork in the environment to preview how it will look in the real world.

It’s an alternative tool besides showing the artwork in the preset scene, the business does offer to visit customer home to help them will the potential placement of the artwork, this feature will be useful for real-time demonstrations. In a later stage, this feature will be extended to the B2C mobile application, features like IKEA mobile for users to place the product using AR preview will be broadly available at that stage.

‍

‍

Feature 5: Scene Preview

It’s hard to imagine how the artwork will look in a certain environment, so we create the Scene preview feature to place the artwork in a preset Scene, mostly the common scene with decent interior design for customers to preview how the artwork will look like to assist them to make a purchase decision.

‍

‍

▍【Solution 3: ERP integration for different order methods】

• Feature 6: Order Management
• Feature 7: Stock Management

‍

Feature 6: Order Management

The order management process can be long and complex for the business, special flow like consignments needs a unique flow design. In order management, we make the module flexible to suit different scenarios and user stories.

By referencing benchmarking of other luxury eCommerce systems, we design the interface to look good and functional for both the store sales and the customer.

‍

‍

Feature 7: Stock Management

Stock-taking for artwork is not easy, some artworks are heavy and fragile, we integrated the product with a QR code system to enhance the stock-taking experience of the staff and to sync the data with the existing ERP system to improve the business process.

‍

‍

Interaction Design & Design Iteration

During different stages of the project, we have to provide an interactive prototype for client confirmation. Besides the main workflow interaction, we also focus on the interaction design of the customer's profile bar and the AR experience. We conducted several usability tests of the features with the Figma interactive prototype.

Interaction Design

To summarise, the project provides the team with a good experience in creating user-centric solutions by understanding deeply the process of the business and the potential users’ interaction with the product.

Design Iteration

After several usability testing sessions with the store staff and users, we gathered some design iteration suggestions. We worked on some minor iterations on font size and use of color, some logical rearrangement, and the placement of elements.

We are glad that the flows in the application are accepted by the store staff and they showed appreciation for the potential of the product to solve the old problems during their sale process.

‍

Project Impact & Lesson

After the launch of the product, we received good comments from stores worldwide, together with the iteration suggested, we further improved the application in the later stages.

To summarise, the project provides the team with a good experience in creating user-centric solutions by understanding deeply the process of the business and the potential user's interaction with the product.

To summarise, the project provides the team with a good experience in creating user-centric solutions by understanding deeply the process of the business and the potential user's interaction with the product.

• Getting solutions from Competitive Analysis was a fast way to gain solution insights
• Getting solutions from Customer Journey mapping can provide more client buy-in to get approval in the early stage of the project
• It's good to use technology to assist customers to make a purchase decision by visualizing the merchandise
• A digital product can be a good approach to assist sales with a long journey for a customized experience
• Create a suitable gateway in different touchpoints to cooperate with the existing ERP System

‍