012: Time to Shop
I'm doing a Daily UI Design Challenge: designing a different screen each weekday for 100 days based on the prompt I receive in my email. Knowing very little about what sorts of prompts I'd receive, I decided to try my best to make all of my screens fit within a fictional travel-planning app, Let's Travel.I'm also writing about some of my UX considerations along the way.
Remember a couple of days ago, when I said I assumed I would have a chance to refine my hotel details page? Well, the opportunity came sooner than I expected. Day twelve's challenge was, "design an ecommerce shop". I focused on just iterating on the page I had already started, rather than building out the whole flow, so we don't get to the "add to cart" part of the shopping experience, but you can start to see how that would take shape:
Fun fact: I actually stayed at this hotel when I visited Venice a few years ago. It's quite nice.
As you can see, I did end up moving the share button. It's still prioritized, near the top of the page, but as I moved things around and added new content, the share button no longer worked in its initial position. Other prominent information on this page is the "starting at" price information, hotel images, and the "check availability" button, which is how the user would start the booking flow. Below that are hotel details and information about room types.
If you go to the Hotel Flora website (or any hotel website), you will see a lot more information than what I've shown here; e.g., events, photo galleries, and even a guestbook to sign. Some of this might be useful or even necessary content for certain types of travelers, such as people who like to consume a lot of diverse information before making a decision. However, it doesn't make sense to include all of it on a screen like this: a mobile view of the hotel within another app. Instead, we could consider linking to the hotel's website, so that users have an easy way to find more information. It would also be helpful to do some user research, to determine what is enough for the majority of our users. It may very well be more than what I've shown, but probably less than what I see when I go the hotel's own website.
I didn't have the time to design the other screens, but here's roughly how I would expect the booking flow to work:
Obviously, the final flow would depend on a lot of things I'm not doing, or that I just don't know, like technical constraints, but it's a pretty standard flow. No need to reinvent the wheel here.
I also iterated on the share overlay, and ended up putting the "add to a trip" functionality within the overlay:
So now, you can add a hotel to a trip (new or existing), suggest it to a friend, or post to social media. I can imagine a future iteration pulling out the social media post options, in order to simplify this screen and separate distinct types of actions. In Android apps, the overflow menu in the header (launched using the three vertically-aligned dots) often includes a share option, so users would likely be comfortable accessing that functionality from there.
Hopefully I'll get an opportunity to build out the rest of the booking screens over the course of the Daily UI challenges, but if not, I'd like to come back and design them at some point anyway. I'd also like to dig more into what it looks like to add a hotel to a trip or share it with a friend, since those are key interactions for my app. We'll see what the future holds.
