B2B SaaS

B2B SaaS

CRM

CRM

Time Saved +65%

Time Saved +65%

Conversion Rate 7%

Conversion Rate 7%

Revolutionizing Inventory Management

Designed a user-centric B2B SaaS platform to optimize enterprise workflows and enhance operational efficiency. Featuring intuitive navigation, scalable architecture, and actionable data insights, the platform enables businesses to streamline processes and drive growth. This project was developed in collaboration with YEMA Studio, with all functionalities, usability, and user behaviors tailored specifically to a Chinese-speaking audience and market needs.

My Role

My Role

My Role

UI/UX Designer - User Research, Interaction Design, Visual Design, User Flows, Rapid Prototyping

Team

Team

Team

Jamie Wei, Software Engineer

Yibing He, PM & Owner

Xuejiao Li, Snr Designer

Timeline & Status

Timeline & Status

Timeline & Status

3 Months , 2020

Launched

Overview

Overview

This project focuses on designing a SaaS backend system for SMEs in the cultural and creative industries, centralizing operations like order management, inventory tracking, customer service, and analytics. The platform aims to streamline workflows, helping sellers efficiently manage their stores and scale operations.

Prioritizing user experience and functionality, the system is designed to be intuitive, enabling users with minimal technical expertise to seamlessly manage creative product sales across platforms.

This project focuses on designing a SaaS backend system for SMEs in the cultural and creative industries, centralizing operations like order management, inventory tracking, customer service, and analytics. The platform aims to streamline workflows, helping sellers efficiently manage their stores and scale operations.

Prioritizing user experience and functionality, the system is designed to be intuitive, enabling users with minimal technical expertise to seamlessly manage creative product sales across platforms.

THE NEEDS

THE NEEDS

THE NEEDS

Aligning Business, User, and Product Goals

This project bridges the needs of SMEs in the cultural and creative industries by aligning business objectives, user expectations, and product functionalities. By centralizing workflows, enhancing usability, and integrating scalable features, the platform provides an efficient and intuitive solution for managing operations and fostering growth.

Business Needs

Business Needs

Business Needs

Provide a backend management system for cultural and creative product businesses. It will cover customer management, order processing, and sales tracking. Additionally, the system will collect user data to identify target customers and improve conversion rates.

User
Needs

User Needs

User Needs

Users, primarily front-line staff and managers, require streamlined workflows and system operations that reflect business rules and processes. The system should be intuitive and enhance operational efficiency.

Product Needs

Product Needs

Product Needs

Given the complexity of B2B systems, the design must carefully balance functionality with system architecture. It should ensure smooth interaction with other platforms and consider scalability and integration challenges.

DESIGN STRATEGY

DESIGN STRATEGY

DESIGN STRATEGY

A Step-by-Step Approach to Tailored Solutions

The design strategy for this project is built on a systematic framework that ensures the platform meets both user needs and business goals. By aligning industry insights, functionality optimization, and iterative testing, the approach guarantees a comprehensive solution for SMEs in the cultural and creative industries.

An illustration from Carlos Gomes Cabral
An illustration from Carlos Gomes Cabral
An illustration from Carlos Gomes Cabral

01.

Industry and Business Workflow Analysis

Goal

Understand industry-specific workflows and identify core pain points.

Actions

• Research operational processes and user challenges.

• Map end-to-end workflows for order management, inventory, and customer service.

• Prioritize features based on business impact and user needs.

02.

Functional Design and Optimization

03.

Testing, Iteration, and Deployment

An illustration from Carlos Gomes Cabral
An illustration from Carlos Gomes Cabral
An illustration from Carlos Gomes Cabral

01.

Industry and Business Workflow Analysis

Goal

Understand industry-specific workflows and identify core pain points.

Actions

• Research operational processes and user challenges.

• Map end-to-end workflows for order management, inventory, and customer service.

• Prioritize features based on business impact and user needs.

02.

Functional Design and Optimization

03.

Testing, Iteration, and Deployment

01.

Industry and Business Workflow Analysis

Goal

Understand industry-specific workflows and identify core pain points.

Actions

• Research operational processes and user challenges.

• Map end-to-end workflows for order management, inventory, and customer service.

• Prioritize features based on business impact and user needs.

02.

Functional Design and Optimization

03.

Testing, Iteration, and Deployment

User Research

User Research

Through a combination of business interviews and surveys, I conducted comprehensive user research to develop detailed user personas and role models. These methods provided valuable insights into user pain points, workflows, and expectations, forming the foundation for a user-centric design strategy tailored to meet business and user needs effectively.

Business Interviews

Business Interviews

Engaged with business stakeholders to understand their goals and pain points, aligning product features and functionalities with user needs while clarifying key research directions.

Survey Research

Survey Research

Survey Research

Distributed 40 survey questionnaires, with 40 valid responses collected. Among these, 21 responses were for product satisfaction research, and 19 were for product baseline research.

Administrator

Easy Operations

Easy Operations

Easy Operations

Simple Workflow

Simple Workflow

Simple Workflow

User Requirements:

The Administrator needs an efficient platform to manage user accounts, assign permissions, and oversee system operations. A streamlined workflow and intuitive navigation are essential to minimize administrative workload and enhance operational efficiency.

Involvement:

Oversees all system functions.

Sales Representative

Quick Access

Quick Access

Quick Access

Easy to Use

Easy to Use

Easy to Use

User Requirements:

The Sales Representative requires a fast and accessible system to quickly retrieve product details, create and modify sales orders, and manage customer information. A user-friendly interface that simplifies these tasks will help improve sales efficiency and performance tracking.

Involvement:

Accesses product information, order management, and customer data.

Finance Staff

Data Visualization

Data Visualization

Data Visualization

Streamlined Workflow

Streamlined Workflow

Streamlined Workflow

User Requirements:

The Treasurer depends on the platform for accurate financial tracking, including revenue, expenses, and order reconciliation. Clear data visualization and seamless access to financial reports are crucial for maintaining financial accuracy and coordinating with the sales team.

Involvement:

Financial management and auditing.

Warehouse Staff

Quick Access

Quick Access

Quick Access

Real-time Status Updates

Real-time Status Updates

Real-time Status Updates

User Requirements:

The Warehouse Staff needs real-time inventory management, allowing them to check stock levels, track shipments, and manage product movement efficiently. A system that provides instant updates and simplifies logistics operations is critical for optimizing inventory control and warehouse efficiency.

Involvement:

Product storage, management, and dispatch.

Opportunities

Pain Points

Centralized Management

The platform integrates inventory, sales, and financial processes into one system, streamlining business operations for SMEs in the cultural and creative industries.

Optimized Experience

By tailoring the interface to different roles (Administrators, Sales Representatives, Treasurers, and Warehouse Staff), the system enhances efficiency.

Scalability Customization

The flexible architecture allows businesses to expand and customize features according to their needs, supporting long-term growth and adaptation to market changes.

Opportunities

Pain Points

Centralized Management

The platform integrates inventory, sales, and financial processes into one system, streamlining business operations for SMEs in the cultural and creative industries.

Optimized Experience

By tailoring the interface to different roles (Administrators, Sales Representatives, Treasurers, and Warehouse Staff), the system enhances efficiency.

Scalability Customization

The flexible architecture allows businesses to expand and customize features according to their needs, supporting long-term growth and adaptation to market changes.

Opportunities

Pain Points

Centralized Management

The platform integrates inventory, sales, and financial processes into one system, streamlining business operations for SMEs in the cultural and creative industries.

Optimized Experience

By tailoring the interface to different roles (Administrators, Sales Representatives, Treasurers, and Warehouse Staff), the system enhances efficiency.

Scalability Customization

The flexible architecture allows businesses to expand and customize features according to their needs, supporting long-term growth and adaptation to market changes.

ARCHITECTURE & USER FLOW

ARCHITECTURE & USER FLOW

ARCHITECTURE & USER FLOW

A Step-by-Step Approach to Tailored Solutions

To ensure efficiency, clarity, and seamless navigation, the merchant backend architecture was designed with a structured hierarchy. The system centralizes key operations, including order processing, inventory tracking, store management, and data analytics, enabling merchants to manage their business with ease.

01.User Flow Architecture ,Visual representation

01.User Flow Architecture ,Visual representation

01.User Flow Architecture ,Visual representation

PAGE LAYOUT

PAGE LAYOUT

PAGE LAYOUT

Enhancing usability through structured interface hierarchy

A well-structured page layout improves usability and efficiency by minimizing unnecessary actions, reducing cognitive load, and ensuring smooth navigation. This design follows a layered approach, organizing interface components into clear functional categories for an intuitive and streamlined user experience.

Modal Layer

Modal Layer

Used for real-time alerts and notifications, this layer provides essential user prompts without disrupting the main interface.

Foundation Layer

Foundation Layer

Includes top navigation bars and side menus, serving as the structural backbone of the interface for easy access to core functionalities.

Content Layer

Content Layer

The main display area, presenting dynamic and relevant information that users interact with to complete tasks.

Background Layer

Background Layer

Acts as a visual separator, maintaining a clear distinction between different interface modules while ensuring a cohesive design language.

02.Page Layout,Defines the interface hierarchy to reduce operational jumps and enhance usability.

02.Page Layout,Defines the interface hierarchy to reduce operational jumps and enhance usability.

02.Page Layout,Defines the interface hierarchy to reduce operational jumps and enhance usability.

Visual Design

Visual Design

The visual design of this B2B SaaS platform focuses on clarity, efficiency, and usability to support seamless enterprise workflows. A structured layout with modular components, interactive data visualizations, and a clean, professional aesthetic ensures an intuitive experience for users managing inventory and orders. The design balances data density and readability, optimizing information display while maintaining a modern and scalable interface. Additionally, a dark mode alternative enhances accessibility for prolonged use, reinforcing a user-centric approach.

The visual design of this B2B SaaS platform focuses on clarity, efficiency, and usability to support seamless enterprise workflows. A structured layout with modular components, interactive data visualizations, and a clean, professional aesthetic ensures an intuitive experience for users managing inventory and orders. The design balances data density and readability, optimizing information display while maintaining a modern and scalable interface. Additionally, a dark mode alternative enhances accessibility for prolonged use, reinforcing a user-centric approach.

01.Grid System – Establishes structural consistency

Dashboard

The dashboard design prioritizes clarity, efficiency, and accessibility, providing users with a structured overview of key business metrics and operational tasks. By streamlining data visualization and workflow management, the interface ensures users can monitor critical insights at a glance while seamlessly navigating between different functionalities.

Show Detail

Show Detail

Show Detail

02.Dashboard Design

02.Dashboard Design

02.Dashboard Design

Sidebar Navigation

The first image highlights a structured sidebar layout, ensuring clear content hierarchy and quick access to key sections. The left-side navigation enhances usability by grouping related functionalities while keeping the main content area uncluttered.

Sidebar Navigation

The first image highlights a structured sidebar layout, ensuring clear content hierarchy and quick access to key sections. The left-side navigation enhances usability by grouping related functionalities while keeping the main content area uncluttered.

Sidebar Navigation

The first image highlights a structured sidebar layout, ensuring clear content hierarchy and quick access to key sections. The left-side navigation enhances usability by grouping related functionalities while keeping the main content area uncluttered.

Scanning & Browsing Patterns

The second image demonstrates the user’s natural reading and scanning flow, following a Z-pattern or F-pattern layout. This guides users through content efficiently, directing attention to priority information first and supporting intuitive interactions.

Scanning & Browsing Patterns

The second image demonstrates the user’s natural reading and scanning flow, following a Z-pattern or F-pattern layout. This guides users through content efficiently, directing attention to priority information first and supporting intuitive interactions.

Scanning & Browsing Patterns

The second image demonstrates the user’s natural reading and scanning flow, following a Z-pattern or F-pattern layout. This guides users through content efficiently, directing attention to priority information first and supporting intuitive interactions.

Adaptive Module Structure

The third image illustrates a modular grid system that dynamically fills empty spaces based on available screen real estate. This ensures a responsive and balanced interface, automatically adjusting content layout to maintain visual consistency across different

Adaptive Module Structure

The third image illustrates a modular grid system that dynamically fills empty spaces based on available screen real estate. This ensures a responsive and balanced interface, automatically adjusting content layout to maintain visual consistency across different

Adaptive Module Structure

The third image illustrates a modular grid system that dynamically fills empty spaces based on available screen real estate. This ensures a responsive and balanced interface, automatically adjusting content layout to maintain visual consistency across different

  1. 03.Dark Mode & Light Mode Toggle

Data Center

The Data Center serves as a centralized hub for merchants to track key business metrics and make informed decisions. By integrating various visualization tools, including pie charts, bar charts, and line graphs, the platform presents complex data in an intuitive and digestible format. Users can analyze category proportions, compare performance trends, and monitor business growth in real-time, reducing cognitive load and enhancing operational efficiency.

Show Detail

Show Detail

Show Detail

04.Data Center, Showcases data visualization elements

04.Data Center, Showcases data visualization elements

04.Data Center, Showcases data visualization elements

Pie Chart

The pie chart is ideal for showcasing category proportions, visually illustrating the distribution of different segments. The empty space within the chart allows for additional textual data representation, reducing users’ cognitive load while browsing and improving readability.

Pie Chart

The pie chart is ideal for showcasing category proportions, visually illustrating the distribution of different segments. The empty space within the chart allows for additional textual data representation, reducing users’ cognitive load while browsing and improving readability.

Pie Chart

The pie chart is ideal for showcasing category proportions, visually illustrating the distribution of different segments. The empty space within the chart allows for additional textual data representation, reducing users’ cognitive load while browsing and improving readability.

Bar Chart

Designed for business scenarios requiring comparative analysis, the bar chart enables easy data comparison across different categories. With the human eye naturally sensitive to height variations, this visualization effectively highlights differences, making trends and performance gaps more apparent.

Bar Chart

Designed for business scenarios requiring comparative analysis, the bar chart enables easy data comparison across different categories. With the human eye naturally sensitive to height variations, this visualization effectively highlights differences, making trends and performance gaps more apparent.

Bar Chart

Designed for business scenarios requiring comparative analysis, the bar chart enables easy data comparison across different categories. With the human eye naturally sensitive to height variations, this visualization effectively highlights differences, making trends and performance gaps more apparent.

Line Chart

The line chart is used for tracking trends in continuous variables over time, providing a clear representation of sequential data changes. By visually emphasizing fluctuations and growth patterns, it helps users analyze business performance, identify trends, and make data-driven decisions.

Line Chart

The line chart is used for tracking trends in continuous variables over time, providing a clear representation of sequential data changes. By visually emphasizing fluctuations and growth patterns, it helps users analyze business performance, identify trends, and make data-driven decisions.

Line Chart

The line chart is used for tracking trends in continuous variables over time, providing a clear representation of sequential data changes. By visually emphasizing fluctuations and growth patterns, it helps users analyze business performance, identify trends, and make data-driven decisions.

Product Management

The product management module is designed to simplify the process of organizing, updating, and tracking inventory. With an intuitive table layout, users can efficiently view product details, edit listings, and manage availability with a single click. Advanced search and filtering options enable quick access to specific products, while bulk action capabilities enhance workflow efficiency. Integrated product images improve visual recognition, reducing errors in product selection. This system ensures seamless product management, optimizing operations for businesses handling large inventories.

Show Detail

Show Detail

Show Detail

05.Product Management

05.Product Management

05.Product Management

06.Product Management - Add Product

06.Product Management - Add Product

06.Product Management - Add Product

07.Product Management - Edit Product 

07.Product Management - Edit Product 

07.Product Management - Edit Product 

REFLECTION

REFLECTION

REFLECTION

Key Learnings and Takeaways

Throughout this project, I focused on designing a scalable and user-centric SaaS backend system tailored for SMEs in the cultural and creative industries. While the platform successfully streamlines core business operations such as inventory management, order processing, and analytics, the design process also highlighted key insights and areas for future refinement.

Prioritizing Core Functionalities

Prioritizing Core Functionalities

Given the project’s scope, I concentrate on high-impact areas like inventory and order management rather than designing every page, ensuring the most critical workflows were optimized first.

Balancing Usability and Complexity

Balancing Usability and Complexity

Designing a backend system requires a balance between feature-rich interfaces and user-friendly interactions, especially for users with minimal technical expertise.

Scalability for Business Growth

Scalability for Business Growth

The modular architecture and intuitive navigation allow businesses to expand their operations without compromising efficiency.

Future Expansion Considerations

Future Expansion Considerations

While the current design addresses key business needs, additional features such as customer relationship management (CRM) and advanced analytics could further enhance the platform.

  • AR Uyghur Patterns

    AR project reviving Uyghur art.

  • Homeward – RPG

    An RPG exploring emotions.

  • SaaS B2B Platform

    B2B system for business management.

  • Blok – Digital Space

    Interactive digital art experience

  • Bonus Game

    Engaging mini-game for user retention.

  • CRO Website

    Enhanced UX for higher conversions.

  • AR Uyghur Patterns

    AR project reviving Uyghur art.

  • Homeward – RPG

    An RPG exploring emotions.

  • SaaS B2B Platform

    B2B system for business management.

  • Blok – Digital Space

    Interactive digital art experience

  • Bonus Game

    Engaging mini-game for user retention.

  • CRO Website

    Enhanced UX for higher conversions.

  • AR Uyghur Patterns

    AR project reviving Uyghur art.

  • Homeward – RPG

    An RPG exploring emotions.

  • SaaS B2B Platform

    B2B system for business management.

  • Blok – Digital Space

    Interactive digital art experience

  • Bonus Game

    Engaging mini-game for user retention.

  • CRO Website

    Enhanced UX for higher conversions.

Rochelle © 2025

Rochelle © 2025

Rochelle © 2025