Find Your Stay Cross Platform App for Finding Your Ideal Place to Stay
Cross Platform App for Finding Your Ideal Place to Stay.

Background

Planning a good trip is not always exciting, especially when busy finding an ideal place to stay. Recently I started to plan my relocation from Atlanta, Georgia to the bay area in California. Originally I thought this should be rather easy since we've already had so many apps and platforms available for finding lodging.

However, I ended up finding myself jumping back and forth between Google Map and multiple apps for gathering information. I then realized that there are actually whole bunch of other criteria other than "Date", "Price", and "Guest" that needs to be taken into considerations when looking for the potential fit.

User Research

I reached out to my couple of friends for their thoughts about the existing experience when hanging out. I didn't want to make the conversations too serious, so it went out more in the style of semi-structured interviews. Our conversations were around the following questions:

  • Have you ever found a place to stay?
  • Elaborate on the purpose. Is it for a short-term or long-term stay?
  • What frustrated you most about the experience?
  • How did you make your decision?
  • What kind of information you need to help you make the decision?

Findings

  1. People mostly first think of the Location (e.g. the city or area) when finding a place to stay.
  2. Some people start their planning by Date.
  3. Budget is also important when matching the candidates.
  4. "I'd like to see if the place is near to the public transportation or at least the traffic is not too crazy."
  5. "I'll definitely check if the apartment is in the safe area."
  6. "See if there's any fun places nearby."
  7. "Food! It's always good to have several food options nearby."
  8. "I would check with my friends who ever been there and see what they recommend to visit in that area."

Information Architecture

"Overview first, zoom and filter, then details-on-demand."

Ben Shneiderman, 1996

I summarized my interview findings and then started to work on the information architecture design. Based on the priority of the required information for decision-making, I layout the information architecture as shown in the flow chart. Users should be able to filter and narrow down to a list of candidate options by "Location", "Date", "Price", and potentially "Guest". And then once located at a specific candidate option, users should easily browse the detail information in terms of "Transport", "Food", "Safety", and so on to help them make the final decision.

Information Architecture Design Flow
Information Architecture - Brainstorming on the whiteboard

Mobile First Design

I followed the "Mobile First" design principle to start from the design on mobile device, and then incrementally enhance the experience for larger screens.

Mobile Design

At Home screen, user starts by filtering Location and reach to Candidate List screen. The side drawer serves for maintaining the bookmark and profile.

Wireframe, Home screen - Start by Location
Home - Start by "Location"
Wireframe, Menu drawer - Profile and bookmarks
Menu drawer - Profile and bookmarks
Wireframe, Candidate List - All apartment options
Candidate List - All apartment options
Wireframe, List sorted by - Rating or Price
List sorted by - Rating or Price

At Candidate List screen, user can specify Date, Price, and Guest to narrow down the options. User selects a candidate and check additional information on the map.

Wireframe, Candidate List - Filter results by specifying Date
Candidate List - Filter results by specifying Date
Wireframe, Candidate List - Filter results by specifying Price range
Candidate List - Filter results by specifying Price range
Wireframe, Candidate - Check additional information on the map to help decision-making
Candidate - Check additional information on the map to help decision-making

Web Design

Several features do not need to be hided inside menu or the sub-layers for taking the advantage of the larger screen size.

Wireframe, Home screen - User can filter Location and Date at once
											 to get to the Candidate List screen
Home - User can filter Location and Date at once to get to the Candidate List screen
Wireframe, Candidate List - Map is no longer hided under the map icon
												comparing to the mobile design
Candidate List - Map is no longer hided under the map icon comparing to the mobile design
Wireframe, Candidate screen - Leverage similar experience of mobile design
													but display more information at once
Candidate - Leverage similar experience of mobile design but display more information at once

Application Flow Chart

Flow Chart for Mobile Design
Flow Chart - Mobile Design

Flow Chart for Web Design
Flow Chart - Web Design

High-fidelity Mockup

I iterated on the wireframes by going through evaluations with a few friends to shake out the usability issues. Once the evaluation results got stabilized, I went ahead to work on the Hi-Fi mockups.

Mobile Design

I am still working on more Hi-Fi mockups for showcasing the final UI design. More updated mockups will be posted.

Hi-Fi mockup: Mobile design - specific apartment candidate screen

Hi-Fi mockup: Mobile design - specific apartment candidate

Download Hi-Fi Mockup

Web Design

I plan to create at least two Hi-Fi mockups for two screens of the Web Design. More updates are coming.

Hi-Fi mockup: Web design - specific apartment candidate

Hi-Fi mockup: Web design - specific apartment candidate

Download Hi-Fi Mockup