Hotel booking service LateRooms.com (opens in new tab) recently joined forces with digital design studio ustwo (opens in new tab) to completely redesign both the iOS and Android versions of the company's mobile booking app.
The challenge was to transform the booking experience for LateRooms users, giving them a quick and secure way to search and book rooms from a choice of millions worldwide.
Superhero standards
In order to really get to grips with what was required, ustwo organised a series of activities and workshops with the LateRooms.com team. "One of the first exercises we conducted to understand how the brand would work in the mobile space, was the tried and tested superhero question, i.e. “If LateRooms was a superhero, what powers would you have?” says ustwo senior visual designer Philip Lackmaker.
If LateRooms was a superhero, what powers would you have?
"Responses to this question included speed, intelligence, slickness and remaining one step ahead and it's these we distilled into specific keywords to build upon."
Playful mood
Using these keywords, the ustwo team developed functional, experimental and playful-themed moodboards to explore the app further. "These simple moodboards helped us focus on the brand basics and in turn meant we could begin considering what the visual aesthetic might be for the proposition," Lackmaker says. "It became clear that playful and functional worked in terms of visual language but experimental was more applicable to UX."
Simple moodboards helped us focus on the brand basics
Prototyping was the next stage, and the part of the process where core user scenarios were focused on. Sketches were then created for each and a brainstorming session lead to two outcomes.
Lackmaker explains: "Generally the ideas fell into two areas: map centric experiences - where we investigated the use of notifications on top of maps. We played with different interactions allowing the user could to swap between the two different views. And time centric experiences - where we explored the comparison of results based on destination, user needs and transport."
Smile!
In order to achieve the playful yet functional UI experience LateRooms required, the ustwo team turned their attention to the app's inconography."We introduced constant line weights and we brought in rounded corners in order to evoke a softer and more tactile feeling," says Lackmaker.
"We also looked at the motifs and asked ourselves how we could approach it in a more playful sense in order to inject fun into the whole experience. To tie the whole visual language together we decided upon an element that could be used through out - which was simply a smiley face."
Smooth operators
Working to a tight deadline, an efficient workflow was essential, which is why the ustwo team ensured their process allowed the designers and developers to work efficiently together
"Using GitHub meant the developers avoided the pain of having to drag assets from the server to update the assets within the project and it was simple enough for the designers to use," says Lackmaker.
"The process worked by producing an asset sheet for each section of the app, which was outputted using Slicy to designated folders. Slicy was the perfect tool because once it was set up it featured recents + repeats which meant that any change to the original PSD automatically updated the assets. The next step of the process was to commit it to the repository via GitHub and to let the developers know that an update has been made and hey presto! - we had the latest build."
Final decisions
As the deadline fast approached, the ustwo team found themselves with some key decisions to make, including what elements from the initial direction they should or could include in the finished product.
"An example was the decision whether we should create bespoke animation between the home page to the map results screen or add a key part of UX such as adding the next/previous on the keyboard on the booking flow," Lackmaker explains. "We decided that the animation was not as vital to the product as making the best possible experience for the user.
"It was our goal to strike the right balance and make sure the product had all the features the business required as well as the right visual language and ideas we had in mind from the start of the process."
LateRooms.com (opens in new tab) is available to download on Android (opens in new tab) and iOS (opens in new tab) now.
Liked this? Then read these!
- The best Android apps for creatives
- Incredible app UI designs for the iPhone
- The best iPad apps for designers
Have you seen an amazing app design? Let us know about it in the comments below!
