68edaedb06a8edb1c1231728_iMac Mockup Light.png
68edafff24b64f113ecd42d1_Structured Clarity.png

UX-UI WEB Design

Scaling Clarity in B2B Design

spanning design systems, dashboards, and enterprise workflows

spanning design systems, dashboards, and enterprise workflows

spanning design systems, dashboards, and enterprise workflows

B2B systems often share similar challenges: complex workflows, multiple roles and permissions, and information overload. In these three B2B design projects, I applied system thinking, business logic, and user empathy to turn complexity into clarity:

• Project 1: Say Yeah’s Shine Performance Dashboards — Designing role-based dashboards that improved clarity, adoption, and training efficiency →

• Project 2: ApplyToEducation Attendance Support — Streamlining complex HR workflows into a centralized attendance platform →

• Project 3: GWSK Design System — Establishing a scalable foundation for design and development consistency →

Through these projects, I focused on scaling workflows, improving usability, and driving adoption in high-stakes B2B environments.

ROLE

Research
UX Design
UI Design
Product Design
Component Design
System Design

TOOLS

Figma
Miro

TIMELINE

Jun - Sep 2025

01

Say Yeah’s Shine Performance — Trainer & Learner Dashboards

CHALLENGE • Enabling multi-role visibility and adoption

CHALLENGE • Enabling multi-role visibility and adoption

CHALLENGE • Enabling multi-role visibility and adoption

Shine is an AI-driven learning and performance platform that helps organizations accelerate skill development. One of the key challenges was providing role-based dashboards where each group could access critical information at a glance. My responsibility was to design solutions that lowered training and support costs while improving overall adoption.

Shine is an AI-driven learning and performance platform that helps organizations accelerate skill development. One of the key challenges was providing role-based dashboards where each group could access critical information at a glance. My responsibility was to design solutions that lowered training and support costs while improving overall adoption.

SOLUTION • Structuring role-specific hierarchies to drive dashboard design

SOLUTION • Structuring role-specific hierarchies to drive dashboard design

SOLUTION • Structuring role-specific hierarchies to drive dashboard design

Building on stakeholder interviews conducted by the PM, I refined the information architecture and designed new dashboards tailored to trainers and learners: trainers required visibility across multiple cohorts, regions and timely access to support opportunities, while learners needed a clear view of their progress.

Building on stakeholder interviews conducted by the PM, I refined the information architecture and designed new dashboards tailored to trainers and learners: trainers required visibility across multiple cohorts, regions and timely access to support opportunities, while learners needed a clear view of their progress.

For trainers

For trainers

For trainers

• Course overview & progress gauge: Snapshot of overall learner performance

• Iteration progress: Unified timeline to track class iteration across groups

• Practice group comparison: Displays performance by location and group

• Learner support opportunities: Week-by-week breakdown of who needs attention, making intervention timely and scalable

68e2934e0291674fb3463144_Trainer Dashboard.png

For learners

For learners

For learners

• Progress gauge: Shows current performance status

• Feedback & next steps: Actionable guidance to reinforce confidence

• Iteration progress bar: Visual overview of weekly milestones and current stage

• Practice overview:  Video module and checklist to apply lessons.

68e325934bb31efae77a71dc_Learner Dashboard.png

ITERATION • Evolving the dashboard through feedback and testing

ITERATION • Evolving the dashboard through feedback and testing

ITERATION • Evolving the dashboard through feedback and testing

Through multiple iterations, I refined the dashboard layouts to improve scannability and visual hierarchy. Each iteration focused on optimizing information density, color use, and labeling to reduce cognitive load and improve quick comprehension across roles.

Through multiple iterations, I refined the dashboard layouts to improve scannability and visual hierarchy. Each iteration focused on optimizing information density, color use, and labeling to reduce cognitive load and improve quick comprehension across roles.

68e4729cfd8a5711f85f25c5_iteration_1.png
68e473e6aa56011f2ac4022e_iteration_2.png
68e473ff87d452a755c5436c_iteration_3.png
68e4740dc8ad084e0433b021_iteration_4.png

SYSTEMIZATION • Building reusable components for scalability

SYSTEMIZATION • Building reusable components for scalability

SYSTEMIZATION • Building reusable components for scalability

To ensure scalability and consistency, I developed a library of reusable components—such as check-in cards, progress gauges, and feedback modules—assembled into card-based layouts that support both dark and light modes. Accessibility was built in through WCAG-compliant color contrast, icon–label pairings, and clear status indicators.

To ensure scalability and consistency, I developed a library of reusable components—such as check-in cards, progress gauges, and feedback modules—assembled into card-based layouts that support both dark and light modes. Accessibility was built in through WCAG-compliant color contrast, icon–label pairings, and clear status indicators.

68e475c130b983dc6e976c3d_Components.png
68e476c3971f8b833147002f_Annotations.png

OUTCOME • Driving adoption, efficiency, and business impact

OUTCOME • Driving adoption, efficiency, and business impact

OUTCOME • Driving adoption, efficiency, and business impact

The new dashboards improved operational efficiency and adoption across roles. Trainers reduced time managing cohorts and acted proactively on insights, while learners gained clearer guidance and accountability. These outcomes not only enhanced usability and engagement but also contributed to securing a new client contract for the platform.

The new dashboards improved operational efficiency and adoption across roles. Trainers reduced time managing cohorts and acted proactively on insights, while learners gained clearer guidance and accountability. These outcomes not only enhanced usability and engagement but also contributed to securing a new client contract for the platform.

68e4747f27209aab2a5d554c_Outcome_P1.png

02

ApplyToEducation — Attendance Support for Administrators

CHALLENGE • Fragmented workflows and visual inconsistency

CHALLENGE • Fragmented workflows and visual inconsistency

CHALLENGE • Fragmented workflows and visual inconsistency

ApplyToEducation, serving 98% of Canadian school boards, sought to replace fragmented Excel workflows with a unified attendance system. Administrators struggled to manage scattered records and complex processes. The new system aimed to centralize attendance tracking, strengthen compliance, and make decision-making more straightforward.

ApplyToEducation, serving 98% of Canadian school boards, sought to replace fragmented Excel workflows with a unified attendance system. Administrators struggled to manage scattered records and complex processes. The new system aimed to centralize attendance tracking, strengthen compliance, and make decision-making more straightforward.

68fd839f788b64fc5b3b8149_excel.png

SOLUTION • Designing clarity through a new structure around user roles

SOLUTION • Designing clarity through a new structure around user roles

SOLUTION • Designing clarity through a new structure around user roles

While the PM conducted stakeholder interviews and mapped current journeys, I focused on designing the solution through strategic, UX execution, and systemic delivery lenses. Together, we transformed fragmented workflows into a centralized hub for administrators — enabling them to track cases, document notes, attach reports, and visualize attendance trends in real time — while defining guided interactions grounded in user stories and establishing reusable layouts and components to support scalable MVP delivery.

While the PM conducted stakeholder interviews and mapped current journeys, I focused on designing the solution through strategic, UX execution, and systemic delivery lenses. Together, we transformed fragmented workflows into a centralized hub for administrators — enabling them to track cases, document notes, attach reports, and visualize attendance trends in real time — while defining guided interactions grounded in user stories and establishing reusable layouts and components to support scalable MVP delivery.

Strategic lens — Structuring clarity for administrative workflows

Strategic lens — Structuring clarity for administrative workflows

Strategic lens — Structuring clarity for administrative workflows

• Built structured workflows that centralized data, standardized attendance stages, and eliminated manual tracking.

• Designed a unified administrative hub where all key functions—recording, reviewing, and reporting—happen in one place, minimizing context switching and improving visibility.

68fd8e42e79a1b8bcd4fbe4c_attendance support dashboard.png

UX execution lens — Defining interaction patterns for guided decision-making

UX execution lens — Defining interaction patterns for guided decision-making

UX execution lens — Defining interaction patterns for guided decision-making

• Status dashboard — Offered a clear, visual overview of attendance trends for proactive planning.

• Automated notifications — Delivered real-time alerts on policy changes and attendance thresholds.

• Centralized attachments — Consolidated uploads and version control, replacing scattered email handoffs.

• Adjustment log — Captured every change for transparency, audit, and accountability.

68fd94458c214bcd75c2a6ab_some fatures.png

Systemic delivery lens — Scaling design through consistency and reuse

Systemic delivery lens — Scaling design through consistency and reuse

Systemic delivery lens — Scaling design through consistency and reuse

• Established a library of reusable components with standardized naming, consistent spacing, hierarchy, and interaction rules. Built a cohesive visual language spanning lists, forms, attachments, notifications, and summary cards — enabling scalable development and smoother QA.

• Documented user stories through annotated cards outlining task, role, entry point, and scenario, helping developers understand cross-page interactions and implementation context.

68fd96ecee31fc7f0e51e57b_Component.png
68fd91c3b2193ead2c8f18a0_storycards.png

OUTCOME • A streamlined experience improved efficiency

OUTCOME • A streamlined experience improved efficiency

OUTCOME • A streamlined experience improved efficiency

The new administrative hub enables administrators to manage attendance workflows end-to-end, reducing task completion times by 20% and improving overall productivity. Internally, the design team’s involvement improved clarity and alignment across teams, helping stakeholders anticipate downstream effects earlier in the process. This project demonstrated how design can directly influence operations — transforming a fragmented process into a transparent, data-informed system that supports proactive planning and measurable efficiency gains.

The new administrative hub enables administrators to manage attendance workflows end-to-end, reducing task completion times by 20% and improving overall productivity. Internally, the design team’s involvement improved clarity and alignment across teams, helping stakeholders anticipate downstream effects earlier in the process. This project demonstrated how design can directly influence operations — transforming a fragmented process into a transparent, data-informed system that supports proactive planning and measurable efficiency gains.

03

GWSK Studio — Design System

CHALLENGE • Building unified design foundations for a new studio

CHALLENGE • Building unified design foundations for a new studio

CHALLENGE • Building unified design foundations for a new studio

When GWSK Studio was founded, the team had no unified design language or shared component library. Each project operated with its own styles, typography, and interaction patterns — leading to more design efforts and slower development cycles. The challenge was to build a scalable design system from the ground up that could define GWSK’s brand language, improve team efficiency, and enable consistent design quality across all client projects.

When GWSK Studio was founded, the team had no unified design language or shared component library. Each project operated with its own styles, typography, and interaction patterns — leading to more design efforts and slower development cycles. The challenge was to build a scalable design system from the ground up that could define GWSK’s brand language, improve team efficiency, and enable consistent design quality across all client projects.

RESEARCH & INSIGHTS • Learning from established systems

RESEARCH & INSIGHTS • Learning from established systems

RESEARCH & INSIGHTS • Learning from established systems

To design a system tailored for enterprise-level products, I audited leading design frameworks including Material Design, IBM Carbon, Ant Design, and TailwindCSS. Through this research, I identified core patterns that define B2B and data-driven interfaces—information-dense components such as tables, filters, and forms; frequent task-oriented operations like bulk actions, toolbars, and notifications; and complex information hierarchies with multi-level navigation and layouts. Drawing from these principles, I began shaping the foundation of the studio’s first cohesive design system.

To design a system tailored for enterprise-level products, I audited leading design frameworks including Material Design, IBM Carbon, Ant Design, and TailwindCSS. Through this research, I identified core patterns that define B2B and data-driven interfaces—information-dense components such as tables, filters, and forms; frequent task-oriented operations like bulk actions, toolbars, and notifications; and complex information hierarchies with multi-level navigation and layouts. Drawing from these principles, I began shaping the foundation of the studio’s first cohesive design system.

68ecf2541c62ba96d4758993_Design System Research.png

SOLUTION • A scalable and effective design language

SOLUTION • A scalable and effective design language

SOLUTION • A scalable and effective design language

I defined GWSK’s design foundations and tokens—covering color, typography, spacing, elevation, and motion. The system followed Atomic Design principles, ensuring modularity, scalability, and design–development alignment.
System Architecture
• Foundations — Tokens for color, type, spacing, elevation
• Atoms & Molecules — Core UI elements such as buttons, icons, inputs
• Organisms & Templates — Reusable page-level patterns for forms, tables, and dashboards
Through a token-driven design library, the team achieved consistent, brand-aligned interfaces and faster, more reliable design handoffs.

I defined GWSK’s design foundations and tokens—covering color, typography, spacing, elevation, and motion. The system followed Atomic Design principles, ensuring modularity, scalability, and design–development alignment.
System Architecture
• Foundations — Tokens for color, type, spacing, elevation
• Atoms & Molecules — Core UI elements such as buttons, icons, inputs
• Organisms & Templates — Reusable page-level patterns for forms, tables, and dashboards
Through a token-driven design library, the team achieved consistent, brand-aligned interfaces and faster, more reliable design handoffs.

68ecf5ddbb8b862336fe767a_Design system typogrphy.png
68ed43b707833edc8c3eb57f_icon.png
68ed84af388dfe922270e980_buttons.png
68ed862e5b1f7f0d0f8a2e52_Forms.png

OUTCOME • Scaling impact through system thinking

OUTCOME • Scaling impact through system thinking

OUTCOME • Scaling impact through system thinking

The new design system transformed GWSK Studio’s workflow from project-based design to a system-driven approach. It not only improved cross-team alignment but also strengthened the studio’s positioning as a scalable design partner for enterprise clients. The system continues to evolve as a long-term IP asset, supporting brand growth and operational efficiency.

The new design system transformed GWSK Studio’s workflow from project-based design to a system-driven approach. It not only improved cross-team alignment but also strengthened the studio’s positioning as a scalable design partner for enterprise clients. The system continues to evolve as a long-term IP asset, supporting brand growth and operational efficiency.

04

Reflection

Systemizing complexity

Systemizing complexity

Systemizing complexity

Designing for B2B taught me that clarity doesn’t come from removing complexity, but from structuring it. Building coherent systems that align workflows, business logic, and user roles turns messy operations into scalable clarity.

Designing for B2B taught me that clarity doesn’t come from removing complexity, but from structuring it. Building coherent systems that align workflows, business logic, and user roles turns messy operations into scalable clarity.

Design as infrastructure

Design as infrastructure

Design as infrastructure

Through developing the design system, role-based dashboards, and cross-page interactions, I learned that strong foundations—consistent components, clear hierarchies, and reusable patterns—enable faster iteration and long-term product integrity.

Through developing the design system, role-based dashboards, and cross-page interactions, I learned that strong foundations—consistent components, clear hierarchies, and reusable patterns—enable faster iteration and long-term product integrity.

Empathy with impact

Empathy with impact

Empathy with impact

Collaborating with Product Managers, Developers, QA, and diverse users taught me that true empathy in design means delivering measurable outcomes—clarity, efficiency, and accessibility for every role.

Collaborating with Product Managers, Developers, QA, and diverse users taught me that true empathy in design means delivering measurable outcomes—clarity, efficiency, and accessibility for every role.

Explore more work

UX-UI APP DESIGN

Designing a Seamless Scheduling Experience for LunchME Chat

SERVICE DESIGN

Fostering Immigrant Integration & Service Efficiency

UX-UI MOBILE DESIGN

Enriching Museum Visits for Art Enthusiasts

PRODUCT DESIGN

Helping Explorers Discover and Connect with Interactive Maps

BRAND DESIGN

Crafting the Melody Box Identity to Drive Purchases for the Brand

Explore more work

UX-UI APP DESIGN

Designing a Seamless Scheduling Experience for LunchME Chat

SERVICE DESIGN

Fostering Immigrant Integration & Service Efficiency

UX-UI MOBILE DESIGN

Enriching Museum Visits for Art Enthusiasts

PRODUCT DESIGN

Helping Explorers Discover and Connect with Interactive Maps

BRAND DESIGN

Crafting the Melody Box Identity to Drive Purchases for the Brand

Explore more work

UX-UI APP DESIGN

Designing a Seamless Scheduling Experience for LunchME Chat

SERVICE DESIGN

Fostering Immigrant Integration & Service Efficiency

UX-UI MOBILE DESIGN

Enriching Museum Visits for Art Enthusiasts

PRODUCT DESIGN

Helping Explorers Discover and Connect with Interactive Maps

BRAND DESIGN

Crafting the Melody Box Identity to Drive Purchases for the Brand

Explore more work

UX-UI APP DESIGN

Designing a Seamless Scheduling Experience for LunchME Chat

SERVICE DESIGN

Fostering Immigrant Integration & Service Efficiency

UX-UI MOBILE DESIGN

Enriching Museum Visits for Art Enthusiasts

PRODUCT DESIGN

Helping Explorers Discover and Connect with Interactive Maps

BRAND DESIGN

Crafting the Melody Box Identity to Drive Purchases for the Brand

Explore more work

UX-UI APP DESIGN

Designing a Seamless Scheduling Experience for LunchME Chat

SERVICE DESIGN

Fostering Immigrant Integration & Service Efficiency

UX-UI MOBILE DESIGN

Enriching Museum Visits for Art Enthusiasts

PRODUCT DESIGN

Helping Explorers Discover and Connect with Interactive Maps

BRAND DESIGN

Crafting the Melody Box Identity to Drive Purchases for the Brand