From cluttered desktop to tidy small devices
So, how do you transform this tired, cluttered dashboard UI into a finely crafted mobile experience keeping all the key features and functionality? Curation is key.
This is a B2B platform for booking and managing hotel reservations and was originally designed for one of the Qantas Holidays sub-brands. It is not consumer facing, the persona is the travel agent and has a user management system built in.
My Role
This was prodominently a UX piece for me. My job was to deliver the best possible experience across multiple device. Fortunately, I have designed a number of travel related applications for mobile in a previous life so I was pretty confident we could release a great outcome.
Pain Points
The primary problem here was not the lack of content but how we squeeze all of it onto the small screen. We ran some research and we discovered that cognitively, it presented a problem to many users. It was just too messy for many of them and created a feeling of anxiety. The plan was to get into the mockups straight away to anticipate the usability issues. We received great feedback from the main users and they were definitely heard.
Mobile UX design can be tricky business. There are so many things we have to consider, including the growing list of mobile devices, the ways people interact with them, and the fact that people want consistent and pleasurable experiences across all device types.
Given the constraint on time to deliver and that the user persona could be using this application across a number of different screen resolutions, we knew early on in the process that the approach had to be responsive so we could forget about doing a native application. It meant we would have to define some effective breakpoints.
Prioritisation
Part of successfully curating a great mobile experience is to prioritise. By this I mean removing as much clutter as possible and only leaving what is absolutely necessary, based on the user’s needs. In this case, the key tasks they would be performing.
As Antoine de Saint-Exupery said,
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
It was established that our user would be primarily using the interface to check hotel availability and this could happen at anytime of the day, from anywhere. They could be sitting in a coffee shop or in a car during a school pick up. Secondly, the user would be using the application to manage their bookings.
All frequently performed tasks were made readily available and the main flows to be easily accessible and fast. You can see in the dashboard wireframe above, the user can get straight into searching for products and services.
If they scroll down to below the fold many of their administrative functions become visible such as, ongoing quotes, existing bookings or the user can run a search to find specific bookings or quotes. These can also be accessed using their profile avatar to reveal a menu of options.
Our UI Designer executed the experience plan expertly and made some great UI component choices. For example the tab system displays the most frequently used search options in it’s navigation.
The search
This section allows for the most frequently used search tasks. In this case the user requested it to be for hotels, activities and transfers. A search as expected will render results based on the user’s search parameters.
A key fundamental of great UX for mobile is a seamless flow. As result lists can sometimes be extensive and we wanted the user to experience the smoothest journey possible. When the user is on a result page they are presented with back and next options. This allows them to keep perusing the choices without having to go back to their search result list.
There was a requirement to be able to download hotel information or print it as illustrated by the icons.
Accordions were used to curate the data.
Specific features
During our research phase, we received a number of requests from the user that we collated. Many were considered ‘nice to have” but there were a handful of really beneficial ones that we knew would make their lives easier. We implemented these as additional filter options. In this case the research really paid off and enabled us to design the best product we could.
For example, they can view their commission as a percentage. As agents, it is useful for them to be aware of the profit they could potentially earn on a product. Thus enabling them to upsell certain hotels. If the agent has a tool to help them make more money then the organisation wins too.
Another great example is allowing to the user to toggle prices from show to hide. Unknown to us, agents would sometimes be sitting right next to their clients. They can simply click the eye icon and toggle the prices on or off.
Constraints
The end goal was to achieve the most enjoyable experience for this product when used on a mobile device. However, there were some specific constraints that we needed to keep at the forefront of our minds when designing the experience.
| Screen Size | Smaller screens can increase congnitive friction so we needed to restructure information, consider key thumb zones, decrease clicks. |
| Externalities | Using data to browse can mean users are prone to dropping in and out of signal. We had to think about save points and avoiding having to start their tasks from the beginning again. |
| Multiple screen sizes | Designing responsively limits what we make visible on screen. We could have designed around multi-screen use but we decided the best approach was to use familiar UI elements that could be hidden if not needed or considered primary. I.E. expand and collapse elements, tabs. This allowed us to fit a lot of information in but kept the presentation tidy. |
| Is the user left or right handed, both hands, landscape or portrait? | I’m talking about how they interact with their device. Use the rule of thirds and keep key actions in the middle, design for all and large touch points. |
A cleaner, clearer interface
Overall, the designs present a more usable product using familiar componenet sets to display that data. The user flows are more seamless allowing the user to complete tasks faster.