About the project
Stay X is a platform that aggregates farm experiences with accommodations across the UK. However, it creates a misleading impression of being a booking system. Users can struggle to navigate the website and are forced to repeat their search input each time they try to return to a list of accommodations.
My role
As part of my role, I coordinated interviews, surveys, benchmarking, and usability tests to complete the research process. I then analyzed the data and created a customer journey map to make sense of it. Next, I designed a user flow and created low-fidelity prototypes, which I tested before making medium-fidelity prototypes. Finally, I handed over the medium fidelity prototype to the developers as part of my responsibilities.
Budget: Low
Tools used: Figma, Miro, Camtasia, Google Forms, Survey Monkey
Tools used: Figma, Miro, Camtasia, Google Forms, Survey Monkey
"You're not doing UX if you don't do Research"
Step 1. Research
For my research, I began by conducting a desktop-focused competitive benchmark using heuristic evaluation. This allowed me to understand how other companies deliver booking systems. I then conducted an online survey to gain insight into people's general behaviours around holiday booking. I also had informal conversations with a few people at work and ran usability tests on existing booking platforms such as booking.com, airbnb, and 'Stay X' website.
I established specific objectives for my research, including:
- Identifying the primary travel goals and decision-making factors when choosing accommodations and a place to stay (Online Survey)
- Discovering the conventions used by popular booking systems like Booking.com and Airbnb (Competitive Benchmark)
- Evaluating the ease, difficulty, speed, and efficiency of booking accommodations online (Testing)
- Identifying any elements that cause friction during the booking process and how users try to overcome them (Testing)
- Identifying the primary travel goals and decision-making factors when choosing accommodations and a place to stay (Online Survey)
- Discovering the conventions used by popular booking systems like Booking.com and Airbnb (Competitive Benchmark)
- Evaluating the ease, difficulty, speed, and efficiency of booking accommodations online (Testing)
- Identifying any elements that cause friction during the booking process and how users try to overcome them (Testing)
Surveys and informal chats
At the beginning of my research phase, I thought it would be good to challenge my assumptions and find out how people, in general, make their decisions around booking holidays and what platforms they use. Due to my low budget, I used social media platforms and shared a Google form asking friends to help out. I asked 8 questions with multiple choice options, including one open question and received 24 answers.
Here are the key findings from the survey conducted on hotel website/app usage:
- The survey revealed that the majority of users (33.3%) used their phones to either book holidays, check prices, or conduct research on hotels.
- Airbnb was found to be the most reliable platform for booking accommodations.
- The survey also found that 54.2% of users considered location as the primary criterion for selecting a hotel, while 16.7% of users considered the price as the main factor. 8.3% of users preferred hotels that offered outdoor activities.
- Families with children were more inclined to book through the website due to the lower costs and simpler booking process.
- Airbnb was found to be the most reliable platform for booking accommodations.
- The survey also found that 54.2% of users considered location as the primary criterion for selecting a hotel, while 16.7% of users considered the price as the main factor. 8.3% of users preferred hotels that offered outdoor activities.
- Families with children were more inclined to book through the website due to the lower costs and simpler booking process.
Competitive Benchmark + Heuristic Evaluation
I conducted a heuristic evaluation to find out how worldwide leaders and niche platforms address the same problems as well as what interface elements make the experience enjoyable and easy.
FarmStay:
Prevention error: Failed
Consistency and standards: Failed
Control and freedom for users: Failed
System status visibility: Failed
Design and aesthetics: Pass
Help and documentation: 50% pass
Recognition, not recall: Failed
Provide a match between the system and the real world: Pass
Flexibility: Mostly failed
Help users to recognize, diagnose and recover from errors: Failed
Summary: Farm Stay vs Booking.com
Recognised booking systems (booking.com and Airbnb) use conventions to make user journeys so-called a walk in the park. Navigating is intuitive and effortless. They promote additional services but it doesn’t affect readability.
vs.
Smaller booking aggregators try features and solutions which are not intuitive, the interface is unpredictable and the information architecture is chaotic. They try to stand out by adding solutions which are not familiar to users.
Usability Tests
The interviews and usability tests helped me to observe how users interact with the product. I could witness real emotions, understand users' thought processes, and identify the actions they take to complete tasks.
I watched and collected data from two usability tests provided by the UXDI. Additionally, I conducted and interviewed one user myself to learn more about testing principles.
I utilized Camtasia software to record desktop screens. Following the interview script, I assigned specific tasks to hired testers to be completed on two different websites: Booking.com and farmstay.co.uk.
.
Here are some key points to consider while designing a travel booking website:
1. Reassure users about their selected options several times before they click on the ‘Book’ button. It helps them feel more secure.
2. Make sure the summary of booking details is visible on every site/step of the user journey.
3. Location orientation is a priority for users. They always look for a map when deciding on their destination.
4. Ratings and opinions from TripAdvisor are essential for users while making a booking decision.
5. Remind users about the free cancellation option at each step of their journey. It promotes a feeling of security and trust and encourages them to engage.
6. Most users don't like scrolling, so avoid long descriptions. Instead, provide options or chunked information.
7. Instant system response helps to avoid frustration and ensures a smooth user experience.
2. Make sure the summary of booking details is visible on every site/step of the user journey.
3. Location orientation is a priority for users. They always look for a map when deciding on their destination.
4. Ratings and opinions from TripAdvisor are essential for users while making a booking decision.
5. Remind users about the free cancellation option at each step of their journey. It promotes a feeling of security and trust and encourages them to engage.
6. Most users don't like scrolling, so avoid long descriptions. Instead, provide options or chunked information.
7. Instant system response helps to avoid frustration and ensures a smooth user experience.
Summary of the Research Module:
What did I learn?
Through this project, I came to understand that research is the fundamental component that supports UX Design. I gained knowledge and skills in a variety of research techniques, such as usability testing, interviewing, card sorting, online surveys, A/B testing, and heuristic evaluation. Overall, I have learned the importance of incorporating research into the design process to create successful user experiences.
Thoughts
If I had a budget, I would conduct an online survey through a paid campaign to gather more insights. After that, I would conduct another survey with more specific questions or rethink the existing ones. I felt like I would like to know more. Having a budget and enough time for testing can provide valuable and useful data necessary for a user-centered design.
Step 2. Analysis.
Making sense of a raw
data.
Note-taking + organising the data
I gathered all my notes and listened carefully to recordings from in-depth testing and interviews. I organised the data in a table with the following content:
Time (to be able to listen to it again if needed) - where (page) - used a key system for better scanning - I described the interaction and noted a comment.
Examples of organised notes with timing, place of an issue, key (positive/neutral/negative) and observations/quotes.
Customer Journey Map
Visualizing the user's journey through tasks and subtasks is essential to communicate data to stakeholders. Simplifying and illustrating something intangible and translating raw data and notes helped me reveal touchpoints and pain points.
Insights:
The user encountered issues while interacting with the calendar on Stay X. At the very beginning, they faced trouble repeating the same actions when switching from the hotel page to the results page. They had to fill another calendar with a different interface and were disappointed to find out that there were no available dates despite choosing the same date.
The Hotel Page stage proved to be the biggest challenge as users were faced with decisions to be made - to either book or go back. This point needs to be carefully designed as emotions here can become heightened. In this case, the user was frustrated and ended up quitting before reaching the payment stage.
Here are the key findings:
• The calendar format and the search engine do not follow conventions, causing confusion from the start.
• When trying to get back from the result page, the website does not remember the search input, and the search needs to be repeated each time.
• The map feature is visually interesting, but it is not functional as it does not appear to be accurate when applying criteria.
• On the Hotel page, users need to apply dates again, and the calendar has a different, linear format.
• Booking is impossible to be done on the website. After clicking the CTA 'Book', the website opens the provider's website, and every step of the search needs to be repeated.
• The calendar format and the search engine do not follow conventions, causing confusion from the start.
• When trying to get back from the result page, the website does not remember the search input, and the search needs to be repeated each time.
• The map feature is visually interesting, but it is not functional as it does not appear to be accurate when applying criteria.
• On the Hotel page, users need to apply dates again, and the calendar has a different, linear format.
• Booking is impossible to be done on the website. After clicking the CTA 'Book', the website opens the provider's website, and every step of the search needs to be repeated.
Affinity Diagram and closed Card Sorting
During my research on booking systems, I gained valuable insights into their conventions through online surveys and usability tests. I decided to use these conventions as a basis for my solution. To prepare for the workshop, I analyzed the booking.com and Airbnb websites and categorized them into groups based on their similar navigation structures.
The team I was working with was able to efficiently identify and discuss issues written on the cards. They also assigned the cards to relevant groups, which significantly reduced the time required for the process. This was important, as we had a limited time of only 1.5 hours.
Affinity Diagrams, Card sorting workshop.
Step 3.Concept Design
User Flow
My aim was to create a user-centred experience that meets the following criteria:
• Intriguing and easy to navigate: The user interface is simple, well-organized, and has high-quality images to attract the user's attention.
• Informative and reliable: The use of conventions, progress bars, inline validation, predictability, and a map appearance will provide the necessary information and guide the user.
• Secure and trustworthy: Payment options logos, verified bank providers, and feedback mechanisms will instil a sense of safety and trust in the user.
To simplify the user journey and assist them in achieving their goals, I have created a User Flow that outlines the steps a user takes when interacting with the product. A User Flow is useful in planning the path a user takes when using applications.
Starting with a low-fidelity User Flow, I have broken it down into higher fidelity - to see more detailed actions and screen states that the user will take.
.
Low-fidelity User Flow and sketches (pic 1), High-fidelity User Flow (pic 2)
Step 4. Wireframes and prototypes
Lo-fi, sketches
I always start the design process with sketches. Creating a low-fidelity prototype allowed me to iterate through many design options quickly.
I made three different versions, allowing the first one to be a basic skeleton where I add, erase and make mistakes on. With the last version, I came up with an idea to make screen mock-ups. In that way, I could attach separately sketched dropdown menus, CTA's, calendars and other elements, simply take a picture/scan and print the screen state. This technique saved me a lot of time.
Creating sketches using pen and paper is an absolute must!
Sketching low fidelity prototype process
Low fidelity mock-up and components
Components
Home page and search engine
Location dropdown
Calendar dropdown menu
Add guests dropdown menu
Results list with map
Results page with filters dropdown menu
Hotel page
Confirm details page
Booking confirmation
Wireframes - Figma
Creating Wireframes challenged my sketches but fortunately the process of sketching lo-fi appeared to be thoughtful and not many changes needed to be done.
I used Figma to create wireframes and then used it as a base to create a medium-fidelity prototype.
Wireframes, Figma.
Medium-fidelity prototype - Figma
I used Figma to prototype my desktop screens. The prototype has been tested by my tutors. I received very positive feedback and I was given the award of 90% score on my Prototype.
Components
I have created all components myself. Avoiding using the library assets helped me to get to know the software better. It was incredibly satisfying to learn all animations and set up interactive assets from scratch.
Instructions for testing the prototype (desktop):
/Home/Search/
Location: Type Aviemore > Select from a dropdown menu Aviemore, Scotland
Dates: 8-15 May 2022
Guests: 2 Adults > Search
/Results/
Apply Filters: Breakfast included, Farm attractions, Holiday homes, Guest houses, Workshop available, Lambing, Animal feeding
Then Pick: The Shepherds Pie
/Hotel page/
Read the description: Read more> Show more>
Pick: Wool Dreams room
/Confirm your booking/
Confirm details
Select Card payment – (*note) Double click for automatic fill.
Copy the link below if you want to test - remember to follow the instructions above.
Copy the link below:
https://www.figma.com/proto/TrGl0cvNZ5gTsBeu6ye6Ok/Hotel-Stay-Prototype?page-id=56%3A1557&type=design&node-id=222-1482&viewport=154%2C322%2C0.04&scaling=min-zoom&starting-point-node-id=56%3A1559
Step 5. Annotations for developers + Handover
To improve my ability to create accurate annotations for developers, I recently attended a webinar called "Talking to Developers". I learned that taking meticulous notes and having a thorough understanding of the challenges developers face can save time and reduce frustration.
Although it was difficult to communicate using the developer's language, I am confident that with practice and the right attitude, it will become easier.
Handover should not be done without clear communication between teams. It is an ongoing process that requires everyone to know what to do and the project to be ready for testing.
Annotations in FigJam.
Annotations in figma.
Step 6. Testing
To learn how to conduct testing and receive feedback from users, I tested my prototype with 5 users, who helped me discover how to amend my project for the final handover.
The results of the testing were satisfying. Users were happy with the experience I created. I have been paying particular attention to each module during the course and it paid off. The only confusion was caused by the technical set-up of testing in Figma - probably not the best for it.
Summary
What did I learn?
As a graphic designer, I have always been focused on the visual aspect of a project. However, I have come to realize that UX design encompasses more than just the visual aspect and requires a different approach. I have learned to appreciate and incorporate research in the design process, as it is a crucial component in UX design.
Conducting interviews has taught me to be more open-minded, communicate clearly, and avoid making assumptions. I have also learned about the negative effects of biased design and the impact it can have on businesses and ideas.
By working through the entire design process, I have been able to upgrade my skills and knowledge. I have added Figma to my skill set and have learned how to prototype. Lastly, I have gained more confidence in responsible design and have a better understanding of the challenges of digital inclusion.