2019 - 2022
UXUI DESIGN

KEYWORD:
BLOCKCHAIN | DIGITAL TWINS  | SAAS PRODUCT | B2B
BACKGROUND:
Empower tracking is a disruptive solution for solving the issue of plastic waste pollution in developing countries and the transparency in the recycling industry.

Transaction data is secured by Blockchain technology to achieve traceability and immutability. Therefore, the value of recycled plastic is increased, which benefits all levels in the recycling supply chain, especially increasing the incomes of suppliers and waste pickers.

Such a digital tracking infrastructure helps shape a truly circular economy. Bring the whole recycling process to a transparent level, against greenwashing as well as protect the environment and against poverty.
CHALLENGE

- I joined Empower in the company's early stage in 2019, while all digital products need to be developed from scratch. I worked with PM and stakeholders to interpret ideas, build products from scratch.We build MVP version of each products and along with rapid tests and constant iterations.
APPROACH

- The design process adopted the user-centered design method and was following the phases of Understanding, Discovering and Defining, Design, and Prototype testing.
- Work with stakeholders in the company and PM, quickly draft the personas and narrow down the scope.
- Product iterations is conducted by combining the business requirements and user feedback.
RESULT

- Over two years of design, implementation and iteration, the Empower ecosystem is in place.
- Over 40 Organizations registered and over 2000 active users
- Ongoing collaboration with 2 of the World's largest petrochemical companies : DOW and BABF
- Total KG’s incentivized and tracked: 7,663,179
DESIGN AWARDS:

- iF DESIGN AWARD
- UX Design Awards nomination
- RedDot Design Concept Awards finalist
OPPORTUNITY AND CHALLENGES
The EU incentives business at different level to be part of the circular economy, which means using recycled materials instead of using raw material to minimize material consumption in production and protect the environment.
Trust issue
Raw materials may labelled as recycled materials due to the high demand in the market.
Resource
Hard to source suppliers and predict the production time and budget.
Product overview
SOLUTION: DATA ENCRYPTED IN THE THOROUGH TRACKING PROCESS
1. EMPOWER TRACKING SYSTEM
Empower tracking system is the core product of the entire Empower digital infrastructure.
With blockchain technology, the Tracking System is opening up for several uses both in waste management infrastructure level as well as part of sustainable and traceable supply chains where lack of transparency is a problem. Such global digital tracking infrastructure helps shape a truly circular economy. Retail companies are thus able to prove their use of responsible recycled plastic and show the story behind the products to customers.
2. EMPOWER MARKETPLACE
Empower marketplace is for recycled plastic which is fully certified and comes documented with verified provenance along with social and environmental impact data. It's easy to track the source of recycled plastic origins, bringing transparency to the market.
3. PRODUCT PASSPORT
Empower Product Passport shows to customers the environmentally positive journey of products made of recycled materials. It engage customers with a new narrative journey - taking them from the exact cleanup operation that makes up the plastic content - to the final destination in their hands.
Challenges and ApproachES
in the design process

Considering the confidential issue, I won't show the whole design process in my portfolio. Instead, I will list the challenges I met in the design process and the approaches which I used to tackle them.
CHALLENGE 1: KEY USER? DECISION-MAKER? OR SUPPORT TEAM?
In B2B products, it's common to have multiple personas. However, the persona may have different types, some are the decision-maker to purchase the product but they are not the real users. Some are the key user of the product and some are performed as roles of the support team to maintain the process work smoothly. Considering the limited capacity, take these into consideration can help me and the whole team to make better decisions when it comes to the prioritization.
CHALLENGE 2: CROSS-PLATFORM
Except for designing for the company's core products, I was also involved in the design for the company's internal system. Therefore, whenever we want to implement a new feature, the design task will always cross platforms and need to have thorough thinking avoiding missing any part to cause the dysfunction of the entire process.
For instance, category customization setting.
APPROACH 1: INFORMATION ARCHITECTURE
By using the IA, it's easy to know where the changes will affect with and grasp an overview of how potential areas need to take care of and update.
Partial information architecture of the Tracking app
APPROACH 2: SYSTEM MAP:
For 2B product/service, it always involve multiple personas along the process. The system map is the tool that I used quite often to quick capture the overview.
System map for the process of plastic credits application
This is some text inside of a div block.
System map for the process of generating product passport
APPROACH 3: Task Flow
Draw a Task flow for each actor in the system map to make sure not missing any necessary step for the overall process.
System map for the process of  supply chain map set up
User interface
Design system: From FIGMA TO STORYBOOK
It takes time to find a good design component library to work on with, it depends on the front-end framework and also the scale of the product. We started from Material design, then change to Vuetify and Vue material , and chose MWC (Material Web component) as the basement of Empower design system in the end.

Meanwhile, in order to improve the efficiency of the whole product team and minimize the back and forth between the Front- end team and Designers, we built the component library with Chromatic and view in Storybook.
Part of the Empower design system in Figma
Responsive design
Due to the limited capacity, we started the UI either mobile first or Desktop first. Once the first version is released, we incrementally apply the responsive design for all products.
UI EVOLUTION
We never stop improving the product and it effects to the user interface as well. The user interface is changing for adding new features, content, restructure, usability improvement and so on.
© 2017— 2021 Xia li All right reserved