Project overview
stays is a travel rental home website with responsive design suitable for multiple screen sizes.
A design solution featuring advanced search filtering. Informative yet clean design, the website is an easy to use companion across the globe.
My Role
Lead UX Designer
UX Researcher
UI Designer
UX Writer
Responsibilities
Working on a solo case study, I was responsible for collection and data analysis from user research to coming up with innovative design solutions, wireframing, prototyping, conducting usability tests and designing the interface of the product.
Duration
April 2022 - May 2022
(5 weeks)
The Challenge
The Goal
Users find it frustrating that realistic information or proper directory that sorts accommodation by price and other factors are limited or nonexistent. Users feel like they can’t choose homes that matches their specific preferences.
Create a simple to use and informative travel rental booking website with broad enough filter search so that users can personalize their search as well as prioritizing transparency.
Research & analysis
Gathering data
A survey with 10 participants was conducted to empathize with real users which brought valuable insights. Most users prefer to stay in hotels and value price, reviews and amenities as top choices. Based on user interviews, users share similar pain points such as lack of proper information, little/no filtering options, misleading photos, and pricing problems.
User personas
User journey map: Nathan
I created a user journey map of Nathan’s experience booking travel homes to help identify possible pain points and improvement opportunities.
Concepts, Sketchings & Wireframes
Sitemap
The hierarchical sitemap shows the basic structure of how the pages are prioritized, linked and labeled. Along with a database sitemap which prioritizing broader information to advanced filtering capabilities and creates a dynamic experience based on the user’s selections for rental listings.
Paper wireframes
In this section, paper wireframes for desktop screen shows the main user journey. From the homepage, search, listing page until booking confirmation. A minimalistic, modern yet informative design following Gestalt Principles is used for better user experience.
On the search page, a sorting button, clear price indication, and a search filter pop-up will enable users to customize their search based on preferences which solves user pain points. Other important factors are also prioritized on the search page, such as ratings, amenities and other inclusives.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing the search filter and properly organizing them in categories is a vital part of the design. To add, I made sure that the design would include the total amount of price and details about the amount.
Screen variation
This section illustrates the paper wireframes for the responsive web design for the Homepage. The number of contents were reduced and adjusted as the screen gets smaller. The website is designed to ensure great and consistent experience in different screens such as desktop, mobile and tablet.
Usability study
Parameters
Findings
Based on the insights of the usability study, changes are made to the sizes and the visibility of the filter search. Instead of small check boxes, icons are added for more engagement and appropriate sizes are implemented. To add, the total amount has also been changed to a hovering feature, allowing more detailed information about the total amount and if there are extra charges.
The earlier design lacked organization and proper information in the checkout page. After the usability study, insights from participants provided opportunities for solutions and users wanted to see important information such as the check-in, check out times, cancellation policy and so on.
Visual design & prototype
Style guide
The next plan of action was to create colour palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.
Shades of blue/green were selected which is typically associated with clear waters, open spaces, calm and trust.
Mockups
Desktop screen
Mobile screen
High-fidelity prototype
The high-fidelity prototype shows the main user flow from the landing page to booking confirmation. Design changes made after the usability study.
Added hovering interaction designs contributed to the overall flow and enabled accessing more details while maintaining minimalistic design and making it feel more engaging.
Interact with the high-prototype here.
Accessibility considerations
Moving forward
Takeaways
Impact
The target users are pleased about the overall design.
Users found that the website is intuitive and pleasurable to use.
One quote from usability study:
“It’s nice that there are options for other places like hotels etc.
I really like the colors, looks so nice. The look and feel is very
good, very easy to navigate, I love it overall!”
What I learned
Designing a responsive web for different screen sizes
was quite challenging, I learned that in order to appropriately do so,
I needed to dig deeper in order to properly apply standards while
designing with the end users in mind. I learned that no matter how
complicated the problem is, the key is to design for simplicity that
users will like and understand. Actually applying design principles
and my own knowledge has helped my overall design process.
Thank you.
Check out my other projects:
WAVE | Grow.