L’Oréal
The product: Orders is one of the addons of the CT Mobile, which allows companies to manage the full procurement cycle and allows companies to save on logistics
Client:
-
L’Oréal
My roles:
-
UX Researcher
Team:
-
UX designer x1
-
Developer x5
-
Project manager x1
-
Business analyst x2
-
Delivery manager x1
Date & duration:
-
2022, present
Responsibilities:
-
Research planning
-
User advocacy
-
Data analysis
-
Ethical compliance
-
Impact assessment
The problem:
-
As a user, I struggle to navigate through the app's features due to an inconsistent experience across platforms like iOS, Android, Windows, and Salesforce Web, which has led most users to use only limited functionality without discovering many other useful features
The goal:
-
To streamline and enhance the app's user experience across iOS, Android, Windows, and Salesforce Web, I aim to unify the design system and introduce a rapid development process. This strategy will not only address client pain points through monthly UX improvements but also expedite the delivery of new features, targeting to attract significant new clients and achieve an Net Promoter Score (NPS) went up from 5 to 7 within six months
Understanding the user
User research: Summary
Using Maze and Smartlook, I discovered that while the Orders addon is widely used, many features remain unknown to users. Additionally, inconsistencies in the Orders across platforms like iOS, Android, Windows, and Salesforce Web have been identified, affecting user satisfaction and potentially harming brand perception and client acquisition
User research: Pain points
-
Slow feature release cycle
-
Inconsistent platform experience due to no unified design
-
Limited client feedback use
Personas
[1] Sophie
Sophie works as a sales rep for a pharmaceutical company. She often visits pharmacies and medical places, using her iPad and four main tools to make her work easier. These tools are Orders, for ordering goods; CPG, for planning her visits efficiently; Vision, for scanning pharmacy shelves; and Sign, for signing contracts quickly. Sophie needs to be quick and efficient in her job, using technology to meet her clients' needs and engage with them better
[2] Lucas
Lucas works in a call center for a company that sells lots of different things. His main tool is the Orders web addon, which he needs for his everyday work. Lucas's job is to handle orders from businesses, arrange for big deliveries, and talk directly to suppliers to make sure everything goes smoothly. His role is important for keeping the company's supply chain running smoothly and making customers happy
[3] Remy
Remy owns a medium-sized business with a busy marketplace that deals with over 100 million products each year. He uses Orders on his tablet and computer to carefully plan and automate his purchases. He also uses the Sign plugin to manage contracts with his suppliers securely. Remy relies on the Vision addon to automatically recognize items on warehouse shelves, which helps him make new purchase orders. By using technology in innovative ways, Remy makes sure his marketplace runs smoothly and stays competitive
Personas comparison
Sophie, Lucas, and Remy each have different needs for their jobs, so they need a platform that can change and stay the same when they use it. Sophie wants to work fast on her iPad when she talks to customers. Lucas deals with lots of calls and needs good ways to organize things. Remy has a big marketplace to look after and needs systems to handle stock and contracts automatically. Their different needs show why I need a platform that can work for lots of jobs but still looks the same and is easy to use for everyone
Refer to the appendix for specifics on the focus groups
User journey map
My goal was to map out and better understand the experiences of users through their interactions with a product. This meant pinpointing their main actions, emotional states, and pinpointing opportunities for enhancing their journey from start to finish, all to improve user satisfaction and address their key needs effectively
[1] Sophie
Goal: Visit the pharmacy. Use the Vision addon to scan the shelves and add products to Orders addon as needed. Sign the contract with the pharmacy head using the Sign addon. Confirm and place the order for delivery
[2] Lucas
Goal: Handle a call from the manager of a partner company needing to purchase 135,000 different consumer goods within 6 months, and create an order in the Orders web addon
[3] Remy
Goal: Use the Vision addon at his company's warehouse, scan the shelves with goods, go to Orders on his iPad, and ensure that the new purchase is correctly filled out by artificial intelligence. Then place an order for the scanned group of products
Refer to the appendix for more research details
Starting the design
Brainshtorming on paper
I figured it would be good to start designing new features by drawing them on paper. It's fast and simple to get feedback this way. After making a few changes based on the feedback, the team approved moving forward with the next steps
Multi-delivery
Input types
Complex product
App navigation
Visit planning
Usability study: Findings
Multi-delivery
Round 1 findings:
-
It's hard to change addresses and delivery dates
-
Tracking progress for 3 or more deliveries at once is tough
-
There are no filters to sort, view, and edit multiple deliveries
Round 2 findings:
-
Addresses and dates can be quickly changed using various methods
-
Tracking numerous deliveries is easy with color-coded prioritization
-
Editing multiple similar deliveries at once in one place is convenient
Input types
Round 1 findings:
-
Using the keyboard is uncomfortable because it covers the screen and hides the input field
-
There's no quick way to enter commonly used values, wasting time
Round 2 findings:
-
Using the Apple Pencil makes entering numbers faster and easier
-
A scale with common values speeds up editing orders significantly
-
Having three input methods to choose from is user-friendly for different needs
Complex product
Round 1 findings:
-
Products in bundles aren't clearly marked with their status, making it hard to buy them
-
Product titles don't show how much is available without opening the bundle, which is confusing
-
Sales reps struggle to find good deals quickly
Round 2 findings:
-
Color indicators and tags make it easier to see if a product is available or out of stock
-
Showing quotas and availability without opening the list speeds up decision-making
-
A new pop-up helps sales reps find the best discounts quickly, boosting their performance
Overall app navigation
Round 1 findings:
-
Users find it hard to switch to a different addon from the main menu
-
The interface is too complicated with many nested levels, making it tough to go back
-
There's no way to adjust the width of sections like in Split view mode on iPadOS
Round 2 findings:
-
The new single-page layout is clear and easy to use in different situations
-
Users appreciate the more informative interface and don't have to navigate through many pages
-
Being able to adjust section widths makes a big difference, especially when dealing with multiple deliveries
Edit planning
Round 1 findings:
-
Finding a specific visit among many is difficult
-
Visits often overlap, making planning hard
-
Visit tiles on the calendar aren't prioritized
Round 2 findings:
-
Quick filters make finding visits easier
-
The "Planning Tips" tool reduces errors and improves visit creation
-
Color stripes on visit cards provide instant info about priority or type
Refer to the appendix for specifics on usability study findings
Refining the design
Mockup
I've made significant changes to the main screen of the Orders addon. Everything now adheres to Apple's Human Interface Guidelines, resulting in a sleek and intuitive design that stays consistent throughout
High-fidelity prototype
I created digital wireframes for each key user journey to better visualize and develop accurate user scenarios. The process for creating multi-deliveries is shown
Additional CT addons
Vision
A tool that uses artificial intelligence to recognize images. It helps you check if products are available on shelves and ensures everything is in stock when needed
CPG
The solution improves sales efficiency and simplifies the process of demonstrating functionality and analytics. Utilized in offline sales, contact centers, and online platforms
Sign
With this, you can easily handle any contract, make PDF files, and use electronic signatures to make legal procedures easier
Presenter
A professional tool that uses a data-driven approach to get more users interested in any digital product
Accessibility considerations
Columnar structure and the ability to change the width of any section:
-
To improve readability and perception of content, it was decided to make the interface in a columnar structure and allow users to independently change the width of each column, depending on the task being solved at the moment. This reduced the number of clicks to internal pages and improved the overall experience of the application
Text size and ease of reading on a tablet screen:
-
After a complete redesign of the Orders application, the sizes of all fonts were reduced by 20% compared to the original size. This allowed users to see more useful content without having to scroll or navigate to other pages. But people with visual impairments can still comfortably use the application by changing the scale in the iPad settings. This functionality was achieved through 100% use of Apple Human Interface Guidelines.
Methods for entering information:
-
More than 85% of the work in the Orders addon is filling and tracking new and existing orders. Therefore, special attention was paid to the development of convenient and diverse input methods. Implemented input methods and the percentage of their use: from the keyboard (13%), with a counter (36%) and with an Apple pencil (51%) A predictive system with artificial intelligence for adding the number of goods, based on historical analytical data, was also developed. This increased the availability of the application by more than 2 times and reduced the time for creating an order by an average of 150%
Check the appendix for more accessibility considerations
Going forward
Takeaways
Impact:
-
In the past 6 months, over 5 new clients joined us from a list of over 50
-
All our apps, with their added features, have received top ratings, showing how good they are. Also, our Net Promoter Score (NPS) went up from 5 to 7, showing that most users are loyal to our brand
-
Nominated app by Salesforce as the best app to use offline in 2023
Lessons learned:
-
Focus group - users of the tablet version of the Orders addon were overwhelmingly dissatisfied with the lack of support for handwriting input with Apple Pencil. This function was approved by 95% of respondents and reduced the time for creating one order by 35%. Later it turned out that not every merchandiser has the Apple Pencil, and analytics showed the use of this function by about 50% of the total number of active users
-
More than 80% of all participants from the web and tablet app focus groups reported an uninformative and unclear multi-delivery management interface. After redesigning the delivery, date and address fields, including changing the structure, hierarchy and color priorities, more than 90% of respondents agreed that the new UI for multi-deliveries speeds up the process of finding the information they need by 150%. But analytics showed that the multi-delivery function is used by no more than 47% of all users. And from a business point of view, the priority of implementing a new delivery interface could have been lowered
-
Less than 10% of users reported that the double pop-up is inconvenient and they often have problems returning 1 step back. Checking the research further, it was found that another 60% of respondents also found it inconvenient. As a result, a complete redesign of the pop-ups was made. It is important to take into account feedback from even a small percentage of respondents
What I could do better:
-
Conduct more offline usability tests of prototypes and involve a wider range of respondents to make data-driven decisions about product development
-
Involve more C-level respondents in testing to better understand the needs of corporations and large-scale systems
-
Create products consistently for better market recognition and minimal platform differences
Next steps
User testing and feedback loops:
-
I'll organize user testing to see how updates change how people use our platform. This helps me see if our design changes work well and gather feedback for making improvements later. Tools like Maze and Smartlook are helpful for testing before and after I update. Also, I need to do more design sessions, both in-person and online, for both offline and online events
Monitoring and evaluating impact:
-
I'll set up ways to see if my design changes make users happy, how many people use the platform, and how well it works overall. This means checking app ratings, how many users stay, and getting feedback to see if our ideas are good and where I can improve
-
I need to do more research and talk to people. In the next six months, we'll make a special dashboard to use our own data better. This dashboard will be based on Tableau, a service from Salesforce that helps make reports
Appendix
Background
Need to analyze all the products that customers use out-of-the-box and the ones they customize for themselves. Identify pain points in the user experience (UX), establish consistency, and propose a future vision and iterative plan to achieve the goal through quick wins in subsequent releases on four platforms: iOS (80%), Android (15%), Windows (5%), and Salesforce Web (100%)
The platform consists of:
-
Main add-ons (Orders, CPG / Pharma)
-
Extra add-ons (Sign, Vision, Presenter, Layouts)
Workflow
Product vision
I conducted research on the core product and its add-ons through in-house studies and gathered over 50 client insights during on-site research
Core product and add-ons
To understand the primary concerns of the core team, I decided to engage with numerous company employees and compile a comprehensive table reflecting their product visions
Understanding 50+ clients vision
To enhance the efficacy and content richness of subsequent releases for the majority of our clients, I have decided to increase the number of calls, on-site visits, and business trips to garner insights from all perspectives
Delivery flow
Given that the application is utilized across various operating systems and releases need to be delivered swiftly in incremental updates, I have developed a streamlined workflow
Mapping targets
I conducted an internal analysis of all products, focusing on UX issues and component consistency, with the objective of creating an unified library. This facilitates rapid testing and streamlined system maintenance
UX audits
Audits provided an in-depth perspective on the product and shed light on potential refinements and enhancements
More to see
Competitors
By analyzing our competitors, I not only expedite our solution-seeking process but also discern the strengths and weaknesses of both our and their solutions
More to see
Competitive audit report
Competitive audit goal:
-
To assess the competitive landscape for cloud-based delivery management solutions, focusing on offerings for order management and logistics in the procurement process, to identify our market positioning and opportunities for innovation
Who are the key competitors:
-
Aforza: Provides cloud-based solutions specifically designed for consumer goods companies, enhancing field sales and marketing with data-driven insights
-
Salesforce CPG/Pharma: Offers tailored CRM solutions for the consumer packaged goods and pharmaceutical industries, focusing on customer engagement and sales efficiency
-
IQVIA: Specializes in analytics, technology, and research solutions for the healthcare and pharmaceutical sectors, optimizing operations through data
-
Oracle NetSuite: Delivers a comprehensive suite of cloud-based ERP solutions, including robust functionalities for supply chain and inventory management
-
SAP Ariba: A leader in procurement and supply chain cloud solutions, SAP Ariba streamlines business-to-business buying and selling processes
What are the type and quality of competitors’ products:
-
These competitors offer high-quality, cloud-based solutions ranging from CRM and ERP systems to specific analytics and supply chain management tools, designed to optimize procurement, sales, and logistics operations across industries
How do competitors position themselves in the market (unique value propositions):
-
Aforza: As an agile solution leveraging cloud and mobile technology to empower consumer goods companies
-
Salesforce CPG/Pharma: As a comprehensive CRM platform enhancing relationships in CPG and pharma industries
-
IQVIA: As a data-driven tool transforming healthcare and pharmaceutical industries through analytics
-
Oracle NetSuite: As an all-in-one ERP solution for growing and mid-sized businesses across various sectors
-
SAP Ariba: As a networked platform simplifying procurement and supply chain processes for businesses worldwide
How do competitors talk about themselves:
-
Aforza: Driving the future of consumer goods with cloud technology
-
Salesforce CPG/Pharma: Connecting customers in new ways
-
IQVIA: Harnessing data and science to improve healthcare
-
Oracle NetSuite: Your business, unified
-
SAP Ariba: Making procurement awesome
Competitors’ strengths:
-
Aforza: Deep focus on the consumer goods sector
-
Salesforce CPG/Pharma: Extensive ecosystem and integration capabilities
-
IQVIA: Strong analytics and data processing capabilities
-
Oracle NetSuite: Comprehensive ERP functionalities
-
SAP Ariba: Large, global B2B procurement network
Competitors’ weaknesses:
-
Aforza: Limited to specific industries
-
Salesforce CPG/Pharma: Can be complex and costly for smaller businesses
-
IQVIA: Primarily healthcare and pharma-focused
-
Oracle NetSuite: May be overwhelming for small businesses
-
SAP Ariba: Focuses mainly on procurement, less on other aspects of supply chain
Gaps:
-
Potential lack of tailor-made solutions for smaller, niche markets outside their primary focus
-
Accessibility and usability for businesses with limited technical resources
Opportunities:
-
Developing or enhancing solutions that cater to underserved sectors or regions
-
Simplifying the user experience to attract smaller businesses looking for easy-to-use platforms
Competitive audit table
Workshops and quick wins
Field conferences, business trips, and workshops have enabled us to deeply understand our clients' pain points in collaboration with them and identify potential rapid solutions. Additionally, I have developed personas and their respective behavioral scenarios
More to see
User empathy
Complex product
Visit planning
Affinity diagram
Goal statement
The Orders and CPG addons for planning orders and visits aims to make digital interactions easier for users. It will be simple to use and help users do things faster. I want to make sure users are happy and get things done quicker, so they'll enjoy using overall app with all the addons and find it helpful in their everuday working routine
I will measure effectiveness by tracking user feedback and the efficiency gained from reducing time spent on order and visit planning
User story
-
[1] Sophie, as a pharmaceutical sales rep, wants to easily show product orders, plan visits with the CPG addon, use the Vision addon for shelf scanning, and sign contracts with the Sign addon. This helps her sell better and work faster
-
[2] Lucas, as a call center operator for a consumer goods company, wants to quickly handle applications using the Orders web addon, manage big deliveries, and talk directly with suppliers. This keeps everything running smoothly and makes customers happy
-
[3] Remy, as the owner of a medium-sized business selling many products, wants to automate purchases and manage contracts securely with the Sign plugin. He also wants to use the Vision addon for warehouse inventory and make sure everything works smoothly with the Orders addon on his tablet and web. This helps him keep things running smoothly and without mistakes
Problem statement
-
[1] Sophie is a pharmaceutical sales representative who needs an efficient way to showcase products, plan visits, scan inventory, and conclude contracts digitally because she wants to make her sales processes easier and be more productive during her daily pharmacy visits
-
[2] Lucas is a call center operator for a consumer goods company who needs to manage large orders and interact with suppliers efficiently because he needs to keep operations running smoothly and ensure business clients ordering in bulk are happy
-
[3] Remy is the owner of a medium-sized marketplace who needs to automate purchasing, manage contracts securely, and oversee warehouse inventory effectively because he is responsible for keeping operations efficient and handling over 100 million product transactions annually
Navigate back to the main presentation
Research study plan
Usability study: User notes
[1] Sophie
Additional notes:
-
A quick add feature for frequently ordered products would greatly speed up my ordering process
-
An option to save favorite or frequent orders as templates for future use would be incredibly useful
-
I'd appreciate more detailed product descriptions or images within the Orders addon to make more informed selections
[3] Remi
Additional notes:
-
Bulk editing capabilities for large orders would significantly enhance efficiency
-
Integration between the Vision and Orders addons should be more seamless, possibly with a 'scan to order' shortcut
-
A confirmation step before finalizing the order where all details can be reviewed in one place would add confidence to the process
Navigate back to the main presentation
Themes
Complex product
It was observed that 7 out of 10 participants had trouble with bundles, making it hard to use Orders. This shows the need to improve interaction and create a simpler experience for users
Many participants share the view that the overall look and arrangement of bundles' display need a redesign
Supporting evidence from the usability study:
-
8 out of 10 participants generally found that checking product availability in bundles is not an easy task
-
5 out of 10 participants suggested improving the display of bundles, including color indication of statuses and a simple display of product availability in stock
Participant 1 - Sophie:
“When I show products to the pharmacy manager that might need to be ordered, it often turns out that the product is out of stock. If I had known this earlier, I wouldn't have suggested it.”
Multi-delivery
It was observed that 6 out of 10 participants faced confusion when attempting to change the address and date for multiple deliveries simultaneously, as well as when analyzing a large number of deliveries
Most participants found that working with multiple deliveries should be more intuitive, and there should be a function for changing addresses and dates in several deliveries at the same time
Supporting evidence from the usability study:
-
9 out of 10 participants reported that they found organizing multi-deliveries difficult to work with and use in real tasks
-
6 out of 10 participants recommended creating a system to easily edit multiple deliveries at once, visually highlighting them to locate the desired one quickly
Participant 3 - Remy:
“Almost every day, I handle hundreds of deliveries going to various dates and warehouses at the same time. The current delivery system isn't great, which costs me time and money.”
.png)
Insight identification
-
Based on the theme that users find it difficult to navigate and understand product bundles within Orders, an insight is that making bundles simpler to view and interact with could greatly improve user satisfaction and efficiency. A clearer display and easy-to-understand indicators of product availability would likely reduce confusion and make ordering easier
-
Based on the theme that managing multiple deliveries simultaneously is challenging for users, an insight is that there's a strong need for a better multi-delivery management system. A solution that enables bulk editing and provides clearer delivery status visualization would make operations smoother for users handling many deliveries
-
Based on the theme that users struggle to check product availability, particularly within bundles, an insight is that enhancing visibility and access to stock information at the point of sale can prevent miscommunication and inefficiencies. Integrating real-time stock updates and clear, color-coded availability indicators could be crucial improvements
-
Based on the inefficiencies of the current delivery system, an insight is the critical need for a delivery management overhaul. Improving the system to handle high-volume deliveries more efficiently, with better tracking and editing capabilities, would save users time and resources
Insight-based enhancements
-
Improving bundle display: Users want to handle product bundles as easily as single products. A unified design guideline makes working with bundles even simpler
-
Expanding multi-delivery features: Users need more tools for managing multiple deliveries. New features like bulk editing and status visualization were added, greatly enhancing their efficiency. This has tripled the speed of handling multiple deliveries
-
Enhancing product availability: Users want to see product availability and quantities in real-time. Real-time status updates and color-coded indicators have been implemented, eliminating order cancellations due to stock shortages
-
Revising large volume deliveries: Users need intuitive control over large volume deliveries. I introduced an improved system for adjusting order quantities and added many new editing options. This makes the system more flexible and personalized
Navigate back to the main presentation
Future design vision
To provide both the product team and our clients with insight into the design roadmap and updates, I have prepared three iterations of design enhancements. Experience indicates that if users are presented with a completely revamped UX and UI in a single update, they may resist and request a rollback. This is precisely why an iterative approach to implementing innovations is essential in our case
Forming design system
Color research
To avoid extensive modifications to the existing code, I decided to simplify the current color scheme within the code, create test builds, and transfer them to Figma
Typography research
I adhered to the same principles as with the colors - extracting scripts from the code, optimizing them, and then incorporating the styles into Figma
UI component library audit
To enhance delivery speed, ensure effortless scalability, and facilitate code maintenance, it is imperative to have a unified component library that is fully synchronized with the code
Component & copy guidelines, quality evaluation, Jira guide
To ensure that various departments could work with the design system, and to streamline the onboarding process for new employees to just a few minutes, I developed guidelines for all personas
Salesforce, Windows and Android
For the other systems, I decided to utilize native solutions due to the low client coverage percentage, with the exception of Salesforce
Navigate back to the main presentation
Iterative releases
It is imperative to deliver features swiftly that will enhance the experience for all clients, thereby improving the core product and addressing the pain points of our most significant clients, such as L’Oreal
Feature usability tests via Maze + Smartlook
Utilizing tools like Maze and Smartlook, I tested pre-release features prior to implementation and monitored actual user behavior post-release
Analytics and release notes
This is only L’Oreal users. The client pays 65 USD monthly for each license. L’Oreal has significantly invested in the app since the 3 last updates because of the updated delivery timeframe and features. The numbers 3.0, 2.9 ... 2.5 represent releases
More to see
Orders
CPG, Vision, Sign and Presenter
Overall research insights
-
Users want more guidance: People need clearer instructions and quick guides to start using the platform, especially when trying new features
-
Changes in design and user experience should be smooth: I'll redesign the app in three parts to avoid upsetting users and losing loyal ones
-
Secure and quick transactions are appreciated: The digital signing process (Sign addon) is valued for its speed and security, but users desire a review feature before finalizing
-
Users need regular updates: Businesses should update regularly to keep current users and attract new ones
-
Feedback and customization matter: Users express a strong desire for features that allow personalization and efficiency, such as templates for frequent orders or bulk editing options. They also appreciate platforms that actively seek and implement user feedback
Recommendations
-
Simplify the display and interaction with product bundles by treating them as single products when possible. Implementing a unified design guideline will streamline user experience and make working with bundles more intuitive
-
Ensure real-time updates on product availability and quantities. Implementing real-time status updates and color-coded indicators will help users avoid order cancellations due to stock shortages, providing a more reliable ordering experience
-
Simplify the navigation within the app by reducing nested levels and providing clear, easily accessible menu options. A single-page layout with an informative interface will reduce the need for excessive navigation and improve overall user satisfaction
Loved what you saw?
Review CV, connect on LinkedIn, or email me at s.malchanau@7tam.net