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.
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:
"Overview first, zoom and filter, then details-on-demand."
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.
I followed the "Mobile First" design principle to start from the design on mobile device, and then incrementally enhance the experience for larger screens.
At Home screen, user starts by filtering Location and reach to Candidate List screen. The side drawer serves for maintaining the bookmark and profile.
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.
Several features do not need to be hided inside menu or the sub-layers for taking the advantage of the larger screen size.
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.
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 candidateDownload Hi-Fi Mockup
I plan to create at least two Hi-Fi mockups for two screens of the Web Design. More updates are coming.