Your Webflow Page
01 THE SITUATION

Meican, founded in January 2011, is a Series E company that provides B2B dining solutions by partnering with restaurants and corporate clients.

However, the internal platform "Meican OPS," created in 2012, struggled with scalability due to rapid growth. This led to compromised usability, as numerous features competed for attention, resulting in low management efficiency.

A redesign of the platform was underway.

02 OUTCOMES

Significantly Increased Revenue

The redesign and improved management efficiency led to significant business growth for Meican in 2022, surpassing multiple business benchmarks and resulting in a substantial increase in revenue at the company level.

Annual Gross Merchandise Volume 2022
$388,000,000+
2021
$212 M
YoY Growth
+83%
2022
$388 M
Annual Revenue 2022
$61,000,000+
2021
$32 M
YoY Growth
+91%
2022
$61 M
03 pain pointS

Operations Managers Struggling with the Old Platform

Within the current old platform, our internal users, operations managers maintain restaurants, customers, and orders. However, outdated features are causing confusion for these users, indirectly leading to poor business performance.

04 design objectives

Insights → Requirements

Develop a streamlined and user-friendly interface to mitigate operation errors and enhance consumer convenience to achieve the revenue growth. Implement intuitive features to reduce the learning curve for new users, ensuring efficient and effective use of the tool.

Risky

Safe

Carefully prevent problems from occurring in the first place

Ambiguous

Obvious

Make merchant information easily perceived and understood

Repetitive

Streamlined

Tailor user actions for frequent operations processes
05 Merchant Settings

Empowering Operations Managers to Edit Merchants Effortlessly

In the iteration of Merchant Settings, simplicity is enhanced by reorganizing the information architecture of old features and integrating new features to meet new user needs.

Merchant Name and Note

Merchant City

Merchant Service Mode

Merchant Phone Number

Merchant Geographical Location

Design Decision: Merchant Phone Number

In this design, I compared different design options of inputting a country code in order to ensure accurate phone number formatting.

I selected OPTION 3 because:

  • The national flag provides an intuitive visual cue for users to identify the country.
  • Displaying the country code rather than a flag alone adds convenience for users to verify it.

Design Decision: Customize Address Display

A customized address is required to overlay the default address text to display to customers when the map lacks detail. For instance, Operations Managers need to inform customers that a restaurant is on the 2nd floor of a shopping mall, while the map only indicates it's in the shopping mall.

I selected OPTION 3 because:

  • Toggle aligns with the current design system, avoiding a new modal or new components for address edits.
  • Users seldom need to customize addresses, as map often provides detail.

Consistency, Aesthetics, and User Interactions

I then crafted a polished UI design, emphasizing consistency, aesthetics, and user-friendly interactions. I mostly complied with the current design system and aligned with developers for optimal functionality.

06 Date Picker

Streamlining Data Report Exports

The current data report exports had a basic date picker, but business data indicated that only specific date ranges were selected most frequently. This generic date picker was causing inefficiencies in their work.

Customized Date Picker Based on Business Data

Therefore, I made strategic additions to the date picker based on business data provided by data analysts. These additions include three quick selections: Yesterday, Last Week, and Last Month, which are the most frequently used options for exporting data reports.

07 TAKEAWAYS

Continuous Learning to Navigate Complexity

Given the intricate nature of businesses and the diverse array of stakeholders involved in this B2B product, I recognize the  importance of continuously enhancing my understanding of business terminology, operational logic, and the various stakeholders' roles and perspectives. This proactive approach ensured that I could make informed decisions and contribute meaningfully to the product's success within this complex environment.

Strategic Customization of Components

Tailoring components for specific features can significantly enhance B2B product design. By analyzing business data, it becomes possible to identify frequently performed actions, enabling the creation of custom components that effectively streamline user processes.