Scalable UI:
Enterprise Design System
Scalable UI:
Enterprise Design System
Scalable UI:
Enterprise Design System
Structuring a modular component library to support a rapidly expanding enterprise portal.
Structuring a modular component library to support a rapidly expanding enterprise portal.
Below: Walkthrough of the Hotel Booking App prototype created in Figma
Below: Walkthrough of the Hotel Booking
App prototype created in Figma
project overview
Role: Product Designer
Company: UX Design Institute
Timeline: 4 months
Tools Used:
core focus
Data-Driven Experience Design
End-to-End System Architecture
Conversion Optimization
Conversion Optimization
Developer-Ready Interface Design
the challenge
the challenge
the challenge
There is definitely no lack of mobile booking applications, yet users consistently experience high cognitive load and friction when navigating date selection, room filtering and trying to find pricing on smaller screens.
There is definitely no lack of mobile booking applications, yet users consistently experience high cognitive load and friction when navigating date selection, room filtering and trying to find pricing on smaller screens.
The objective was to design a modern hotel application from the ground up, while untangling this complex user flow into a seamless interface that prioritizes user trust and significantly reduces abandonment before checkout.
The objective was to design a modern hotel application from the ground up, while untangling this complex user flow into a seamless interface that prioritizes user trust and significantly reduces abandonment before checkout.
Sample of a usability test conducted to define pain points in local hotel booking apps
the research
the research
the research
To pinpoint exactly where the booking experience breaks down, I carried out some essential user research and analysis techniques.
To pinpoint exactly where the booking experience breaks down, I carried out some essential user research and analysis techniques.
1:1 Usability Testing:
Created and moderated task-based interviews to observe real-time navigation pain points and identify exactly where cognitive load peaks during the booking process.
1:1 Usability Testing:
Created and moderated task-based interviews to observe real-time navigation pain points and identify exactly where cognitive load peaks during the booking process.
Affinity Mapping:
Mapped qualitative feedback from tests into themed clusters that highlighted the most critical flaws and trust-breaking UI patterns.
Affinity Mapping:
Mapped qualitative feedback from tests into themed clusters that highlighted the most critical flaws and trust-breaking UI patterns.
Customer Journey Mapping:
Visualized the entire booking lifecycle to expose emotional lows and highlight strategic opportunities for optimizing conversion
Customer Journey Mapping:
Visualized the entire booking lifecycle to expose emotional lows and highlight strategic opportunities for optimizing conversion
Affinity Map: Clustering qualitative data from 4 usability tests
to isolate pain points and create actionable items.
Affinity Map: Clustering qualitative data from 4 usability tests to isolate pain points and create actionable items.
Customer Journey Map: Visualizing the emotional path users
went through, anchored by direct user verbatims.
Customer Journey Map: Visualizing the emotional path users went through, anchored by direct user verbatims.
the architecture
the architecture
With pain points identified, the next step was to create a logical, error-resistant user flow. By mapping out more than just "the happy path", the architecture accounts for edge cases and empty states, ensuring users always have a clear recovery path.
With pain points identified, the next step was to create a logical, error-resistant user flow. By mapping out more than just "the happy path", the architecture accounts for edge cases and empty states, ensuring users always have a clear recovery path.
This mapping also provided an opportunity to rethink the filtering & sorting mechanics, and define what functionalities to include. To maintain clarity in the extensive diagram, I developed a color-coded system that tracks the user's exact stage in the booking journey.
This mapping also provided an opportunity to rethink the filtering & sorting mechanics, and define what functionalities to include. To maintain clarity in the extensive diagram, I developed a color-coded system that tracks the user's exact stage in the booking journey.
Flow Diagram: Establishing the interaction states, feedback loops
and navigation routes from initial search to final checkout
Flow Diagram: Establishing the interaction states, feedback loops and navigation routes from initial search to final checkout
the visual execution:
hand sketches & prototypes
the visual execution:
hand sketches & prototypes
the visual execution:
hand sketches & prototypes
The interface was initially designed through heavily annotated hand sketches, using real copy instead of placeholders to get a better idea of information hierarchy and complex interactions early on.
The interface was initially designed through heavily annotated hand sketches, using real copy instead of placeholders to get a better idea of information hierarchy and complex interactions early on.
For the high fidelity phase, I developed an interactive prototype optimized for usability testing. The final UI features intuitive date selection, robust filtering and sorting, and a seamless map view, directly addressing the friction points discovered during research.
For the high fidelity phase, I developed an interactive prototype optimized for usability testing. The final UI features intuitive date selection, robust filtering and sorting, and a seamless map view, directly addressing the friction points discovered during research.
From sketch to high-fidelity prototype: Side-by-side comparisons
showcasing the visual layout evolution of key booking flows.
From sketch to high-fidelity prototype: Side-by-side comparisons showcasing the visual layout evolution of key booking flows.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
the handoff
the handoff
the handoff
To bridge the gap between design and engineering, I delivered a comprehensive Developer's Guide.
To bridge the gap between design and engineering, I delivered a comprehensive Developer's Guide.
I implemented a labeling system and defined a scalable component architecture, explicitly defining global color variables and reusable elements to streamline frontend modularity.
I implemented a labeling system and defined a scalable component architecture, explicitly defining global color variables and reusable elements to streamline frontend modularity.
The documentation details highly specific micro-interactions as well, such as triggered numerical keyboards with input masks for payment fields, and also outlines technical integrations with Google Maps and Material Design specifications.
The documentation details highly specific micro-interactions as well, such as triggered numerical keyboards with input masks for payment fields, and also outlines technical integrations with Google Maps and Material Design specifications.
Developer's Guide Sample: Component states and
technical specifications for the final booking process
Developer's Guide Sample: Component states and technical specifications for the final booking process
the impact
the impact
the impact
By grounding the application's architecture in user research, and building a zero-ambiguity handoff, the final prototype eliminates the friction associated with mobile hotel bookings.
By grounding the application's architecture in user research, and building a zero-ambiguity handoff, the final prototype eliminates the friction associated with mobile hotel bookings.
Validating the high-fidelity prototype against the initial customer journey map reveals a dramatically streamlined experience, ultimately reducing all user pain points within the booking flow.
The interactive prototype showing the fully resolved, high-fidelity hotel booking experience is available for exploring!
The interactive prototype showing the fully resolved, high-fidelity hotel booking experience is available for exploring!
The interactive prototype showing the fully resolved, high-fidelity hotel booking experience is available for exploring!