I turn messy, complex problems into clear, usable interfaces — with a background in architecture that taught me to design structure before surface. Healthcare, e-commerce & B2B SaaS.
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
Bridging Policy Analysts & Subscribers Through Trust-Driven Design
Led IA & responsive system redesign for PolicyCON's dual-sided platform, driving a 94.3% task-completion rate in usability testing (5 participants · 7 tasks) and 85.3% tree-testing success (13 participants).
ROLEUX/UI Designer
DURATION4 Months
TOOLSFigma, Adobe XD
TEAMCross-functional
PLATFORMSWeb & Mobile Responsive
01 · Introduction
Overview
PolicyCON is a dual-sided platform connecting policy subscribers with expert analysts for policy insights and consultations.
The legacy platform had a simplified information architecture, lacking structural trust-building mechanisms and seamless service workflows.
Who was affected:
Subscribers struggled to digest complex policy documents and lacked a clear path to verify analysts' credibility or request consultations.
Analysts lacked dedicated space to highlight their credentials, publish content efficiently, and manage bookings.
As the UX designer, I led the end-to-end redesign of the platform's information architecture, responsive dual-navigation system, and contextual AI workflows across Web and Mobile.
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.
Next project
Laerdal E-Commerce Experience Design
Transforming B2B/B2C healthcare simulation sales into an intuitive, self-service digital platform.
Led end-to-end UX design for Laerdal’s e-commerce platform — restructuring the IA and A/B-validating visual filter cards to reach 100% task success and an 85.8 average SUS (6 participants), and to lift product-search first-click accuracy to 80% (from 40%).
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
01 · Hero Snapshot
Impact Metrics
0
Task Success Rate
Full-journey usability testing with 6 participants (4 tasks).
0
SUS Score
System Usability Scale, averaged across 6 participants.
0
First-Click Accuracy
Winning homepage filter (Design A) vs 40% for the text-list version; first-click test, n=10.
Overview
Laerdal Medical is a global leader in healthcare simulation, training doctors, nurses, and specialists worldwide. Laerdal sought to add full shop functionality to their website — my design served as one of the proposed solutions, with the primary goal of delivering a seamless purchasing experience. The current site only featured a first-generation buying flow with basic product display, relying heavily on phone inquiries for complex orders.
Responsibility
As the lead UX/UI designer, I owned the full redesign — from IA restructuring through high-fidelity prototyping — collaborating with Laerdal’s global product managers and clinical expert Dr. Tian.
Restructured the IA from 4-tier nesting to a streamlined 3-pillar clinical model.
Built a full self-service e-commerce flow with spec comparisons and bundle purchasing.
Conducted usability testing with 6 participants — 100% task success and an 85.8 average SUS score.
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)
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
01 · Hero Snapshot
Impact Metrics
0
High-fidelity Screens
Designed across the entire B2B platform.
0
Months to MVP
From IA restructure to shipped product.
Role-Based
IA Architecture
Replaced cluttered 4-tier navigation.
Overview
TASMsolutions is an advanced Customer Relationship Management system designed to help businesses manage customers, sales, and services more effectively. Based on the requirements of two directors, they wished to upgrade the existing information architecture and enhance the platform’s brand consistency — creating a unified, role-based experience across the entire product.
Responsibility
As the Lead UI/UX Designer, I owned the end-to-end platform redesign — from restructuring the information architecture into a role-based model, through to delivering 100+ high-fidelity screens and a comprehensive design system within a 2.5-month MVP timeline.
Restructured the entire IA from a cluttered layout into a Role-Based Information Architecture.
Designed and delivered 100+ high-fidelity web screens covering all core business modules.
Built a scalable design system ensuring brand consistency across the platform.
Collaborated directly with two directors to align design decisions with business priorities.
Successfully shipped MVP on schedule — product is 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
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.
UI/UX Designer with a background in Architecture and UX Engineering, experienced in designing user flows, wireframes, high-fidelity interfaces and responsive digital platforms across healthcare, e-commerce and B2B/SaaS projects. Strong visual foundation, comfortable working with developers and stakeholders, and focused on creating clear, usable and well-structured digital experiences.
Experience
PolicyCONOct 2025 – Feb 2026 · London
UI/UX Designer Internship — project-based
Led and defined the end-to-end responsive redesign of a dual-sided policy exchange platform, translating user pain points around platform trust and discoverability into clear feature opportunities — including a dedicated credibility layer and a consultant-booking system.
Mapped comprehensive user flows for subscriber and analyst personas to streamline multi-user navigation pathways and core onboarding journeys.
Validated the initial Information Architecture through structured tree-testing with 13 participants, achieving an 85.3% baseline success rate.
Facilitated role-based usability testing across 7 core tasks with 5 cross-functional stakeholders, driving a 94.3% task-completion rate and identifying critical UI confusion points before engineering handoff.
Collaborated closely with backend engineers to parse complex technical logic, designing an embedded AI-assisted writing and reading plugin to optimise content workflows for both analysts and subscribers.
FTS ServicesOct 2025 – Jan 2026 · London
UI/UX Designer Internship — part-time
Client project delivered during internship: TASM Solutions SaaS MVP
Designed and iterated 100+ high-fidelity UI screens in Figma for TASM Solutions, leveraging domain research of specialised accounting platforms to restructure the Information Architecture and simplify dense feature modules.
Established a foundational design system and visual guidelines from scratch within a tight 2.5-month timeline, translating a refreshed brand identity into scalable UI components, typography, and cohesive colour tokens.
Streamlined developer handoff with comprehensive UI specifications and documentation, collaborating with engineering to ensure a smooth, pixel-perfect implementation.
Heaven Skin BeautyFeb 2025 – Sep 2025 · London
Associate Digital Designer
Managed end-to-end client booking journeys across multiple platforms, reducing drop-offs and improving repeat-visit rates and satisfaction by responding to customer feedback and booking analytics.
Delivered consistent web assets and digital layouts to maintain cross-platform brand alignment.
Superfect Trading LtdOct 2024 – Feb 2025 · London
UI/UX Designer Internship — Shopify Platform
Designed and developed 10+ responsive e-commerce webpages on Shopify using Figma and Adobe XD, transforming user insights into intuitive high-fidelity prototypes.
Education
Goldsmiths, University of London
MSc User Experience Engineering (Merit) · 2022–2023
Core modules: Computing the UX, Research Methods, Human Factors, Interaction Science, Applied Topics, Designing Information & Services, Digital Sandbox, The UX of AI.
University of Manchester / MMU
BA (Hons) Architecture (2:1) · 2019–2022
Core modules: Stage Design, Factory Building Design, Food Hall Design, Social Housing & Community Centre, Shelter for the Homeless, Spa Centre.
›
›
