DoubleTree Hotels first approached us in 2013 to redesign Home & Away, their app that acts as a concierge for business travelers staying at DoubleTree properties. When we initially looked into redesigning the app, we wanted to stay close to the core strategy.
The concept is simple: tell the app which bank, gas station, coffee shop, pharmacy, rental car, etc. that you, as an individual, prefer, and the app will effortlessly map your brand preferences around your hotel.
That core mission has stayed the same, but DoubleTree enlisted us to redesign the app once again this year based on updates to iOS. After research, design, and user testing, we were able to completely revamp the app with added functionality and a greatly improved user experience. The following is a look at the key features we updated. You can also head over to the app store to check it out.
The original app featured a map with an omnipresent sidebar allowing the user to select their favorite brands for each of the available categories (banks, pharmacies, etc). Once selected, the app will remember your favorite brands no matter which hotel you’re searching from. For the redesign, we wanted to make the map even larger — after testing it was revealed that the main area of interaction was the map, and we were losing a lot of space to the wood-grain texture. We designed a slide-away tray that is accessible from the icon menu, hiding the brand favorites tray when not in use, creating a more immersive experience. We’ve also pulled in search results from Yelp, so if users are looking for something that’s not featured in one of the sidebar categories, they’re able to search the map for anything they can dream up.
The wood grain was warm and inviting, but took up a large amount of real estate on the main map screen. During the redesign we were able to take advantage of the advances made in increased interface familiarity, removing the wood texture and skeuomorphic buttons in favor of a minimally-styled side and top bar. We also added a plethora of animations to the app to enhance the character of an otherwise lightly designed interface. To display the favorites bar, the user swipes their finger to the right on an icon. You can check out all of these new features by downloading the app today.
One of our client’s goals was to reduce the size of the app, which in its original version featured images of each of their 370+ hotels in 32 countries across 6 continents, leading to a gigantic app. Size is a huge factor in apps, because large apps lead to longer download times. We removed the images from the app, reducing the size from about 300MB to just 30mb.
This decision mainly impacted the hotel selector screen, because the first version of the app each hotel was shown with its own photos. The photos looked beautiful, but were not a necessity for the app experience. In the new version, the hotel selector screen has been reworked to allow the content to come to the forefront.
The Hotel Selector
The hotel selector screen has been changed dramatically as well. On scroll, the title bar fades away and the hotel tiles take over the screen, featuring a slight color fade as the rows of hotels slide by. Our hypothesis was that users are not interested in photos of the hotel. Presumably, users are already staying at a DoubleTree hotel; when they’re scrolling, they’re looking for a specific hotel location. Listing the hotels alphabetically and offering a pleasing color fade allows the user to scroll at will and without distraction. The app also offers a search based on text or current location.
Testing & Iteration
In early rounds of testing, we realized that users were confused about the goal of the app, especially in relation to the DoubleTree brand. We recognized this as a huge problem, and came up with an elegant two-fold solution to teach our users about the benefits of the app. When the app is launched, the user is met with a welcome screen, a short description of the app, and a large button that entices them to “explore” the map. When they enter the map view for the first time, they’ll see a brief three part tutorial, complete with an animation. The tutorial explains how to use the app and then drops off the screen. In our second round of testing, we saw that although the tutorial worked well for some, about half the users swiped through the tutorial without reading it and were still confused. So, we added one last cue to help our eager users — a one-time interface hint that pops up to guide the user through their first interactions in the app. They can tap the bubble to be walked through the action, or perform the action on their own to get rid of the cue. Our last round of testing was highly successful. All of our cues did the trick, and users were having a great time navigating around the app. The animations were a big hit, delivering a surprise dose of fun for people who might otherwise not be so happy (if they’re on a business trip).
Check out the app in the App Store today!