Website: https://breather.com (Apps are available on App Store and Google Play)

opening

What I Like:

In-App Experience:

– On-boarding is quick and straight to the point, no fancy animated tutorials or popovers

– Payment is supported by Stripe, adding my credit card has never been so easy (Stripe, as a payment processor company, has a notable focus on design. To learn more, read this article “Designing at Stripe“)

Out-of-App Experience:

– Reminders (both email and text message) were sent to me before my reservation -I was able to pull out the passcode easily when I found the room

– The whole check-in & check-out experience doesn’t involve any human interaction (no physical items needed to enter into the room makes the whole experience much more easier, thinking of my biggest frustration with Airbnb is that sometimes you have to meet the host in order to get the physical key!)

detail view

 

Little Big Details:

– Logo serves as its loading animation – the color and flow makes me feel calm

– As an on-demand room service,  users are likely to book a room for today or tomorrow, so it makes sense to display date control as “TODAY”, “TOMORROW”, and “DATE” on top of the screen

– By contrast, the view control “Map” vs “List” is moved to bottom, much less prominent than the date control and filter

 

map available state  map unavailable state

 

What Can be Improved:

Problem:

– One thing confused me for a while is the visual representation for a group of rooms – instead of displaying the “OPEN” pin for each room, Breather displays the total number of rooms when there are multiple rooms close to each other – the presence of “OPEN” and number on the map at the same time made me think the number must mean something other than “OPEN”, thus I’m less likely to tap on them.

Suggestion:

– Discard the use of number and simply stacking the “OPEN” pin together when they are close to each other, this UI pattern is widely used by popular location-based apps such as Yelp and Google Map, judging from pin density users will know there are multiple rooms available and tap on it if they are interested in that area.

 

See how Breather’s UI evolved through its early concepts, check out Breather Design Team on Dribbble: https://dribbble.com/booth