The second project in Google's UX Design course involved learning how to design a responsive website using Adobe XD.
A responsive website changes the way it looks to fit the screen size of the device it's being viewed on. From a list of randomized design prompts, I began working on designing a responsive website for online booking application for villa rentals.
.png)
OVERVIEW
The Product
Project Duration
The Problem
The Goal
Responsibilities
Postcard Villa Rentals is an online booking application for villa rentals in Goa, India.
The target users are tourists (aged 19 to 30) holidaying in Goa in larger groups.
August 2021 to October 2021
The tedious nature and large amounts of information while booking villas on other websites can lead to a poor user experience.
Design a website for Postcard Villa Rentals to be quick, responsive and provide a simple user flow.
Conducting research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs and responsive design.
Just as with other projects, I implemented a Design Thinking approach to my designs.
-
Empathize with users
-
Define user pain points
-
Ideate for design solutions
-
Create wireframes, mockups & prototypes
-
Test designs to get feedback
RESEARCH
Primary & Secondary Research
Research began with studying competitors such as Zostel, Oyo, Lohono, Airbnb and SaffronStays.
I conducted research in the form of interviews, personas, problem statements and user journey maps based on the target user’s views and experiences. Since I was focusing on young-age tourists in Goa, travelling in larger groups, this was to be my target audience for the research.
I found that other websites across the internet catered mostly to luxury villa rentals, which may seem out of reach to such groups in terms of monetary constraints or otherwise.
Postcard Villa Rentals focuses on a niche segment who would like the experience of staying at a villa of their choice along with their friends or family at a more affordable price, while enjoying the beautiful sights of Goa.
Pain Points
01
Navigation
Websites are often loaded with unwanted information leading to a hindrance in user flow
02
User Experience
Websites don’t provide a wonderful user experience by keeping things minimalistic.
Frame Design Question
The above findings helped me further narrow down on the problem statement, leading me to frame my design question.
"How might we improve the booking experience for travelers looking for villas in Goa, with a responsive website?"
DESIGN ITERATION
Paper Wireframes
I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations below focus on optimizing the browsing experience for users.
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 useful button locations and visual element placement on the home page was a key part of my strategy.
Low Fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow.
User feedback from peers pointed out additional content such as login page to be added
_edited.png)
Final Designs
The low-fidelity prototypes were followed up by mockups and high-fidelity prototypes. This gave the final look and feel of the product on completion of a usability study.
_JPG.jpg)
TESTING
Feedback & Usability Study
Based on my design wireframes, mockups and prototypes, I went ahead with testing the product with my chosen test users at different stages. The following was the feedback I received and worked on as a result.
01
Login
A login / signup page for existing users to save preferences and take up offers.
02
Features
Add 'amenities' provided by Postcard Villa Rentals
03
List Your Property
A feature for home owners to list their villas for rent on Postcard
Findings from the study led to several changes and additions in design and multiple iterations, some of which are shown below:
I worked on adding features as per the usability study suggestions, such as amenities and a login page.
GOING FORWARD
Takeaways
Designing a responsive website along with a mobile app seemed more challenging than my first project. I learnt that even a small design change can have a huge impact on user experience.
Although I have only designed the user flow for booking villas on rent, there remains a scope of additional features which can be implemented such as listing property for home owners, renting vehicles etc.
Next Steps
01
Conduct more user research to determine any new areas of need.
02
Identify any additional areas of need and ideate on new features
03
Add features to list property for home owners