E-commerce App for Eyewear Retailers
# 0-1 Product # Mobile # toB
Essilor Luxottica (EL), our client, is the world's leading eyewear manufacturer with €14.429 billion annual revenue (2020). They wanted to build a ordering platform, making the product ordering process more friendly to China local retailers.
EL's sales wasted time dealing with low-cost orders
Users faced delayed messages and untraceable order
EL faced digital transformation challenge to build a world-leading brand image
83.3% customer satisfaction with the functions I designed
Achieved 87.1 SUS Score
Estimate to go-live in 2026 covering 100k+ users
Big Scope, Small Screen
To align with Chinese retailer's habit, we need to translate 4 complex flows, from ordering to aftersales, into a small mobile screen.
Failed Once, Can't Fail Twice
A past digital transformation attempt failed as users preferred calling sales over placing orders themselves.
1
Lower digital maturity but high acceptance of digital systems
Do not have a inner ordering system, but open to accept one.
2
Flexible, unstructured ordering—where the app can fits in
Unlike corporate-level stores, they aren’t confined to an office or restricted from using phones.
3
Frequent small orders with low value
These orders make up most of EL’s salespeople’s workload but contain few products and have low value.
Lack of Stimuli.
Shifting to a self-ordering platform means the retailers can't enjoy the convenience of salesperson taking care of everything.
Low Tech Proficiency.
Familiar with toC products in daily life and accustomed to them, but not as familiar with toB products which are more form-based and process-driven.
Varied Eyewear Product Proficiency.
Retailers’ familiarity with the products they sell leads to varied user behavior during the browsing and ordering process.
Smooth Workflow
Visual x Interaction
Simple, Intuitive Visual with Quality
Cater to User Groups with Different Proficiency
Boost Business
Function
Flexible Transaction Scenario Support
Convenient Promotion Channel Integration
Clearer Order Status Tracking
High screen efficiency, leaving more space for the product list.
Highlighted the most used filtering options for quicker navigation
Flexible space for more possible marketing content
More space creates a sense of luxury and quality, aligning with the brand identity
Low screen efficiency
Key for decision
Think Beyond User Needs. As their 1st digital product, we want users to easily spot and understand the product’s capabilities without additional clicks. The 2nd Option also aligned better with the client's business goal by incorporating flexible space for marketing content and their brand identity.
Balance between "Detail information" & "Screen Efficiency" when both cannot be satisfied at the same time.
Detailed Product Information
Low screen efficiency
For general users
Detailed Product Information
Medium screen efficiency
Less Product Information
High screen efficiency
For proficient users
Key for decision
Back to Personas. Retailers have different skill levels in finding target products. The 1st is suitable for most users, providing comprehensive product info, while the 3rd option is tailored for experts, emphasizing their key focuses (image and price) to optimize space usage.
When retailers enter a specific product code, they aim to find a specific product and don't want to be interrupted by 'browsing'.
Recognizing this, I proposed a new ordering flow to guide them directly to their desired goal.
Navigating through different variants of the same products can be tedious work.
I designed the list view for all variants to streamline this process, as well as expose more product options to stimulate sales.
2x+1 Clicks for x Product Variants
.gif)
x+1 Clicks for x Product Variants
As retailers' business goal is to satisfied their end-consumers's need, how can we help them thrive through this process so to attract them using our product?
Key for decision
Consider the unique product value that drives business growth. I looked into the user journey maps, searching for stages where retailers values mobility, flexibility and the stages where our product might come across their end-consumer to identify new design possibilities:
1
Promote products through private domain/social media
2
Show customers the product they don't have in stock
3
Track product status to plan future sales
1
Promote products through private domain/social media
Through the interviews, the retailers showed us how they build loyal customers: having group chats and inviting them to join their social media channels—all on their phones. So why bother leaving the counter, going to the back office, downloading it on a laptop and transferring it to your phone?
Download it directly to your phone and share it from there!
2
Show customers products they don't have in stock
Retailers often need high-resolution product images to show customers items they don’t have in stock. Currently, they rely on EL’s official documents, which risk exposing their ordering prices to customers. To address this, I proposed a price toggle feature, allowing retailers to hide prices they don’t want end-consumers to see.
Don't get limited by the 'B2B product' definition! It’s still important to consider end-consumers, as they play a crucial role in the success of the retailers.
Ensured consistency by Implementing the price-view dropdown menu at a fixed position across all pages
Reduces layout flexibility for future designs since this specific space must always be reserved for the dropdown
Ensured contextual relevance by placing price-view dropdown menus adjacent to price information on each page
Inconsistent positioning across pages could make it harder for users to locate
Preserved visual harmony and design flexibility by Implemented a persistent, draggable floating price button visible across all pages, offering consistency while.
Strongly prevents serious error that might lead to unhappy end-consumers: you can ignore it, but when you need it, it's always there.
Key for New Possibilities...
Rethinking the Constraints...and Break It!
Instead of sticking to traditional grid systems, we challenged ourselves: How might we transcend layout boundaries while maintaining visual consistency across pages?
3
Track product status to plan future sales
Only when you order through the App,
Can you track through the App
(That's kind of evil though)
The EL orders will not come as a whole. The products they've ordered can be split into different packages, making it hard for retailers to trace specific products by merely looking at the order info.
To help them stay informed about their order status, cater to their need for planning future sales, and make better recommendations to customers, we include package-level transporting information in the order list page.
We evaluated the design through qualitative usability test with six user groups. Each group needs to complete tasks across critical journey while we gathered observational data, followed by in-depth interviews.
Highlighted participant feedback include:
Love this 3-column design (Product List Page)!
I can quickly locate products through thumbnails and see more information at a glance.
It's better than I'd imagined!
Now I can show it directly to customers without any concerns (Price Display); it's convenient to display, easy to search, as long as it's secured..”
It is much more convenient on through mobile. I can place orders anytime, anywhere...
The price display is well set up, making it very convenient to show images directly to customers. (Price Display)
