Table of contents
- The problem
- The outcome
- Before and after redesigning the home screen
- Learning about the homestay and user stories from the property owner of Ajjanamane
- Evaluation of the then-current design of the website using heuristic analysis
- Identifying specific user goals by user journey mapping
- Mood board & style guide
- From mid-fi wireframes to 35+ screens in high-fi UI
- Prototype of the booking section
- My learnings
- Thanks for reading! ✨
Ajjanamane is a heritage homestay based in Bengaluru with modern facilities.
Stakeholder interviews
User journey mapping
Competitive analysis
Mid-fi wireframes
High-fi UI
High-fi prototype
💡 Tools: Figma
💡 Deliverables: Website design
💡 Timeline: 2 months
💡 Category: Real estate
💡 The team: 2 designers, a project manager, a founder, an illustrator
💡 Role: Research, UX, UI
The problem
There was an existing website for Ajjanamane but it was made in a hurry without any user experience considerations.
The outcome
In addition to redesigning the website for Ajjanamane, the visual language for Ajjanamane was also created.
Before and after redesigning the home screen
Learning about the homestay and user stories from the property owner of Ajjanamane
To fully comprehend the homestay, calls were made with the house owner. He told us what needs to be highlighted in the new website that was previously missing.
Evaluation of the then-current design of the website using heuristic analysis
At this point, the present design was comprehended and the screens were analyzed using heuristics to find issues at various experience tiers. These were documented so that they don't get overlooked during the revamp. There are many issues here. For example, on this screen which is the screen to book a room, it is difficult to select a specific room.
Identifying specific user goals by user journey mapping
Below is the flow for booking!
Mood board & style guide
Three mood boards were created to give the stakeholders options and let them decide which aesthetic style they want to use. The finalized mood board along with the style guide is shown below.
From mid-fi wireframes to 35+ screens in high-fi UI
Landing page
Introduces the user to Ajjanamane and gives them an overview of all the features of the property.
Rooms
Explains the different rooms that are available for booking purpose.
Experiences
Specifically mentions the main highlights of the property that distinguishes is from other places.
Prototype of the booking section
Available slots are highlighted when the page loads. One can either book a room or the entire house.
My learnings
📌 Finding the right inspiration A website had to be created for Ajjanamane. It is rare to have a dedicated website for a vacation rental. Usually, websites exist that contain listings of hotels or vacation rentals, so to get inspiration, those websites couldn't be referred to as they were not aligned with our goals. Hence, some heritage hotels in UK, Bali and some others were checked for references. Some other websites that were researched include Casangelina, Hyatt, etc.