Hey there! I’m a UX designer based in Dublin.
Currently working at Wix, I lead user advocacy for booking websites and mobile apps, bringing the user's voice to product teams based on user and product research, to make sure products are being developed and improved according to the right prioritization.
With vast experience working with cross-functional teams to bring a human-centered approach to product designs, I felt like I needed to brush up on the hard skills and methodologies needed to succeed in the ever-changing UX industry.
Now graduated with the Professional Diploma in UX Design by the UX Design Institute in association with Glasgow Caledonian University, and I'm excited to fully migrate into UX as a natural step in my career progression.
Portfolio
NomaStays
Your nomad life made easy
Where
Dublin, Ireland
Role
Designer, Researcher
What
Desktop website
Category
Hospitality,
booking platform
Why
Case study/portfolio project for UX Design Institute's professional diploma course
When
Aug 2023 - Feb 2024
The reason I created this desktop website
The challenge was to create a site or app for a newly made startup.
With hands-on experience working with booking platforms, I’m aware of the huge scope there currently is for improving websites like these, which is why I decided to create a desktop website for a new startup hotel, focusing specifically on the booking process.
As it’s a startup company, my goal was to use simple and great design centered on the user’s needs as a source of competitive advantage over bigger hotel chains with more bureaucratic and confusing booking processes.
Competitive benchmark
To start, we analyzed four diverse hotel booking websites to gather insights from different types of businesses (a high-end hotel, a well-known hotel chain, a popular hostel and a hotel aggregator website).
We focused mainly on comparing the booking experience of each competitor as a new user, with special attention to the homepage, search and select pages, booking form and booking summary pages. We also looked at UI messaging and possible validation rules that may interrupt the user’s flow.
When analyzing, we kept the following in mind:
-
How do these websites solve the problem (booking a stay)?
-
What are they doing well?
-
What are they doing badly?
-
Are there any design conventions established between the websites that should be followed?
WHAT THEY DO WELL
WHAT THEY DO BADLY
Search bar gives clear feedback for easier understanding: Chosen check in/check out dates get highlighted after clicking, while the whole travel period is displayed in a different color
Interface is predictable: Progress bar with clear steps until checkout is displayed at the top of the page
Possibility to undo mistakes: Search inputted and possibility to edit search is displayed on the right of the search results page
Search bar doesn't follow conventions: Guest field doesn't have the option to choose how many rooms user wants
Unusual jargon found in website: Checkout page has a "receive email by html or plain text" checkbox option
Information not always easily displayed: No booking summary is displayed anywhere in the flow before actually confirming the booking
WHAT THEY DO WELL
WHAT THEY DO BADLY
Extra customization options during search: Destination field in search bar gives option to choose current location
Site allows reversing actions while minimizing need to re-do previous work: If the user adds filter options to the results page and then edits the search, the filter options are kept
Option for a faster booking process by signing up/signing in as a site member
Usabilities found: When choosing dates in the search bar and opening the date field again, the hover works backwards (total number of nights selected is displayed as a hover on the check in date, instead of on the check-out date)
Users have no indication of how long booking process may take: Progress bar with steps until checkout is not displayed anywhere
Absence of rules for member modal in booking form page creates unnecessary extra clicks: If user reaches modal and closes it, then goes back a page and returns to the booking form page, the modal will re-open every time
WHAT THEY DO WELL
WHAT THEY DO BADLY
Progress indicator is clickable and allows for easy navigation between steps: User can move freely around the progress bar flow (go back and proceed) up until the point user had navigated/completed before
Unique UI design customizations: Background image in search page changes to match destination chosen
Simpler booking process: Options to add room extras are already given in the "Rate" step, which automatically recalculates price
Conventions not applied to search results page affect time it takes for user to review search results: No sort or filter options available on the search results page
Limited search options: Date field in search bar doesn't give option to choose flexible dates
Missing country code selector may increase input errors: Phone number field in booking form page doesn't have country code option
WHAT THEY DO WELL
WHAT THEY DO BADLY
Software uses previous info to auto-fill other steps: Guest name field in booking form page is autofilled with information from First/Last name fields when selecting "I'm the main guest"option
Crucial information evaluated by users to book is displayed up-front with great visual hierarchy: Room previews in search results page displays overview of most important information related to stays (policies, room types etc.) with different colors and sizes
Affordances are used strategically for progressive disclosure: Map thumbnail at the top left of the search results page with a "show on map" button allows users to easily click to compare locations
Software allows user mistakes but also creates unnecessary work: Editing search dates/number of rooms resets previously selected filter options
System status not always clear: Modal with generic UI messaging "book now, pay when you stay" displays when selecting filters for search results (could display a better feedback status such as "updating results" instead)
Search bar logic to reduce user clicks is not consistent: Upon choosing destination in search bar, the check in field is auto-selected as next step, but that doesn't happen from check out to guests fields
User survey
We then conducted an online survey with a mix of open-ended and closed questions among people who use hotel websites, to understand their goals, behaviors and mental models.
INITIAL RESULTS
Our results showed that first time users tend to access hotel booking websites with the goal of researching and comparing options first (instead of actually completing the booking).
Their main needs were related to being able to find and compare information easily, which emphasizes the need for hotel booking websites to display important booking information (ones that are deciding factors for purchase) right from the beginning of the flow, to retain user's interest and reduce the probability of users dropping mid-funnel when they struggle to find what they are looking for.
Usability test
Continuing the research phase, we carried out a live online usability test with a user on two different hotel booking websites through Zoom, and also participated as note-takers in two additional usability tests.
Each usability test had a test preamble, a short interview with each user to define their profile/context, and two tasks to be carried out online by the users. The tasks included booking a holiday abroad for two people on specific dates, with extras such as selecting a room with breakfast included, free cancellation and a double bed, in a hotel close to the beach.
We wanted to understand how users make sense of the booking process, with special attention to what they like about the website and possible friction points/where they struggle to find the information needed to complete the booking checkout. Throughout the test, I asked the user to walk us through her thought process and verbalize when and why she was struggling.
INSIGHTS GATHERED
All three users were able to complete the tasks and reach the booking form page of the respective hotel booking websites. However, they struggled to find and understand if their room choices had breakfast and free cancellation, as they expected this information to be displayed before the add-on/rate pages.
Additional observations: Users often overlooked options hidden in dropdown lists, and expected room titles to match room pictures. They seemed specially pleased to find unique amenities listed (fruit, slippers etc).
Affinity diagram
With the various data sources gathered in our research phase, our next step was to create an affinity diagram to make sense of the data, by grouping similarities together to identify patterns and trends.
User journey map
We used the clear groupings that came from the affinity diagram to build our user journey map. The map allowed us to create the 'average' user journey that we uncovered through our research, highlighting the problems and the positives and becoming the basis for our subsequent flow diagram. We also included fixes and improvements to the issues found, listed as opportunities for competitive advantage that our website would have.
Zooming in on the Emotion Mapping...
Flow diagram
The design phase! With the user journey map ready, we felt like we understood our average user well enough to draft out the first flows of the website. We took into account the key issues identified to be solved to create a simple flow of the main steps our user would take to reach up until the booking summary page. Due to time constraints, we focused on the happy path UX flow for our hotel booking website.
Before sketching the screens on paper, we classified the key issues identified to be solved with our website based on severity and business impact.
This helped us to prioritize which features we should include in our booking process flow, and which would be "nice to have", but not essentially needed in case of time constraints.
How we classified our issues and some examples found from our research:
Critical: Issue prevents revenue & operation productivity
This includes user struggles that might make them consider leaving the website before completing the booking:
-
Unable to find cancellation policy and breakfast options
-
Room details are not clear and users struggle to understand bed type jargon
-
Unable to find hotel location in complex maps without legend/references
Major: Issue causes struggles & might lower revenue for business
This can be struggles that might make user skip extra revenue making sections of the site:
-
Extensive add-ons list not displayed by importance overwhelms users
-
Sign-up member modal reappears every time user reaches booking form page
-
Benefits of booking directly with hotel/hotel contact not easily found
Minor: Issue causes disruption/annoyance
This can be issues that annoys the user throughout the flow and harms the hotel's consistent branding and function, but may not necessarily affect revenue:
-
Unable to compare and share room options with friends
-
Filter selection not kept when editing search
-
No progress bar displaying steps until checkout/progress bar not interactive
Interaction design
Our next step was to use the issue classification and flow created to sketch the screens of our booking process on pen and paper as low fidelity wireframes. This was a crucial step in our early design phase, as it allowed us to play around with interactions and figure out how our design would look on paper first before committing to a set design, something that would have been more difficult to do if we had gone straight to a digital low fidelity wireframe.
Zooming in on some of the screens sketched...
Prototype
Introducing: NomaStays, your new hotel focused specifically on the nomad traveller and worker staying in Dublin and London.
For our hotel website, we decided to create a nomad-style hotel, with the target audience being the single travellers in their 30s who now have the freedom to stay and work from anywhere in the world post-pandemic era.
With our low fidelity wireframes, we proceeded into turning them into screens on Figma and into an interactive prototype with hotspots and dev annotation to test it out. After the original prototype was finished, we did an in-person usability test with a user to understand possible frictions and to gather feedback, which we then applied to the original design to create a second version.
Some of the frictions and feedback from prototype 1 (click on images):
With the insights from the usability test, we proceeded to apply the changes to the first version of our prototype. This allowed us to create our second and final version (click below to test it):
Zooming in on some of the screens we applied feedback to...
...and displaying some of the issues found from our research and solved with our design...
Project summary and reflection...
The project allowed me to deep dive as much in my research and analytic skills as in my problem-solving and creative abilities, which was extremely enriching. From researching competitors to then comparing those findings with user-first research and using triangulation to find patterns and trends, the methodologies combined were what gave me the insights to understand the issues correctly and create a desktop prototype with a user-centric approach putting their experience first.
My final product managed to solve most of the issues discovered through my research, which I was very pleased with. Keeping the design simple, I limited the booking flow to 6 main steps clearly identified by the progress bar, and focused on displaying essential information related to booking a stay in each step of the flow with clear language to avoid any user confusion or drop in the funnel. I also included their main wants related to comparison/overview features and more customized filters/sorting, giving my website the competitive advantage I was hoping for.
Reflecting back, I would have liked to have included additional custom features to make it feel like the system knows and cares about the user (background image changing with location, tooltip on add-ons page, recommendations based on number of users/rooms/budget chosen...). After all, the user is booking their home away from home, and it should feel like they are closing the deal with a friend.
It would have also been ideal to make a lo-fi digital prototype (and not only on pen and paper) to test the main interactions on users first before creating the medium fidelity prototype in Figma. With more time, I would have also liked to have been able to do usability tests with more users to validate my prototype further, especially for the second version.
As for creating the actual prototype, although the focus was not on UI, I've learned that it is crucial to establish your UI style guide/library beforehand to maintain consistency and avoid wasting time. Before creating my screens I did decide on the main colors, fonts and typeface, but throughout the design process I often made small changes that increased time spent.
Thanks for reading until the end!
I really appreciate the interest in my case study, and would love to hear any feedback you may have. Let's chat: