I'm a UX/UI designer who likes getting the structure right. I trained as an architect before moving into UX — so I tend to care about the foundations as much as the finish.
0Hands-on projects
0Screens designed
0%Peak user-test success rate
Based inLondon, UK
EducationMSc UX Engineering · Goldsmiths
Before designBA Architecture · Manchester
ToolboxFigma · Adobe XD · Photoshop
Core strengths
01
Structure-first thinking
User flows & information architecture before UI — so products stay clear as they scale. Validated with tree testing.
02
Research → shippable UI
Usability testing feeding hi-fi design & design systems — from insight to dev-ready handoff.
03
Cross-domain range
Designed across healthcare, e-commerce & B2B/SaaS — at home in dense, complex problem spaces.
CurrentlyOpen to UX/UI, Product & Digital Design roles · London & Remote
PolicyCON
Turning policy content into a trusted consultation journey
I redesigned PolicyCON’s dual-sided platform around a simple trust journey: discover expertise, assess credibility and book a consultation.
ROLEUX/UI Designer
DURATION4 Months
TOOLSFigma, Adobe XD
TEAMCross-functional
PLATFORMSWeb & Mobile Responsive
01 · Hero Snapshot
Overview
PolicyCON connects policy subscribers with expert analysts for policy insights and consultations. The existing platform makes complex policies hard to understand, analyst credibility difficult to verify, and content publishing and consultation booking cumbersome.
Problem
Subscribers
Subscribers could not judge analyst credibility or book confidently.
Analysts
Analysts lacked tools to showcase their credentials, publish content, and manage booking schedules.
Key decision
Use content as the gateway to profiles, credentials and consultation.
Outcome
0%
Tree-test success
0%
Usability-test success
02 · Process & Decision
Design rationale
Workflow analysis and competitor benchmarking revealed three principles that shaped the new IA.
Key Insights → Design Principles
Insight 01
Trust before Conversion
Subscribers will not book blindly; they must verify the analyst’s professional expertise first.
Design Principle
Surface credibility signals (publications, credentials, endorsements) at every touchpoint before presenting booking CTAs.
Insight 02
Content as a Gateway
Policy breakdowns are not standalone content, but touchpoints for users to discover an analyst’s capability.
Support high-frequency tasks for both Subscribers and Analysts within a single product ecosystem.
Design Principle
Avoid splitting the system into two disconnected products — unify the experience while respecting each role’s distinct workflow.
IA Building & Validation Process
From design principles to connected journeys.
Three design principles, derived from initial hypotheses, needed to address both sides of PolicyCON. Mapping the complete subscriber and analyst journeys clarified how these principles could guide a coherent end-to-end experience.
Testing the structure behind the journeys.
The journeys informed an initial information architecture that needed to be tested against the design principles. Tree testing (85.3% success) informed clearer booking labels and availability access; low-fidelity user testing (94.3% task completion) identified further improvements to discovery labels and booking CTA visibility.
Before Tree Testing
Information Architecture v1
After Tree Testing
Information Architecture v2
Restructured consultation flow — consolidated booking, history, and availability into a unified “Consultation and Booking” module.
Reorganized Subscriber Dashboard — added Subscription Plans and Consultation and Booking as primary navigation items.
↗ Click any diagram to enlarge
Key Frictions & Design Iterations
User testing revealed two issues in discovery and booking.
Unclear discovery and booking labels
Problem
Users confused analyst discovery with managing existing consultations.
→ Decision & Iteration
Renamed “Popular” to “Find an Analyst” and “My Consultation” to “My Bookings” to separate the two tasks.
Initial designIterated design
An overlooked booking action
Problem
Users missed “Book Consultation” because it looked decorative rather than clickable.
→ Decision & Iteration
Made the booking CTA more prominent with brand-red contrast, a clear button border and higher-priority placement.
InitialIterated
Navigation Model & Rationale
Desktop
Collapsible Sidebar
Decision
Use a scalable left sidebar instead of top navigation.
Why it works
Preserves reading width while supporting future analyst workspace tools.
Mobile
Bottom Navigation
Decision
Reduce navigation to five high-frequency actions.
Why it works
Prioritises discovery, booking and communication on the go.
Role-based
Adaptive Structure
Decision
Keep a shared framework with role-specific primary actions.
Why it works
Maintains one mental model for subscribers and analysts without forcing identical workflows.
BeforeAfter
Core Experience Design
Based on the IA framework and task-priority mapping, three core experiences translated the IA into a continuous journey from discovery → trust → consultation.
01 // Feed UI
01
Content Feed Design
Discovery
Decision
Replaced static article lists with an interactive card-based feed directly linked to the Analyst Profile.
Why it matters
Dense official policies have a high reading barrier. Card breakdowns lower the reading load and act as the first touchpoint to discover analyst expertise.
02 // Analyst Profile
02
Analyst Profile — Trust Signal
Trust
Decision
Structured profiles around “Credentials + Historical Deep Dives + Verified Reviews” (referencing Maven / LinkedIn profile patterns).
Why it matters
Serves as the core trust-building hub. Clear proof of authority was essential for building enough trust to progress towards a paid consultation.
03 // Booking Workflow
03
Booking Workflow
Consultation
Decision
Built an embedded 4-step booking workflow — Choose Analyst / Select Date & Time / Confirm & Checkout / Manage Meetings — inspired by familiar marketplace booking patterns.
Why it matters
Reduces the gap between interest and consultation by eliminating disjointed external email communication that leads to drop-offs.
AI Write & Reading Plugin
Analysts and subscribers needed to process complex policy documents faster. I partnered with backend engineers to design an embedded AI plugin UI.
Pain Point
The AI utilities — translation, comparison, grammar, SEO — are extensive. A persistent side drawer or pop-up would eat screen space, clutter the layout, and break the reading line of sight.
Design Decision
Abandoned persistent drawers for a Contextual Inline UI — a floating toolbar in the Notion AI pattern.
Mechanism
Sequence A · Writing Assistance
1Discover
2Grammar Check
3Adjustment
Highlight text → AI icon appears
Color-coded error highlights
One-click tone adjustment
Analysts (Writing): editing text calls up contextual “Grammar & SEO” suggestions right at the cursor.
Sequence B · Comparison
Subscribers (Reading): highlighting text triggers inline “Translate & Compare” bubbles without leaving the document.
1Add to Compare
2Select Articles
Tap “Add To Compare” on article
Click PolicyCON AI, show ‘compare list’
3Choose Criteria
Solution & handoff
Integrated AI into existing workflows for an unobtrusive “use-and-go” experience.
Delivered high-fidelity prototypes with edge-case specs for a clean handoff to engineering.
4Compare Report
Side-by-side AI analysis
03 · Responsive System & Consistency
Pain Point & Legacy Friction
Visual Inconsistency: weak type hierarchy, mismatched button radii across screens, and an off-brand primary red.
Mobile Navigation Bottleneck: a top-left hamburger opened a full-screen sheet that blocked the view and was hard to dismiss.
Design Decision
Visual Strategy & Trade-offs
Dropped a multi-coloured role theme (too cluttered) and standardized on PolicyCON’s brand red, with a unified type scale and component tokens for consistency and reading clarity.
Color System
Red
Light
#FBE9EA
Primary
#D2232A
Dark
#9E1A20
Darker
#4A0C0F
Grey & White
Light
#ECECEC
Normal
#414042
Dark
#313032
Darker
#171617
White
#FFFFFF
Component States
Interactive components across key states.
Button
DefaultSubmit
HoverSubmit
ActiveSubmit
DisabledSubmit
Toggle
Off
On
Focus
Disabled
Checkbox
UncheckedLabel
CheckedLabel
IndeterminateLabel
DisabledLabel
Result & Outcome
Result: standardized typography and variants allowed identical interaction patterns to scale seamlessly across roles and screen sizes.
Outcome: reduced navigation friction and improved handoff clarity.
04 · Outcome & Reflection
From fragmented features to a connected platform
Consultation, connected
Four-step booking
Credibility, made visible
Credentials, publications & reviews
A clearer path to consultation
Discover → Assess → Trust → Consult
AI within the workflow
Inline translation & writing support
85.3%Tree testing
13 participants · 6 navigation tasks
Success rate85.3%
94.3%Usability testing
33 of 35 tasks completed successfully across 5 participants and 7 scenarios.
Completion rate94.3%
Delivery
80+Web + Mobile screens
4 moResearch to handoff
Design learnings
Architecture connects the service journey.
Validate labels early.
Reusable components support handoff.
Next project
Laerdal E-Commerce Experience Design
Transforming B2B/B2C Healthcare Simulation Sales into an Intuitive, Self-Service Digital Platform
Designed and validated an end-to-end e-commerce proposal with Laerdal Medical, creating the first complete journey from product discovery to post-purchase support.
Role
Lead End-to-End UX/UI Designer
Context
Master’s field project with Laerdal HQ
Tools
Figma
Stakeholders
Global Product Managers & UX team; Clinical expert (Dr. Tian)
Platform
Responsive web e-commerce
Overview
Laerdal Medical trains healthcare professionals worldwide through simulation. As lead UX/UI designer, I developed a proposed self-service e-commerce experience—from information architecture to high-fidelity prototyping—with Laerdal’s global product managers and clinical expert Dr. Tian.
Problem
Current site
The first-generation buying flow offered only basic product display.
Complex orders
Complex orders relied heavily on phone inquiries rather than self-service purchasing.
Key decision
Replace the 4-tier information architecture with a 3-pillar clinical model. Use visual filter cards for discovery and support self-service purchasing with specification comparisons and bundles.
Outcome
0%
Task success
0
SUS score
0%
First-click accuracy
Usability testing conducted with 6 participants.
02 · Problem Framework
Business Context & Core Problem
Business opportunity: Laerdal produces high-complexity, high-value medical training simulators (e.g., Resusci Anne, SimMan). Traditionally, sales relied heavily on phone inquiries and manual quotes. As buying behaviour shifts toward digital channels, Laerdal needed an e-commerce platform that empowers medical instructors and procurement officers to independently browse, compare, and purchase complex equipment.
The Core Problem
User feedback and initial audits revealed that the existing web structure caused severe purchasing friction:
01
Navigational Challenges
Complex product taxonomy made locating specific simulators time-consuming.
02
Decision Paralysis
Absence of side-by-side product comparisons and cross-selling / bundle recommendations for related accessories.
03
Checkout & After-Sales Void
Cumbersome payment flows and a lack of post-purchase capabilities (parcel tracking, user-manual access).
User Journey Map
Summarised with the UX department, based on Laerdal.com.
Goal
Buy ‘Resusci Anne QCPR’ Train students Browse home page
Search specific categories Compare Resusci series
Decide the product to buy Find related products
Checkout products Fill info & register Billing address
Pay for the product Check delivery date
Complete payment Find after-sales service Check parcel
Thinking
Hope to find products quickly Many products on the website
Finding matching product takes time Too many categories
Need to read all overview Expensive — think carefully
Excited to checkout Adding to cart is fast
Costs a lot Page loads slowly Refill info if checkout fails
Can’t track parcel Worried about expensive products
Pain Points
Complicated information architecture
Hard to find products Cannot compare Too much info on pages
Not easy to decide between similar products
—
Limited payment options Cannot save personal info
No function for parcel tracking
Solutions & Hypotheses
From Pain Points to Action
I turned journey-map pain points into solutions and hypotheses for validation.
01
Pain Point
Unclear Product Structure & Categories
Deep 4-tier nesting and vague skill-based labels made products hard to find.
Hypothesis & Solution
Use tree testing to validate and restructure product categories around clinical mental models.
→ Tree test the existing IA
02
Pain Point
Unclear Product Variants & Specs
Unclear sub-models and specifications made similar products and features hard to compare.
Hypothesis & Solution
Add side-by-side comparisons, accessory recommendations, and clearer specs to product pages.
→ A/B test product-page modules
03
Pain Point
Missing Parcel Tracking
No on-site parcel tracking left users anxious and frustrated after purchase.
Hypothesis & Solution
Consider post-purchase tracking to show order status in real time.
→ Design delivery tracking
Next: plan tree testing on the existing IA to validate the restructured product categories.
03 · Process & Design
Navigation Redesign
Tree testing revealed confusing, deeply nested navigation—especially “Skills Proficiency.” Open card sorting with clinical experts guided clearer equipment-based groups.
Separate servicesMove Courses & Learning out of products for focused discovery.
Basic ModelsGive foundational training equipment a clear home.
Design Decisions & A/B First-Click Testing
A/B Testing · Decision Point 1
Homepage Product Discovery Filter
Hypothesis
Presenting primary visual category cards directly on the homepage (Design A) will yield higher search accuracy than displaying dense text-based submenus or isolated product recommendations (Design B).
Method
First-click analysis with 10 participants. Task: find Mini Anne CPR & AEDs on the homepage. Both groups faced the same scenario with different filter designs.
Design A80% Success90% Preferred
Filter Design
First-Click Heatmap
Design B40% Success
Filter Design
First-Click Heatmap
Design Decision — Why
Heatmaps revealed Design B caused high misclicks on irrelevant middle categories (“Basic model”). Design A significantly reduced cognitive load through visual anchors and structured spacing — delivering 2× the success rate and 90% user preference. This confirmed our hypothesis that visual category cards provide clearer navigation affordances than dense text-based submenus for medical product discovery.
A/B Testing · Decision Point 2
Category Detail Page Navigation Layout
Hypothesis
A top-to-bottom tabbed sub-category browsing layout (Design B) aligns better with responsive reading habits than traditional e-commerce sidebar filters (Design A), enabling faster product discovery within deep category hierarchies.
Method
First-click analysis with 10 participants. Task: find the high-end Simulator Sim 3G PLUS. Same scenario, two different category-page navigation designs.
Design A43% Success
Navigation Design
First-Click Heatmap
Design B57% Success70% Preferred
Navigation Design
First-Click Heatmap
Initial Design›Iterated Design
57% success — room to improveRefining Design B into a Clear Navigation Path
Problem
Design B won the test (57% success, 70% preference), but the moderate success rate revealed real friction. Heatmap analysis showed the sub-menu title “Simulation and training” read as product-level content rather than a category label — participants misread the hierarchy and misclicked into the wrong level.
→ Iteration
Adopted Design B as the base layout, then refined its border visual hierarchy and relabelled the menu to resolve the ambiguity — cutting misclicks and producing a clearer navigation path for the final prototype.
04 · Evaluation
Low-Fidelity Usability Testing
Evaluated the end-to-end low-fidelity prototype with 6 participants — 2 medical doctors and 4 general public / community buyers — across four scenario-based tasks covering the full e-commerce journey. Sessions were video-recorded with consent.
Participants
0people
2 Medical Doctors
4 public / community buyers
Task completion
0%
100% completion on each of 4 tasks
Reported SUS / 100
0
Average across all participants
Scenario tasks
0tasks
Browse · Checkout · Tracking · Returns
Average task completion time
T1Browse & Explore
10s
avg. 10s
T2Inspect Spec & Checkout
1m 25s
avg. 1m 25s
T3Post-sale Tracking
1m 17s
avg. 1m 17s
T4Returns & Warranty
5s
avg. 5s
0s~85s (max)
Key iteration insights
Navigation Clarity
“Main Site” was mistaken for home. → Add a clear home link and breadcrumbs.
Service Discoverability
“After Sale” was expected in Account. → Put post-purchase services in main navigation.
Three critical touchpoints in the Laerdal e-commerce journey — each designed to solve a specific user pain point identified during research.
01Discover · Locate Products
Intuitive Product Discovery
Users struggled to navigate the original deep 4-tier product taxonomy. The redesigned homepage features visual category entry points with A/B validated filter cards, enabling users to locate products through an intuitive 3-pillar classification aligned with clinical mental models.
Filter tags (All, Resuscitation training, Emergency care, etc.) let medical professionals narrow results by their actual workflow rather than abstract product hierarchies.
80% First-Click Accuracy
02Understand · Compare Products
Structured Product Detail Page
Similar product variants (e.g. Resusci Anne QCPR vs. Baby QCPR) were nearly impossible to distinguish on the old site. The redesigned PDP organizes complex technical specifications into digestible tabs — Overview, Specification, and Download & Guide.
A new “Parts and Accessories” module enables bundled purchasing, while the Specification tab provides a clear feature comparison matrix so medical professionals can confidently select the right simulator for their training needs.
100% Task Success Rate on Product Comparison
03Track · Post-Purchase Care
Comprehensive Self-Service Portal
The original site had no parcel tracking functionality — users had to call customer service for order updates on their expensive medical equipment. The redesigned portal integrates order tracking (Shipping & Tracking) and return-request workflows directly into the user account.
Users can enter their order number to view real-time delivery status with a clear timeline: order confirmed → dispatched → carrier picked up → out for delivery → arriving date. This self-service approach significantly reduces post-purchase anxiety.
5s Avg. Task Completion for Order Tracking
06 · Outcomes & Reflection
Key Outcomes
At a glance
0%
Task Success Rate
0%
First-Click Accuracy
0s
Reported avg. task time
0
SUS score / 100
Design value
Clinical 3-pillar IA
Visual filter cards
Self-service buyingSpecs + accessory bundles
Tracking + guide downloads
Design for clinical mental models
Organize equipment around clinical mental models—not generic e-commerce templates.
Read numbers through user intent
Use domain-expert discussions to understand the intent behind “wrong paths.”
Next project
TASM Solutions B2B Management Platform Redesign
Redesigned an all-in-one B2B management platform by replacing a cluttered structure with a Role-Based Information Architecture — shipping 100+ high-fidelity screens as a live MVP within 2.5 months.
Role
UI/UX Designer
Timeline
2.5 Months (10+ Weeks)
Scope
100+ High-fidelity Web Screens
Deliverables
Design System & Prototype
Status
MVP Shipped & Live
Overview
TASMsolutions is a B2B CRM for customer, sales and service management. The redesign aimed to simplify navigation and unify the platform’s brand experience.
Problem
Current navigation
The existing 4-tier navigation was cluttered and made discovery harder for users.
Brand consistency
The platform lacked a unified visual system, making the experience feel fragmented across modules.
Key decision
Replace cluttered navigation with role-based IA and unify the platform with a scalable design system.
Outcomes
0
High-fidelity screens
0
IAMVP
Months to MVP
MVP shipped on schedule · Now live
The shipped MVP — role-based dashboard, HR and recruitment modules in one unified system
02 · Problem Framework
Business Context & Constraints
Background
TASM Solutions
TASM Solutions is an All-In-One B2B CRM & Management system handling Sales, HR, Service Management, and Finance.
Client Need
Overhaul outdated information architecture and unify brand consistency across all touchpoints.
Three Complex Business Lines Integrated Without Foundational IA
Information Clutter & Disorientation
Because the platform forced three highly complex business lines—financial accounting, recruitment management, and internal communication—into a single ecosystem, the legacy product lacked a foundational information architecture (IA). This resulted in a cluttered interface where users could not understand the distinctions between functional modules.
Modules
0
Core Business Areas
0
Information Architecture
Unclear
Real-World Constraints
Strict Timeline
2.5 months (10+ weeks) to design and hand off 100+ screens.
Domain Expertise Gap
No finance domain expert on the team.
No Removal of Features
Enterprise clients rely on all existing modules; features could not be deleted to “simplify” the UI.
03 · Design & Process
Information Architecture & Navigation Rationale
To make a complex all-in-one CRM easier to navigate, I reframed the information architecture around two principles: showing the right modules to the right roles, and prioritizing navigation by frequency and importance.
Key Insights → Design Principles
01Key Insight
Role-Based Module Visibility
Insight
Showing every module to every CRM user creates information overload and leaves users unsure where to begin.
Design Principle
Tailor the information architecture to each employee’s role, so they see the modules relevant to their responsibilities.
02Key Insight
Navigation Priority
Insight
Senior roles may access more modules, and an unstructured list reduces navigation efficiency.
Design Principle
Use a sidebar navigation and place high-frequency, high-priority modules at the top.
Navigation Model & Rationale
Desktop — Collapsible Sidebar
Decision: Replaced the top nav with a collapsible sidebar.
Why: It keeps a large module set easier to scan, gives detail pages more room, and lets users scroll to less-used tools.
Design Once, Adapt by Role
Decision: Designed the full platform first, then tailored module visibility and order by role with engineering.
Why: One shared UI system meant less duplicate work—and a realistic path to high-fi before the deadline.
Website Navigation — collapsible sidebar with role-prioritised modules
04 · Design Process
Core Design Decision
Role → Module Visibility
Module
DirectorAll 13
Operations6
HR / Admin6
Dashboard
Finance
Sales
Leads
Payroll
Reports
Service Management
Orders
Clients
Work
HR
Talent Acquisition
Notice Board
Shared base — available to every role
E-mailsMessagesEventsNotice BoardSettingsQR-code
01
Role-Based Information Architecture
IA Design
Decision
I replaced one 20+ module navigation with a role-based IA that surfaces only the tools each role needs.
Why it matters
Role-based visibility keeps a 20+ module platform easier to scan, while preserving the existing backend and workflows.
Validated through director interviews and competitor benchmarks.
02
Global Navigation & Modular Dashboard UX
Card Design
Decision
I paired the sidebar navigation with modular dashboard cards, giving each role a focused overview while keeping detailed workflows one click away.
Why it matters
This reduced navigation from 3+ clicks to one, while making dense tables, statuses, and charts easier to scan.
Selected examples of cards in dashboard module
05 · Design System
Design System & Agile Handoff Strategy
Built in 1–2 weeks: reusable foundations for a consistent, developer-ready product.
Roboto headings · Open Sans body
H1 · Roboto Light 60
Heading 1
Subtitle · Roboto Bold 18
Section Subtitle
Body · Open Sans Regular 16
Open Sans for readable, data-dense CRM interfaces.
Color palette
Primary Blue
#136B9F
Sky Blue
#37A6E7
Light Blue
#71C9FC
Accent Yellow
#F8DB28
Neutral Dark
#212121
Light BG
#FAFAFA
Success
#22C55E
Error
#FC1B13
Buttons
Primary
Secondary
Inputs
Default
Name
Focused
NameSearch
Error
NameInput text
This field is required
Charts
100%
6 segments
60%
3 segments
75%
4 segments
Lean handoff
Shared Figma library · Dev Mode · Weekly reviews
Outcomes
100+ screens · 2.5 months
Handoff skills
How the design system is delivered, reviewed, and used by developers.
01 · Documentation
Each component includes usage notes, states, and implementation guidance so developers can apply the system correctly.
Example: Button states
DefaultHoverDisabled
02 · Token mapping
Design tokens are mapped to semantic variables so engineering can consume the system without duplicating values.
Example: Primary button
fill: blue400text: whitecorner: 4
03 · Review checklist
A shared checklist helps designers and developers confirm spacing, accessibility, and naming before implementation.
Example: Review items
SpacingTokensNaming
Best practices
1Use semantic tokens for colors, spacing, and typography so implementation stays consistent across features.
2Document component states, edge cases, and responsive behavior before handing off to engineering.
3Run weekly reviews with clear acceptance criteria so design and development stay aligned on implementation.
06 · Outcome
Outcomes & Reflection
01
Designing for Complexity
B2B UX is not about removing complexity. It is about organizing it so people can act quickly and confidently.
02
Working Without Perfect Conditions
When time and domain expertise were limited, tight feedback loops with founders and engineers became the fastest way to validate decisions.
Measurable Outcomes
What was delivered
0
High-Fidelity Screens
0
Business Modules
0
Delivery Period
Live MVP
Deployed
Outcome summary
All high-fidelity views were validated and handed off across 10+ business modules. The product was built and deployed directly from the Figma component system, ensuring a consistent and production-ready experience from design to delivery.
Closing summary
This project was shaped by clarity, speed, and cognitive organization. Under constrained conditions, the reusable system and cross-functional collaboration with founders and engineers enabled a complete handoff and a deployed MVP.
UI/UX Designer with a background in Architecture and an MSc in UX Engineering, specialising in information architecture, complex B2B SaaS workflows and scalable design systems. Experienced across policy, healthcare, e-commerce and B2B CRM products — from user testing and IA to high-fidelity prototyping and developer handoff, working closely with engineers and stakeholders.
Experience
PolicyCONOct 2025 – Feb 2026 · London
UI/UX Designer Internship — project-based
Led the end-to-end responsive redesign of a dual-sided policy exchange platform, turning trust and discoverability pain points into a credibility layer, analyst profiles and a 4-step booking flow.
Mapped subscriber and analyst user flows, including core onboarding journeys, and restructured the information architecture into a dual-role navigation system (desktop sidebar, mobile bottom tab bar).
Validated the IA through unmoderated tree testing on Maze with 13 participants across 6 tasks, reaching an 85.3% success rate and fixing key booking and availability navigation issues.
Ran usability testing with 5 participants across 7 scenarios, achieving a 94.3% user test success rate and refining navigation labels and primary CTAs before engineering handoff.
Partnered with backend engineers to design a contextual inline AI plugin for translation, comparison, grammar and SEO, keeping the reading and writing flow uninterrupted.
Delivered 80+ high-fidelity screens for web and mobile, a component library and edge-case specs (~80% independently).
Redesigned an all-in-one B2B CRM of about 20 modules (sales, HR, finance, service management), replacing cluttered navigation with a role-based IA and a collapsible sidebar ordered by task frequency.
Designed and delivered 100+ high-fidelity web screens in 2.5 months, including modular dashboard cards that reduced access to key tasks from 3+ clicks to one.
Built a foundational design system in the first two weeks (type scale, colour tokens and stateful components), enabling consistent screen assembly and an MVP shipped on schedule and now live.
Aligned design decisions with two directors through interviews and weekly reviews, and streamlined engineering handoff with a shared Figma library and Dev Mode.
Heaven Skin BeautyMar 2025 – Sep 2025 · London
Associate Digital Designer
Managed end-to-end client booking journeys across multiple platforms, using customer feedback and booking analytics to reduce drop-offs and improve repeat visits.
Produced consistent web assets and digital layouts to keep the brand aligned across platforms.
Superfect Trading LtdOct 2024 – Feb 2025 · London
UI/UX Designer Internship — Shopify Platform
Designed and built 10+ responsive e-commerce pages on Shopify using Figma and Adobe XD, turning user insights into high-fidelity prototypes.
Education
Goldsmiths, University of London
MSc User Experience Engineering (Merit) · 2022–2023
Field project — Laerdal Medical e-commerce: restructured the product IA from 4 to 3 top-level categories via tree testing (28 participants) and open card sorting; first-click A/B tests showed visual filter cards reached 80% accuracy vs 40% for a text list; usability testing with 6 participants reached 100% task success and an 85.8 SUS score.
Core modules: Computing the UX, Research Methods, Human Factors, Interaction Science, Designing Information & Services, Digital Sandbox, The UX of AI.
University of Manchester / MMU
BA (Hons) Architecture (2:1) · 2019–2022
Key projects: Stage Design, Factory Building Design, Food Hall Design, Social Housing, Community Centre & Homeless Shelter, Spa Centre.
Loading preview… if it doesn’t appear, use the Download button above.
Detailed research & process
PolicyCON
02 · Problem Framework
Problem
Friction on both sides of the marketplace paralyzed overall engagement. Legacy architecture prioritized visual vanity over functional transactions, creating a complete structural disconnect.
User Cohort
Subscriber
Policymakers & platform readers looking for rigorous, trusted policy research.
01Can't verify analyst credibility
No way to verify analyst academic credentials or professional expertise before engaging.
02No path to consultation
No clear, integrated channel to discover and request analyst consultations.
Lost confidence → Drops off
Subscribers lacked a way to verify analyst credibility and a clear path to request consultations.
Platform Rift
Provider Cohort
Policy Analyst
Academics & researchers struggling to monetize & distribute complex work.
01Can't showcase credentials
No tools to showcase verified credentials or publish professional content effectively.
02No booking management
No integrated system to manage consultation schedules and availability.
Invisible value → No bookings
Analysts lacked tools to showcase their credentials, publish content, and manage booking schedules.
UX Core ObjectiveRebuild the platform’s IA and responsive navigation to seamlessly connect both sides.
03 · Process & Decision
Information Architecture & Navigation Rationale
By analyzing internal workflows, system architecture, and past meeting logs, alongside competitor benchmarks—Substack (content presentation), Maven Expert Network (expert consultation), and Peerwith (service matching)—I realized this project was far more than simply “adding a Feed and a booking feature.” Instead, it required constructing a closed-loop network focused on building trust through content.
Key Insights → Design Principles
Insight 01
Trust before Conversion
Subscribers will not book blindly; they must verify the analyst’s professional expertise first.
Design Principle
Surface credibility signals (publications, credentials, endorsements) at every touchpoint before presenting booking CTAs.
Insight 02
Content as a Gateway
Policy breakdowns are not standalone content, but touchpoints for users to discover an analyst’s capability.
Select analyst, choose time slot & confirm booking
5
Attend Session
Join consultation, receive insights & follow up
Analyst
1
Create Content
Start new review, newsletter or template
2
Write & Edit
Compose content with rich media & formatting
3
Preview & Publish
Review draft, finalize & publish to platform
4
Manage Schedule
Set availability, view upcoming consultation slots
5
Conduct Session
Join meetings, provide analysis & follow up
Navigation Model & Rationale
Desktop Left Sidebar (vs. Top Nav)
Decision: Adopted a collapsible Left Sidebar (referencing modern B2B work tools). Top Nav lacks vertical scalability for future analyst workspace tools and squashes the vertical viewport needed for reading dense policy text. The sidebar protects the reading line of sight and gives a clear space for switching role contexts.
Mobile Bottom Tab Bar
Decision: Streamlined into 5 core touchpoints — Feed, Bookings, Publish, Message, Notification. Tailored for on-the-go scenarios; it prioritizes immediate content discovery and quick schedule checks while removing heavy desktop information display.
Dual-Role Adaptive Structure
Shared structural framework with role-adaptive primary targets. Rationale: keeps a unified mental model for both roles, while dynamically swapping primary navigation actions based on the logged-in context (e.g. Subscribers see “Consultation”, Analysts see “Write / Notification”).
Core Experience Design
Based on the IA framework and task-priority mapping, three core experiences translated the IA into a continuous journey from discovery → trust → consultation.
01 // Feed UI
01
Content Feed Design
Discovery
Decision
Replaced static article lists with an interactive card-based feed directly linked to the Analyst Profile.
Why it matters
Dense official policies have a high reading barrier. Card breakdowns lower the reading load and act as the first touchpoint to discover analyst expertise.
02 // Analyst Profile
02
Analyst Profile — Trust Signal
Trust
Decision
Structured profiles around “Credentials + Historical Deep Dives + Verified Reviews” (referencing Maven / LinkedIn profile patterns).
Why it matters
Serves as the core trust-building hub. Clear proof of authority was essential for building enough trust to progress towards a paid consultation.
03 // Booking Workflow
03
Booking Workflow
Consultation
Decision
Built an embedded 4-step booking workflow — Choose Analyst / Select Date & Time / Confirm & Checkout / Manage Meetings — inspired by familiar marketplace booking patterns.
Why it matters
Reduces the gap between interest and consultation by eliminating disjointed external email communication that leads to drop-offs.
Core User Journey
Subscriber Path
1Discover
Trust gap: can’t verify analyst credibility at a glance
2Assess Trust
Trust gap: no structured trust signals
3Consult
Trust gap: unclear pricing, no guaranteed quality
Analyst Path
1Publish
Trust gap: no visibility into whether content reaches the right audience
2Build Credibility
Trust gap: no system to surface expertise or track reputation
3Consult
Trust gap: unqualified leads, no professional scheduling
Trust | Consultation
AI Write & Reading Plugin
As part of the PolicyCON platform, analysts and subscribers needed a way to process complex policy documents faster. I collaborated closely with backend engineers to design an embedded AI plugin UI.
Pain Point
AI utilities like translation, document comparison, grammar correction, and SEO optimization are extensive. Implementing a traditional persistent side drawer or an all-in-one pop-up window would consume valuable screen space, clutter the layout, and severely break the user’s reading or writing line of sight.
Design Decision
Abandoned heavy, persistent drawers in favour of a Contextual Inline UI (referencing Notion AI floating-toolbar patterns).
Mechanism
Sequence A · Writing Assistance
1Discover
2Grammar Check
3Adjustment
Highlight text → AI icon appears
Color-coded error highlights
One-click tone adjustment
For Analysts (Writing): editing text calls up targeted, contextual suggestions for “Grammar Correction & SEO Optimization” right at the cursor.
Sequence B · Comparison
For Subscribers (Reading): highlighting text dynamically triggers inline “Translate & Compare” bubbles without taking eyes off the document.
1Add to Compare
2Select Articles
Tap “Add To Compare” on article
Click PolicyCON AI, show ‘compare list’
3Choose Criteria
Solution & handoff
Seamlessly integrated complex AI capabilities directly into existing user workflows, delivering an unobtrusive “use-and-go” experience that added minimal navigation overhead or visual clutter to the new pages.
Finalized complete high-fidelity interactive prototypes alongside detailed edge-case specs, enabling a smooth, unambiguous handoff to the backend engineering team.
4Compare Report
Side-by-side AI analysis
04 · Testing & Validation
Evidence & Validation
Phase 1: Tree Testing (IA Hierarchy & Labeling)
Participants & Scope: conducted unmoderated tree testing via Maze with 13 proxy participants (internal stakeholders and policy-focused graduate students) across 6 core tasks to evaluate menu navigation without visual bias.
85.3%
Avg success rate
13
Participants
6
Tasks
21
Responses
Key metricsAchieved an 85.3% overall average navigation success rate, while identifying two key structural frictions around consultation booking and analyst availability.
Task Performance
Task
Success
Notes
1 As a subscriber, find a policy review written by an analyst you followed.
100%
All participants navigated correctly
2 Where would you go to book a one-to-one consultation with your following Analyst?
50%
Path to booking consultation unclear
3 Where can you leave a comment for the publications when you are exploring?
90%
Some took complicated navigation
4 You have an issue with the platform. Where can you report it?
100%
All participants navigated correctly
5 As an analyst, where would you write and publish a new policy review?
80%
Some tried via Feed instead of dashboard
6 As an analyst, where do you set your consultation availability?
92%
One expected it under My Settings
Key Frictions & Iterations
Friction
Subscriber Booking
Only 50% of participants navigated directly to book a consultation on their first try, confusing “My Meeting” with “Book Consultation”.
Iteration
Renamed “My Meeting” to “My Bookings” to clearly separate ongoing / past appointments from the discovery path.
Friction
Analyst Availability
Participants struggled to locate schedule settings because “My Availability” was placed under general settings.
Iteration
Moved Availability directly into the Analyst Consultation workspace for intuitive access.
Before Tree Testing
Information Architecture v1
After Tree Testing
Information Architecture v2
Restructured consultation flow — consolidated booking, history, and availability into a unified “Consultation and Booking” module.
Reorganized Subscriber Dashboard — added Subscription Plans and Consultation and Booking as primary navigation items.
3/5 participants affectedDiscovery vs. Management Label Ambiguity
Problem
Participants repeatedly clicked “My Consultation” when attempting to discover new analysts, confused by the vague “Popular” tab label. The overlap between discovery and management navigation caused repeated misdirection.
“I keep clicking My Consultation instead of Consultation… it would be helpful if that was Explore Consultation rather than Popular.”
→ Iteration
Renamed “Popular” to “Find an Analyst” for discovery intent, and “My Consultation” to “My Bookings” for management — eliminating the functional overlap between navigation labels.
›
Initial Design
Iterated Design
›
Initial Design
Iterated Design
2/5 participants affectedWeak Conversion CTA on Analyst Profile
Problem
Participants completely missed the primary “Book Consultation” action on the Analyst Profile page, perceiving it as a non-clickable decorative element rather than an interactive button.
“I didn’t even notice that was a button.”
→ Iteration
Redesigned primary CTAs with bold brand-colour contrast, explicit container borders, and high-priority placement to protect the conversion path and ensure immediate visual recognition.
05 · Responsive System & Consistency
Pain Point & Legacy Friction
Visual Inconsistency: typography lacked clear hierarchy, UI details like button radii were mismatched across screens, and the primary red deviated from the core brand colour.
Mobile Navigation Bottleneck: the legacy mobile menu triggered a full-screen bottom sheet from a top-left hamburger button, blocking most of the screen and proving difficult to dismiss.
Design Decision
Visual Strategy & Trade-offs
Evaluated a multi-coloured theme to distinguish user roles, but abandoned it as it created visual clutter. Instead, standardized on PolicyCON’s official brand red and created a unified typography scale and component tokens (e.g. fixed button radii) to ensure professional authority and reading clarity.
Color System
Red
Light
#FBE9EA
Primary
#D2232A
Dark
#9E1A20
Darker
#4A0C0F
Grey & White
Light
#ECECEC
Normal
#414042
Dark
#313032
Darker
#171617
White
#FFFFFF
Component States
Interactive components across key states.
Button
DefaultSubmit
HoverSubmit
ActiveSubmit
DisabledSubmit
Toggle
Off
On
Focus
Disabled
Checkbox
UncheckedLabel
CheckedLabel
IndeterminateLabel
DisabledLabel
Result & Outcome
Result: standardized typography and variants allowed identical interaction patterns to scale seamlessly across roles and screen sizes.
Outcome: reduced navigation friction and improved handoff clarity.
06 · Outcome & Reflection
Key Outcomes
01 / System
End-to-End System Handoff
Successfully delivered comprehensive high-fidelity interactive prototypes across Web (1440×1024) and Mobile (393×852), a scalable UI component library, and documented edge-case specifications for seamless backend engineering integration.
02 / Architecture
From Concept to Execution
Transformed PolicyCON from a static, feature-incomplete draft into a fully articulated, end-to-end dual-sided platform architecture connecting policy subscribers with expert analysts.
Experience Dimension
Legacy Platform (Before)
Redesigned Ecosystem (After)
Core Service Availability
Essential revenue-generating features (Consultation, Messaging) blocked by “Coming Soon” placeholders.
Fully integrated 4-step booking pipeline and structured workspace directly connecting clients to consultations.
Trust & Credentials
Basic analyst listings with zero verification metrics or credential proof, offering no reason for paid engagement.
Structured Analyst Profiles highlighting verified academic background, publications, and client reviews as trust anchors.
Information Architecture
Flat, isolated menu with unpopulated content areas (“No Policy Reviews To Show”) and broken user paths.
AfterContextual Inline AI for translation, comparison & SEO / formatting
Reflection
IA as Conversion Architecture
Information architecture isn’t just about organising content — it’s designed to convert passive readers into engaged consultation clients.
Early Taxonomy Validation
Testing menu hierarchies early with proxy participants proved that refining ambiguous labels is the highest-leverage way to eliminate user drop-off before writing a single line of code.
Engineering Efficiency
The standardized design system and clear component tokens let developers scale interaction patterns across user roles and screen sizes, reducing front-end handoff friction and revision cycles.
Detailed research & process
Laerdal Medical
02 · Problem Framework
Business Context & Core Problem
Business opportunity: Laerdal produces high-complexity, high-value medical training simulators (e.g., Resusci Anne, SimMan). Traditionally, sales relied heavily on phone inquiries and manual quotes. As buying behaviour shifts toward digital channels, Laerdal needed an e-commerce platform that empowers medical instructors and procurement officers to independently browse, compare, and purchase complex equipment.
The Core Problem
User feedback and initial audits revealed that the existing web structure caused severe purchasing friction:
01
Navigational Challenges
Complex product taxonomy made locating specific simulators time-consuming.
02
Decision Paralysis
Absence of side-by-side product comparisons and cross-selling / bundle recommendations for related accessories.
03
Checkout & After-Sales Void
Cumbersome payment flows and a lack of post-purchase capabilities (parcel tracking, user-manual access).
User Journey Map
Summarised with the UX department, based on Laerdal.com.
Goal
Buy ‘Resusci Anne QCPR’ Train students Browse home page
Search specific categories Compare Resusci series
Decide the product to buy Find related products
Checkout products Fill info & register Billing address
Pay for the product Check delivery date
Complete payment Find after-sales service Check parcel
Thinking
Hope to find products quickly Many products on the website
Finding matching product takes time Too many categories
Need to read all overview Expensive — think carefully
Excited to checkout Adding to cart is fast
Costs a lot Page loads slowly Refill info if checkout fails
Can’t track parcel Worried about expensive products
Pain Points
Complicated information architecture
Hard to find products Cannot compare Too much info on pages
Not easy to decide between similar products
—
Limited payment options Cannot save personal info
No function for parcel tracking
Solutions & Hypotheses
From Pain Points to Action
Based on the pain points identified in the user journey map, I formulated targeted solutions and hypotheses to guide the next phase of validation.
01
Pain Point
Unclear Product Architecture & Categorization
The existing product taxonomy used a deep 4-tier nesting structure with ambiguous skill-based terms, making it difficult for users to locate specific products.
Hypothesis & Solution
Validate and restructure the product architecture and classification system through tree testing, aligning categories with clinical mental models.
→ Tree testing on existing IA
02
Pain Point
Confusing Product Variants & Details
Product sub-models and specifications were unclear — users struggled to distinguish between similar product lines and couldn’t easily compare features.
Hypothesis & Solution
Introduce new modules for product detail pages: side-by-side comparisons, accessory recommendations, and clearer specification breakdowns.
→ A/B test new product detail modules
03
Pain Point
Missing Parcel Tracking
Users reported that they couldn’t track their parcels on the website after completing a purchase, creating anxiety and frustration in the post-purchase experience.
Hypothesis & Solution
Add delivery-tracking functionality to the post-purchase flow, giving users real-time visibility into their order status.
→ Design delivery tracking feature
With these hypotheses defined, the next step was to plan tree testing on the existing information architecture to validate the restructured product categorization.
Uncovering IA Flaws via Tree Testing
Tree-testing baseline: to evaluate the original information architecture (IA), I ran tree testing with 28 medical-field participants across 4 typical purchasing tasks.
Tree Test
28Medical Field Participants
Participants were asked to locate specific medical simulation products within the existing Laerdal.com product taxonomy. The test evaluated the current information architecture across 4 product-finding tasks.
Overall Success Rate0Average across 4 tasks · 28 participants
Original Laerdal.com Product Taxonomy
Simulation & Training ›
Resuscitation Training
Emergency Care & Trauma
Nursing & Patient Care
Obstetrics & Paediatrics
Manage, Assess, Debrief
Virtual Simulation
Skills Proficiency ›
Airway Management Trainers
Respiratory Care Solutions
Defibrillation & Cardiology
Neonatal Skill Trainers
Venous & Arterial Access
Ultrasound
Courses & Learning ›
Educational Services
Technical Services
vSim for Nursing
Medical Devices ›
Airway Management
Immobilisation
Defibrillator Parts & Accessories
Perinatal and Neonatal
CPR Feedback Devices
71.5%
Task 1
Premature Baby Simulator
78%
Task 2
Crash Kelly
39%
Task 3
Multi-Venous IV Training Arms
73%
Task 4
Nursing Anne Simulator Geriatric
Stakeholder Analysis
Two clinical simulation experts reviewed the tree-test results and identified critical data-validity issues.
Data Validity
Results Skewed Unfavorably
Some participants underutilised their simulation-domain knowledge during testing, inadvertently making results appear less favourable than actual navigation ability.
Dr. Tian’s Review
Actual Success ~10% Higher
“Medical devices” selections in Tasks 1 & 2 were flagged as invalid data. In Task 4, search-bar and homepage users were marked “wrong” by Optimal Workshop — understating success by up to 10%.
Key Finding
“Skills Proficiency” = Top Confusion
The “Skills Proficiency” category caused the most navigation errors across all tasks. This became the primary focus for the subsequent card-sorting redesign phase.
Participant Feedback
“Some of the products are too nested in the website.”
“Not sure about the last one. Others were straightforward.”
“Would prefer more straightforward selections to make it easier for users.”
“It’s not difficult, but for something like the multi-venous training arm I wasn’t confident with my selection — it could be either in ‘training’ or ‘skill’.”
03 · Process & Design
Restructuring Information Architecture
Open Card Sorting
To eliminate terminology confusion, I facilitated a 3-hour open card-sorting session with medical professors and Laerdal domain staff.
Design Decision
Discarded abstract skill-based classifications in favour of intuitive, equipment-type groupings.
Competitor benchmarking: analysed e-commerce patterns from Amazon (meticulous categorization), LG (rich specification setup), and Smeg (clean visual hierarchy) to balance content density with readability.
The session restructured the product taxonomy into three clear top-level categories:
Product
Simulation & Training
7 subcategories
Resuscitation Training
Emergency Care & Trauma
Nursing & Patient Care
Obstetrics & Paediatrics
Comprehensive Simulation Training
Manage, Assess, Debrief
Virtual Simulation
Basic Models
4 subcategories
Defibrillation & Cardiology
Newborn Baby
Venous & Arterial Access
Ultrasound
Medical Devices
5 subcategories
Airway Management
Immobilisation
Defibrillator Parts & Accessories
Perinatal & Neonatal
CPR Feedback Device
Key Improvements
4 → 3 Categories
Reduced cognitive load by consolidating from 4 to 3 top-level categories, eliminating ambiguous groupings.
“Skills Proficiency” Eliminated
The most confusing category (caused most errors in tree testing) was removed. Items redistributed to clearer homes.
“Courses & Learning” Separated
Service-oriented content removed from the product taxonomy, reducing noise for product-focused shoppers.
New “Basic Models” Category
Created a clear home for simpler training equipment that doesn’t fit full simulation systems or medical devices.
Card Sorting Session Result — part of screenshot
Design Decisions & A/B First-Click Testing
A/B Testing · Decision Point 1
Homepage Product Discovery Filter
Hypothesis
Presenting primary visual category cards directly on the homepage (Design A) will yield higher search accuracy than displaying dense text-based submenus or isolated product recommendations (Design B).
Method
First-click analysis with 10 participants. Task: find Mini Anne CPR & AEDs on the homepage. Both groups faced the same scenario with different filter designs.
Design A80% Success90% Preferred
Filter Design
First-Click Heatmap
Design B40% Success
Filter Design
First-Click Heatmap
Design Decision — Why
Heatmaps revealed Design B caused high misclicks on irrelevant middle categories (“Basic model”). Design A significantly reduced cognitive load through visual anchors and structured spacing — delivering 2× the success rate and 90% user preference. This confirmed our hypothesis that visual category cards provide clearer navigation affordances than dense text-based submenus for medical product discovery.
A/B Testing · Decision Point 2
Category Detail Page Navigation Layout
Hypothesis
A top-to-bottom tabbed sub-category browsing layout (Design B) aligns better with responsive reading habits than traditional e-commerce sidebar filters (Design A), enabling faster product discovery within deep category hierarchies.
Method
First-click analysis with 10 participants. Task: find the high-end Simulator Sim 3G PLUS. Same scenario, two different category-page navigation designs.
Design A43% Success
Navigation Design
First-Click Heatmap
Design B57% Success70% Preferred
Navigation Design
First-Click Heatmap
Initial Design›Iterated Design
57% success — room to improveRefining Design B into a Clear Navigation Path
Problem
Design B won the test (57% success, 70% preference), but the moderate success rate revealed real friction. Heatmap analysis showed the sub-menu title “Simulation and training” read as product-level content rather than a category label — participants misread the hierarchy and misclicked into the wrong level.
→ Iteration
Adopted Design B as the base layout, then refined its border visual hierarchy and relabelled the menu to resolve the ambiguity — cutting misclicks and producing a clearer navigation path for the final prototype.
All Low-Fidelity Prototype
After the A/B-testing decisions, all validated layouts were assembled into a complete low-fidelity prototype following Laerdal’s design system. It covers the full e-commerce user journey — from product discovery through checkout and post-purchase services.
Product Discovery
Shopping & Checkout
Customer Service
Navigation Hover States
04 · Evaluation
Low-Fidelity Usability Testing
Evaluated the end-to-end interactive low-fidelity prototype with 6 participants — 2 medical doctors (A & B) and 4 general public / community buyers (C–F). Four scenario-based tasks covered the full e-commerce journey. Video-recorded with consent.
Participants
Participant AMedical Doctor
Participant BMedical Doctor
Participant CGeneral Public
Participant DGeneral Public
Participant EGeneral Public
Participant FGeneral Public
Scenario Task Performance
Task 1Browse & Explore
100%10s avg.
Browse the homepage, select ‘Resuscitation Training’ under the ‘Simulation Training’ category, and explore product details.
Participant Reflections
E
Browsed longer than others — explored multiple categories before target
All
Seamlessly located ‘Resuscitation Training’ without hesitation
Task 2Inspect Spec & Checkout
100%1m 25s avg.
Explore products in ‘Resuscitation Training’, examine specs, accessories, descriptions. Add to cart and proceed through checkout to payment.
Spent long time on navigation bar — unclear category boundaries
A
Looked for responsive cart design — expected mobile-like behavior
Task 3Post-sale Tracking & Downloads
100%1m 17s avg.
Return to homepage, track parcel, and download relevant guidelines or software associated with the purchased product.
Participant Reflections
E
Used ‘Main Site’ link to return home — not the intended path
C
Also used ‘Main Site’ — homepage return path unclear
B
Long time on navigation bar — service pages less discoverable
Task 4Returns & Warranty Info
100%5s avg.
On the homepage, access information related to returns or product coverage.
Participant Reflections
A
Looked for ‘After Sale’ in Account — expected under user profile
All
Return policy found instantly once directed to correct section
System Usability Scale
A 97.5B 97.5C 75D 75E 75F 92.5
Average 85.8 / 100
Key Iteration Insights
Navigation Clarity
Multiple participants used ‘Main Site’ link instead of intended back-to-home path. Iteration: add clearer homepage return affordance and breadcrumb navigation.
Service Discoverability
‘After Sale’ expected under Account. Iteration: surface post-purchase services (tracking, returns, downloads) prominently in main navigation.
Three critical touchpoints in the Laerdal e-commerce journey — each designed to solve a specific user pain point identified during research.
01Discover · Locate Products
Intuitive Product Discovery
Users struggled to navigate the original deep 4-tier product taxonomy. The redesigned homepage features visual category entry points with A/B validated filter cards, enabling users to locate products through an intuitive 3-pillar classification aligned with clinical mental models.
Filter tags (All, Resuscitation training, Emergency care, etc.) let medical professionals narrow results by their actual workflow rather than abstract product hierarchies.
80% First-Click Accuracy
02Understand · Compare Products
Structured Product Detail Page
Similar product variants (e.g. Resusci Anne QCPR vs. Baby QCPR) were nearly impossible to distinguish on the old site. The redesigned PDP organizes complex technical specifications into digestible tabs — Overview, Specification, and Download & Guide.
A new “Parts and Accessories” module enables bundled purchasing, while the Specification tab provides a clear feature comparison matrix so medical professionals can confidently select the right simulator for their training needs.
100% Task Success Rate on Product Comparison
03Track · Post-Purchase Care
Comprehensive Self-Service Portal
The original site had no parcel tracking functionality — users had to call customer service for order updates on their expensive medical equipment. The redesigned portal integrates order tracking (Shipping & Tracking) and return-request workflows directly into the user account.
Users can enter their order number to view real-time delivery status with a clear timeline: order confirmed → dispatched → carrier picked up → out for delivery → arriving date. This self-service approach significantly reduces post-purchase anxiety.
5s Avg. Task Completion for Order Tracking
06 · Key Design Takeaways
Key Outcomes
01
Bridging Clinical Knowledge & UX Architecture
In specialized domains, generic e-commerce templates fail. UX decisions must align with how medical experts actually categorize equipment in real-world clinical scenarios.
02
Triangulating Quantitative Data with User Intent
Usability analytics tools provide raw numbers, but qualitative discussions with domain experts (like Dr. Tian) are essential to uncover the true user intent behind “wrong paths”.
Design Impact
Measurable Outcomes
0
Task Success Rate
0
First-Click Accuracy
0
Avg. Task Completion
0
SUS Score
Dimension
Legacy Laerdal Site
Redesigned Experience
Information Architecture
Deep 4-tier nesting; ambiguous skill-based terms (61% error rate on complex tasks)
Three Complex Business Lines Integrated Without Foundational IA
Information Clutter & Disorientation
Because the platform forced three highly complex business lines—financial accounting, recruitment management, and internal communication—into a single ecosystem, the legacy product lacked a foundational information architecture (IA). This resulted in a cluttered interface where users could not understand the distinctions between functional modules.
Modules
0
Core Business Areas
0
Information Architecture
Unclear
Real-World Constraints
Strict Timeline
2.5 months (10+ weeks) to design and hand off 100+ screens.
Domain Expertise Gap
No finance domain expert on the team.
No Removal of Features
Enterprise clients rely on all existing modules; features could not be deleted to “simplify” the UI.
03 · Design & Process
Information Architecture & Navigation Rationale
To make a complex all-in-one CRM easier to navigate, I reframed the information architecture around two principles: showing the right modules to the right roles, and prioritizing navigation by frequency and importance.
Key Insights → Design Principles
01Key Insight
Role-Based Module Visibility
Insight
Showing every module to every CRM user creates information overload and leaves users unsure where to begin.
Design Principle
Tailor the information architecture to each employee’s role, so they see the modules relevant to their responsibilities.
02Key Insight
Navigation Priority
Insight
Senior roles may access more modules, and an unstructured list reduces navigation efficiency.
Design Principle
Use a sidebar navigation and place high-frequency, high-priority modules at the top.
Navigation Model & Rationale
Desktop — Collapsible Sidebar
Decision: Replaced the top nav with a collapsible sidebar.
Why: It keeps a large module set easier to scan, gives detail pages more room, and lets users scroll to less-used tools.
Design Once, Adapt by Role
Decision: Designed the full platform first, then tailored module visibility and order by role with engineering.
Why: One shared UI system meant less duplicate work—and a realistic path to high-fi before the deadline.
Website Navigation — collapsible sidebar with role-prioritised modules
04 · Design Process
Core Design Decision
Role → Module Visibility
Module
DirectorAll 13
Operations6
HR / Admin6
Dashboard
Finance
Sales
Leads
Payroll
Reports
Service Management
Orders
Clients
Work
HR
Talent Acquisition
Notice Board
Shared base — available to every role
E-mailsMessagesEventsNotice BoardSettingsQR-code
01
Role-Based Information Architecture
IA Design
Decision
I replaced one 20+ module navigation with a role-based IA that surfaces only the tools each role needs.
Why it matters
Role-based visibility keeps a 20+ module platform easier to scan, while preserving the existing backend and workflows.
Validated through director interviews and competitor benchmarks.
02
Global Navigation & Modular Dashboard UX
Card Design
Decision
I paired the sidebar navigation with modular dashboard cards, giving each role a focused overview while keeping detailed workflows one click away.
Why it matters
This reduced navigation from 3+ clicks to one, while making dense tables, statuses, and charts easier to scan.
Selected examples of cards in dashboard module
05 · Design System
Design System & Agile Handoff Strategy
I built a design system for the first 1–2 week. The goal was not to document every token, but to create a reusable foundation that engineers could implement with confidence — enabling consistent brand expression and agile, developer-ready handoffs.
Brand consistency first
Every system choice serves the brand: Roboto for headings, Open Sans for body copy, and a TASM blue and yellow palette that feels trustworthy yet directional.
Type Scale
HeadingH1 · Roboto Light 60
Heading 1
Used for: page title
SubtitleRoboto Bold 18
Section Subtitle
Used for: section heading
BodyOpen Sans Regular 16
Open Sans body copy for dense tables, dashboards, and product details.
Used for: dense table/form body
LabelOpen Sans 10
LABEL TEXT / METADATA
Used for: metadata/labels
ButtonOpen Sans SemiBold 14
ACTION LABEL
Used for: primary actions
Why Open Sans for a CRM platform?
CRM platforms demand legibility under pressure — dense tables, multi-step forms, long operational sessions. Open Sans was chosen because it maintains clarity at small sizes (10–14px), avoids visual fatigue in data-heavy contexts, and creates a consistent reading rhythm across headers, labels, and body copy alike.
Remains readable at 10px overline and table cell sizes
Paired with Roboto headings for a clear visual hierarchy
Neutral weight range supports alerts, metadata, and primary actions without competing
100+ screens · 2.5 months · zero font drift
One typeface decision. Enforced system-wide via components.
Color palette8 purposeful tokens — not a full token doc
Primary Blue
#136B9F
Sky Blue
#37A6E7
Light Blue
#71C9FC
Accent Yellow
#F8DB28
Neutral Dark
#212121
Light BG
#FAFAFA
Success
#22C55E
Error
#FC1B13
Reusable components
I focused on the components that would be reused most: buttons, inputs, charts, and text actions. Each variant was built once, then assembled into dozens of screens without rebuilding the same patterns.
Buttons
All interactive states built as components — ready for any screen.
Primary
Secondary
Inputs
Key interaction states for forms, search, and data entry.
Default
Name
Helper text
Focused
Search
Helper text5/20
Error
Input text
This field is required5/20
Charts
Donut chart variations for dashboards and KPI summaries.
6 segments
3 segments
4 segments
Upfront system work → Faster UI assembly → Lean handoff
The upfront investment paid off quickly. Once foundations and variants were locked, the team assembled new screens without rebuilding the same patterns. 100+ screens. One consistent system.
01
Foundations
Type scale, color palette, spacing units, and core component tokens were defined first — before any screen was drawn.
02
Variants
Each component was built with all the states needed for 100+ screens: default, hover, active, disabled, and error.
03
Assembly
Screens were composed from the library — no redesign, no drift. Engineers could inspect a single source of truth and ship confidently.
Lean handoff
A shared Figma library, Dev Mode, and weekly reviews kept design and engineering aligned — without a heavy specification document.
Outcomes
In 2.5 months, I delivered 100+ screens through a shared component library and Dev Mode, reducing repeated design work while keeping founders and engineers aligned through weekly reviews.
06 · Outcome
Outcomes & Reflection
01
Designing for Complexity
B2B UX is not about removing complexity. It is about organizing it so people can act quickly and confidently.
02
Working Without Perfect Conditions
When time and domain expertise were limited, tight feedback loops with founders and engineers became the fastest way to validate decisions.
Measurable Outcomes
What was delivered
0
High-Fidelity Screens
0
Business Modules
0
Delivery Period
Live MVP
Deployed
Outcome summary
All high-fidelity views were validated and handed off across 10+ business modules. The product was built and deployed directly from the Figma component system, ensuring a consistent and production-ready experience from design to delivery.
Closing summary
This project was shaped by clarity, speed, and cognitive organization. Under constrained conditions, the reusable system and cross-functional collaboration with founders and engineers enabled a complete handoff and a deployed MVP.
Selected High-Fidelity UI
A selected set from the 100+ high-fidelity screens delivered across the TASM platform.
Initial
Iterated
BeforeAfter
