Endeavor AI

DASHBOARD

Empower users to start confidently by reducing ambiguity and decision fatigue

Jobs To Be Done

When overwhelmed by piles of Purchase Orders, they have to quickly identify what to process first in order to efficiently create Sales Orders.

Problem

Users struggle to prioritize PO documents due to lack of structure, which leads to cognitive overload and workflow delays.

How To Solve

Designed the AI-determined match certainty using color coding and clear button labels to help users recognize their current task status and decide how much effort to invest.

ORDER PAGE

Enhance focus and efficiency by simplifying the workflow into a single page.

Jobs To Be Done

Users need to confirm the extracted information and matches item by comparing Purchase Order document and ERP item list.

Problem

Constant switching between paper and screen causes fatigue and breaks focus. Their unfamiliarity with AI automation also makes it difficult to adapt to the new workflow.

How To Solve

▪︎ To help users compare information without excessive eye shifting, I aligned each interface section with the corresponding position of the data in the original document and simplified tasks into a single-page workflow

▪︎ To help users recognize the edit feature intuitively, I applied the same UI box style from the Excel-like layout they already use at work, reducing the unfamiliarity of AI.

▪︎ Users struggled with the process after completion, so I designed clear explanation and guidance to prevent friction.

ORDER PAGE

Simplified task breakdown using a card-type layout and designed AI into intuitive UXUI

Jobs To Be Done

When handling large volumes of item and pricing data, users want to easily identify what actions to take.

Problem

Users struggled to remember customer and ERP item IDs. They are overwhelmed by item data and drained by price comparisons between ERP and customer systems due to the heavy information load.

How To Solve

▪︎ Designed a card-type layout to reduce user confusion by visually chunking workloads into clear, actionable units.

▪︎ Utilized the AI-calculated price difference feature in badge and tooltip designs to help users save time and reduce cognitive load.

▪︎ By displaying AI-identified top matches with ranking in the search UI, it reduced users' reliance on memory and made the task easier.

ERROR INTERACTION

Improve accuracy with clear, actionable error messages that help prevent user mistakes

Jobs To Be Done

Users require to catches every order entry error before they happen for anomalies, mismatched pricing, and missing order details.

Problem

Unclear error feedback leaves users unsure of the root cause, whether it's a system issue or missing data, resulting in confusion and wasted time.

How To Solve

Provide a clear explanation of why the error occurred and what users need to do to resolve it quickly.

DASHBOARD

Empower users to start confidently by reducing ambiguity and decision fatigue through clear guidance.

Jobs To Be Done

When overwhelmed by piles of Purchase Orders, they have to quickly identify what to process first in order to efficiently create Sales Orders.

Problem

Users struggle to prioritize PO documents due to lack of structure, which leads to cognitive overload and workflow delays.

How To Solve

Color coding in match certainty and clear button labels help users recognize their current task status and decide how much effort to invest.

Designed the AI-determined match certainty using color coding and clear button labels to help users recognize their current task status and decide how much effort to invest.

ORDER PAGE

Enhance focus and efficiency by simplifying the workflow into a single page.

Jobs To Be Done

Users need to confirm the extracted information and matches item by comparing Purchase Order document and ERP item list.

Problem

Users struggle to remember customer and ERP item IDs, while constant switching between paper and screen causes fatigue and breaks focus. Their unfamiliarity with AI automation also makes it difficult to adapt to the new workflow.

How To Solve

Simplified tasks into a single-page workflow with AI suggestions and a familiar Excel-style layout to improve usability and reduce friction.

ORDER PAGE

Simplified task breakdown using a card-type layout that helping users reduce confusion.

Jobs To Be Done

When handling large volumes of item and pricing data, users want to easily identify what actions to take.

Problem

Users are overwhelmed by item data and drained by price comparisons between ERP and customer systems due to the heavy information load.

How To Solve

Designed a card-type layout to reduce user confusion by visually chunking workloads into clear, actionable units. Badges help guide users through their tasks, while tooltips simplify complex actions by providing detailed, contextual information.

ERROR INTERACTION

Improve accuracy with clear, actionable error messages that help prevent user mistakes

Jobs To Be Done

Users require to catches every order entry error before they happen for anomalies, mismatched pricing, and missing order details..

Problem

Unclear error feedback leaves users unsure of the root cause, whether it's a system issue or missing data, resulting in confusion and wasted time.

How To Solve

Provide a clear explanation of why the error occurred and what users need to do to resolve it quickly.

AI Match Confidence

Empower users to start to work assuredly by reducing ambiguity and decision fatigue.

Jobs To Be Done

Users create sales orders by accurately distinguishing each client's Purchase Order Information.

Problem

Users struggled to remember customer and ERP item IDs. They are overwhelmed by item data between ERP and customer systems due to the heavy information load.

How To Solve

Color coding in match certainty and clear button labels help users recognize their current task status and decide how much effort to invest.

▪︎ Designed AI-informed match certainty fuction by using color coding and clear button labels to help users to decide how much effort to invest in worflow decision making.

▪︎ Displayed AI-identified top matches in the search UI, reducing users' reliance on memory, making the work easier.

Single Order Page

Enhance focus and efficiency by simplifying the workflow into a single page.

Jobs To Be Done

Users need to confirm the extracted information and match items by comparing the Purchase Order document and ERP item list.

Problem

Constant switching between screens causes fatigue and breaks focus. User unfamiliarity with AI automation also makes it difficult to adapt to new workflow.

How To Solve

▪︎ Aligned UI sections with the corresponding position of the data in the original document and simplified into a single-page workflow.

▪︎ Applied consistant UI box style from the Excel-like layout they already use at work to reduce the unfamiliarity of AI.

AI-driven Order Orchestration

Minimize user effort in performing tasks like calculation and prioritization.

Jobs To Be Done

When faced with a large volume of Purchase Orders, including items and pricing data, users have to quickly decide what to process first in order to create Sales Orders.

Problem

Users struggle to prioritize PO documents due to lack of structure and calcuate the price differences, which leads to cognitive overload and workflow delays.

How To Solve

▪︎ Utilized the AI-calculated price difference feature in badge and tooltip designs to help users save time and reduce cognitive load.

▪︎ Leveraged AI to prioritize and group sales orders based on each client's business logic requirements.

AI Workflow Guidance

Simplified task breakdown using a card-type layout that helps users reduce confusion.

Jobs To Be Done

When handling large volumes of items in a Purchase Order, users need to quickly and accuratly identify what actions to take.

Problem

Users were confused by unclear task boundaries and post-completion workflows.

How To Solve

▪︎ Designed a card-type layout to reduce user confusion by visually chunking workloads into clear, actionable units.

▪︎ Guided users through their tasks with badges, and tooltips simplify complex actions by providing detailed, contextual information to prevent mistakes.

Error Handling

Improve accuracy with clear, actionable error messages that help prevent user mistakes.

Jobs To Be Done

Users are required to catch every order entry error such as anomalies, mismatched pricing, and missing order details before they happen.

Problem

Unclear error feedback leaves users unsure of the root cause, whether it's a system issue or missing data, resulting in confusion and wasted time.

How To Solve

Provide a clear explanation of why the error occurred and what users need to do to resolve it quickly.

DESIGN SYSTEM

Built a scalable design system to accelerate custom B2B demos.

As a sole designer, I built the entire design system for rapid design customization for demo to support specific business logics since the lack of a structured system for primary design components led to process delays.

Built desktop screens for web platform.

Screen Size

Space

Layout Columns

To ensure consistency, the screen is responsive to screen height, with a fixed width of 1440px.

Custom breakpoint in Tailwinds: 1440px

To help position elements in the interface, columns are proposed to serve as a guide in this step.

Standard spacing: 24px
Spacing scale: 8px

To help position elements in the interface, the design uses a 5 column layout.

Margins: 24px
Gutters: 56px
Column grid: 5

Used Tailwind CSS color tokens to ensure consistency between design and development, and to optimize collaboration with engineers.

Blue

Blue 800
#1E40AF

Blue 600
#2563EB

Blue 500
#3B82F6

Blue 100
#DBEAFE

Blue 50
#EFF6FF

Black/White

Zinc 900
#18181B

Blue 600
#2563EB

Blue 500
#3B82F6

Blue 100
#DBEAFE

Blue 50
#EFF6FF

Tertiary

Zinc 900
#18181B

Blue 500
#3B82F6

Blue 50
#EFF6FF

Blue 600
#2563EB

Blue 100
#DBEAFE

Blue 50
#EFF6FF

Error Red

Zinc 900
#18181B

Blue 500
#3B82F6

Text alignment is primarily applied Left Align.

Used System Icons. 16px, 24px, 40px

Headline Large - Inter Semibold 20px

Headline Medium - Inter Medium 16px

Title Large - Inter Semibold 14px

Title Medium - Inter Medium 14px

Title Small Text 2 - Inter Medium 12px

Body Large - Inter Regular 14px

Body Medium - Inter Regular 12px

Body Small - Inter Light 12px

Label Large - Inter Regular 12px

Used to convey dynamic information, such as a count or status. A badge can include text, labels, or numbers.

Used for single-step actions and as Calls to Action (CTAs), while using icons to quickly convey actions at a glance.

Typically used when users have multiple items to choose from. These are used in components like Sales Order Filter, See More Match Items, and Shipment Type, where an action is triggered based on the user’s selection.

Enabled users to easily search for the information and data they needed to complete their tasks using Endeavor’s data.

Used in forms to help users modify extracted information from Endeavor. Input fields are typically found within forms, but can also appear in modals, search interfaces, or within requested items in the Matched Results section.

Used to provide specific information that helps users take clear action and understand the next steps. These are commonly found in buttons, icons, and error notifications.

Set of components.