top of page
Shopee B2B System
About ME
Basic Information
Design Value
- Improve efficiency
- Consistency (make rules)
- Scalability
Common Pattern team
The team consists of 20+ members, primarily including designers and engineers from the Shopee promotion team.
Achievements
- All designers（50+） at Shopee are using UI kits to build B2B design file.
- 7+ admin portals teams are using Common Pattern.
- 40% manpower saved.
About Common Pattern
The common pattern consists of two parts: website and UI kits.
Website
UI Kits
01
Website
The common pattern website consists of three parts: Introduce, components, ISFE builder
Introduce
Introducing the basic knowledge of the common pattern, the benefits it can bring, and how to use it.
Design Value
Installation
Components
It includes the usage of components and guidelines, helping users understand the basic rules and styles of each component.
Usage
Guideline
ISFE Builder
Users can quickly build pages, see real-time styles and corresponding code by using the ISFE builder.
Home Page
Build Page
02
Common Pattern UI Kits (Figma)
The UI kits provide users with the components and styles they need for their work.
Catalog
Components
My Job
01
Discussing and confirm guidelines
- Weekly meetings to discuss the guidelines for different components.
- Regularly completing various guideline content and details.
Guideline Sample
Example and Code
Guideline
02
Build Common Pattern UI Kits
- Fully responsible for the production of UI kits.
- Conducting user research, and optimizing UI kits.
UI Kit Sample (Table as reference)
Basic Component
Template
User Guide
Scenarios and Flow
- Basic Component: The basic component module to use in the project.
- Template: Page-level templates, pages that components can be used in.
- User Guide: A simple introduction on how to use the component.
- Scenarios and Flow: The page flow and scenarios corresponding to components that based on the guideline.
UI Kit Sample (Page)
- Users can quickly use the components to build pages.
- All components are responsive.
- All components are built using auto-layout.
- Users can easily change the styles of components using variants.
UI Kit Usability Testing and Optimization
- Background: The first version of the Common Pattern has been released and we would like to understand more about users' current usage and get their feedback to further optimise the UI Kit.
- Objective: Understand users' behavior and improve our UI Kits.
- Methodology: Face to face interview
Key Changes
1. change the asset layout to help users easier to search components in Figma files.
2. have an overview page with component illustrations (similar to AntD)
3. To show all styles within each component
4. To make template pages for main scenarios like table and forms
5. Add docsite(guideline) link in each component.
03
Build Common Pattern Website
Website Pages
Website Pages (Other Options)
Logo
Logo (Other Options)
Newsletter
bottom of page