Hotel Reservation System MVP
Web app
Web app
Hotel Reservation System MVP
Between November 2023 and April 2024, I worked as a UX/UI Designer (primarily focusing on UI) on an MVP version of a hotel reservation web application. The goal was to design a functional and visually consistent system for both hotel administrators and guests — optimized for desktop, tablet, and mobile devices.
My role and responsibilities
What was my role as a UX/UI designer in the Hotel Reservation System project at Qest technologies?
I was responsible for creating the full visual design, layout consistency, and interaction states across the MVP. I collaborated closely with the UX researcher and developers to ensure smooth handoff and scalability through a design system.
Designing responsive layouts for desktop, tablet, and mobile
Creating low-fidelity wireframes and user flows
Preparing interactive prototypes for usability testing
Building and documenting a scalable design system (colors, typography, components, icons, states)
Iterating based on test feedback and developer input
Mobile layout
Tablet layout
Desktop layout
Design process overview
Our process followed a classic UX → UI evolution, starting from low-fidelity concepts and ending with a polished, consistent interface supported by a reusable component library.
Below is a quick overview of the main steps:
Low-fidelity sketches & wireframes
Exploring main flows: booking, room details, and dashboard
Created for both mobile and desktop views
Selfcare
Guest cards
Prototype testing
Interactive Figma prototypes with pre-defined test scenarios
Usability testing with internal users simulating hotel staff
Online check-in flow from email
Filling out a guest card
High-fidelity designs
Refined layouts, visual hierarchy, and responsive versions
Hi-fi Online pre-check-in (Mobile)
Hi-fi Online pre-check-in
(Desktop)
Design system creation
Defining tokens (colors, typography, spacing)
Components: buttons, drop downs, inputs, cards, modals
All components included hover/focus/disabled states and size variations
Design system - Color tokens
Design system - Status badges
Design system - Buttons
Design system - Modal behavior
Key challenges and solutions
During the design process, several challenges arose — mainly around responsiveness, clarity of room management flows, and visual consistency across multiple screen sizes.
Maintaining clarity in data-heavy screens (room listings, booking calendars)
Unifying desktop and mobile logic while keeping the layout intuitive
Building scalable design tokens and components to speed up future development
Calendar adjustments
Informative boxes
Outcome & impact
The result was a complete, developer-ready design system and a set of high-fidelity screens for all main user flows.
The MVP was successfully delivered for implementation, and the design system laid the foundation for future product scaling and branding.
Summary
The MVP phase of this hotel reservation system allowed me to combine strategic UX thinking with detailed UI execution. From early ideas and low-fidelity wireframes to high-fidelity designs, interactive prototypes, and a complete design system, I helped define a clear visual foundation for the product.
Through multiple testing rounds, I learned how important it is to validate complex booking flows early — and how a well-structured component library can speed up both the design and development process. The final MVP delivered a consistent, scalable interface that is now ready for real-world use and future expansion.
Tools used
Figma(design) · FigJam(ideation) · Slack(communication) · Notion(roadmap) · Jira(tasks)
I hope you enjoy your journey through my portfolio.
Let’s discuss your project!
Let’s talk
Back
Example of a pop-up window on mobile and tablet
Look at other projects as well
Design system - Corner roundness
Hotel Reservation System MVP
Web app
2023 - 2024
Duration
Role
Ux/Ui designer
Research
Ideation
Low fidelity
Prototype
Design system
High fidelity
SCOPE
Figma
Tools
QEST Technologies
Team
Hotel Reservation System MVP
Between November 2023 and April 2024, I worked as a UX/UI Designer (primarily focusing on UI) on an MVP version of a hotel reservation web application. The goal was to design a functional and visually consistent system for both hotel administrators and guests — optimized for desktop, tablet, and mobile devices.
Hotel Reservation System MVP
Between November 2023 and April 2024, I worked as a UX/UI Designer (primarily focusing on UI) on an MVP version of a hotel reservation web application. The goal was to design a functional and visually consistent system for both hotel administrators and guests — optimized for desktop, tablet, and mobile devices.
My role and responsibilities
What was my role as a UX/UI designer in the Hotel Reservation System project at Qest technologies?
I was responsible for creating the full visual design, layout consistency, and interaction states across the MVP. I collaborated closely with the UX researcher and developers to ensure smooth handoff and scalability through a design system.
Designing responsive layouts for desktop, tablet, and mobile
Creating low-fidelity wireframes and user flows
Preparing interactive prototypes for usability testing
Building and documenting a scalable design system (colors, typography, components, icons, states)
Iterating based on test feedback and developer input
Mobile layout
Tablet layout
Desktop layout
Design process overview
Our process followed a classic UX → UI evolution, starting from low-fidelity concepts and ending with a polished, consistent interface supported by a reusable component library.
Below is a quick overview of the main steps:
Low-fidelity sketches & wireframes
Exploring main flows: booking, room details, and dashboard
Created for both mobile and desktop views
9:41
Save time on arrival and during your stay and check in online
Inbox
👋 Hello, Barbara!
Thank you for choosing us for your stay. We will make your first and last stay comfortable.
BEFORE ARRIVAL
📱Speed up your hotel check-in and check-in online anytime before your arrival.
🔥You can use the extra time you save to have dinner in our restaurant with a 10% discount. (You book at the end of online check-in)
We look forward to seeing you.
Online check-in
SPA hotels & resorts
to me
If you no longer want to receive our email, you can unsubscribe.
USEFUL INFORMATION
🏨 check in: 14:00
🥞 breakfast: 6:30-10:30
🏊 swimming pool: 10:30-21:30
📶 wifi: Eclipse, no password
DURING YOUR STAY
Use the My Orea self-service anytime during your stay and let yourself be pampered from morning to night.
Selfcare
Guest cards
Continue
Guests
Please fill out or share the guest cards.
Barbara Black
Not filled in
Fill
Guest 2
Not filled in
Fill
Share
9:41
High-fidelity designs
Refined layouts, visual hierarchy, and responsive versions
Hi-fi Online pre-check-in (Mobile)
Hi-fi Online pre-check-in (Desktop)
Prototype testing
Interactive Figma prototypes with pre-defined test scenarios
Usability testing with internal users simulating hotel staff
Online check-in flow from email
Filling out a guest card
Design system creation
Defining tokens (colors, typography, spacing)
Components: buttons, dropdowns, inputs, cards, modals
All components included hover/focus/disabled states and size variations
Design system - Color tokens
Design system - Status badges
Design system - Buttons
Design system - Modal behavior
Design system - Corner roundness
Key challenges and solutions
During the design process, several challenges arose — mainly around responsiveness, clarity of room management flows, and visual consistency across multiple screen sizes.
Maintaining clarity in data-heavy screens (room listings, booking calendars)
Unifying desktop and mobile logic while keeping the layout intuitive
Building scalable design tokens and components to speed up future development
Calendar adjustments
Informative boxes
Example of a pop-up window on mobile and tablet
Outcome & impact
The result was a complete, developer-ready design system and a set of high-fidelity screens for all main user flows.
The MVP was successfully delivered for implementation, and the design system laid the foundation for future product scaling and branding.
Summary
The MVP phase of this hotel reservation system allowed me to combine strategic UX thinking with detailed UI execution. From early ideas and low-fidelity wireframes to high-fidelity designs, interactive prototypes, and a complete design system, I helped define a clear visual foundation for the product.
Through multiple testing rounds, I learned how important it is to validate complex booking flows early — and how a well-structured component library can speed up both the design and development process. The final MVP delivered a consistent, scalable interface that is now ready for real-world use and future expansion.
Tools used
Figma(design) · FigJam(ideation) · Slack(communication) · Notion(roadmap) · Jira(tasks)
Look at other projects as well
Entel labs
Web / UI design
2021 (2 weeks)
Food delivery app
Case study
2021 (2 weeks)
I hope you enjoy your journey through my portfolio.
Let’s discuss your project!