top of page
Unwind is a holiday property rental website that provides verified and accurately described accommodations. We empower our users to discover precisely what they desire, ensuring they don't have to settle for a mediocre location. Unwind's primary objective is to streamline holiday planning, making it as efficient and time-saving as possible. I developed the website and conceptualized the company's framework as part of my completion of the Google UX Design Professional Certificate.
Responsibilities
user research
paper and digital wireframing
conducting usability studies
low and high-fidelity prototyping
design system
iterating on designs
Timeframe
August 2023 - October 2023
Tools
Adobe XD
FigJam
Challenge
Many existing holiday rental websites lack a comprehensive set of filters and essential information, leading to a lengthy and often stressful search for the ideal vacation spot. Consequently, users may find themselves unsatisfied with their chosen accommodation upon arrival.
Goal
Design a user-friendly Unwind website that offers seamless navigation, comprehensive filters, and engaging trip themes. This will empower users to efficiently find their ideal accommodation without the need for extensive additional research, ensuring an stress-free booking experience.
Understanding the user
User research
I conducted user interviews with users of different genders who book a room/ apartment/ house for vacation at least once a year. With data from the research I prepared empathy maps. My goal was to learn users' pain points during this process.
Pain points
/ missing detailed filters concerning children (eg. playground, padding pool, etc.) users have to spend a lot of time scanning pictures, in search of facilities for kids
/ non-sufficient number of pictures of the property and its facilities
/ lack of description concerning floor of the apt. or if the entry is private or shared
Personas
Based on the research findings I created personas that represent my target users.
Problem statement: Maja is a busy working mum of a three year old boy, who needs an efficient, not time-consuming way to rent a holiday home with specific features, for her family's vacation, because she wants to relax when she's not working and to be sure that her son is happy and occupied.
User journey
map
Persona: Maja
Goal: Find a perfect apartment for your family vacation
Starting the design
Sitemap
Paper wireframes
I sketched out paper wireframes of the main user flow. Marking favourite elements with the stars, I finished with final version of pages, and then transferred them to Adobe XD.
Paper wireframes
/ screen variations
As potential users would use my website on various devices, I additionally designed a mobile and tablet version of my product.
Digital wireframes
To ensure that users can immediately accomplish their intended goal – searching for the perfect holiday destination – the search bar is in the main focus. Beneath the search bar, users can access properties categorized by trip themes (e.g., Family time)."
Desktop
Mobile
Low-fidelity
prototype
User is looking for a room for holidays with their Family. After choosing the place of their likening user is booking the place and confirming the reservation.
Usability studies 1
I conducted two rounds of usability studies. The first round yielded the following findings:
1
Booking
It wasn’t immediately clear for all of the users, how to book chosen apartment.
2
Filtering
It was confirmed that filters are very important feature to have a good user experience.
3
"Family time" theme
Having filters like “Family time” in the main page was not logical to majority of users.
First mockups
Taking insights from first usability studies into consideration I developed digital wireframes into mockups.
I replaced a fixed window with a 'Book' button with a floating bar that allows users to edit the dates and the number of guests, along with a 'Show prices' button that scrolls them to the section of the page with prices. There, after selecting a price option, users can book their chosen apartment.
Before
After
.png)
Before
After
I changed the process of applying filters. In the beginning users applied filters before pushing “search” button. After usability study filters were moved to the screen with ”search results”. Additionally I added a possibility of searching a property on a map.
Usability studies 2
Second round of usability studies yielded the following findings:
1
Filtering
In the mobile version of the website, it wasn’t immediately clear for all the users that filters were saved automatically.
2
Booking
In the mobile version of the website, there were users who needed to be reassured that they’re booking the right place, upon spending time on filling their data in the mobile version.
Some users wanted the bottom bar scrolling down with the page.
3
Navigation
For some users clicking the name of the place it’s an intuitive way to enter the property’s details.
Refining the design
Final mockups
Based on the insights from the second round of usability studies I added a bar in a mobile version of webpage, with a button “Show *number* of properties”. Now users have a confirmation that filters they applied were implemented onto the properties’ list.
Before
After
Before
After
I moved a reservation details from the bottom of the page to its top, so the users can feel secure that they are booking the right place, upon filling their data.
I pined the bottom bar to the page so it has fixed position while user is scrolling through the page where they fill their data.
Before
After
Mockups/ screen size variations
Desktop
Tablet
Mobile
High-fidelity prototype
The user flow involves booking an apartment from a property that appeared as the first search result, using filters such as "swimming pool," "family time," and "playground."
The user flow involves adding a property to the "favorites" and logging into the user's account.
Check out the prototype yourself:
Mobile version: The user flow involves booking an apartment from a property that appeared as the first search result, using filters such as "swimming pool," "family time," and "playground."
Check out the prototype yourself:
Design system
Accessibility considerations
1
I used colours that meet Web Content Accessibility Guidelines.
2
I used headings with different sized text for clear visual hierarchy.
3
While communicating error in the app I rely not only on colours but also on text information.
4
I designed the website to be available in various language versions.
Takeaways
Impact
Users participating in usability studies expressed high satisfaction with the product. They completed tasks effortlessly and commended the website's intuitive and appealing design.
"I've never seen such an aesthetically pleasing website with holiday rentals. I would definitely use it."
Unwind offers accurately described and categorised properties. It saves users' time in vacation planning process.
Learnings
This project marked my first experience in creating a responsive website and my second UX project. It provided me with valuable insights into the challenges of creating a website that effectively addresses user requirements across cross various screen sizes.
Additionally, it underscored the significance of actively listening to users and discerning their needs accurately.
Thank you for reviewing my work on Unwind!
If you'd like to get in touch, my contact information is provided below.
bottom of page