Digital design studio ustwo redesigns LateRooms.com mobile app with one question in mind - if LateRooms was a superhero, what powers would it have?
Hotel booking service LateRooms.com recently joined forces with digital design studio ustwo 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."
The ustwo team used the tried and tested superhero question to understand how the brand would work in the mobile space
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."
Brainstorming sessions helped the ustwo team identify core user scenarios
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."
A simple smiley face provided the solution to the playful approach required
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."
A Photoshop, Slicy and GitHub pipeline proved the perfect workflow for the LateRooms project
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."
"It was our goal to strike the right balance and make sure the product had all the features the business required," comments Lacker
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
