Please enable JS

Mobile Date Picker

Client: Aro In House R&D

Date: 2016 -17

Skills: Research, Prototype, Interaction design, Visual UI Design.

Project Description

The project involved the redesign of the first step in the booking process. The current UI was out of date and not suitable for mobile users. The brief was to create a simple intuitive date and occupancy selector that would allow the user to move on to step two as quickly as possible. There was also a requirement to include a promo code entry field. The application needed to allow for multiple rooms with different occupancy. The first step in the process was meeting with developers and scoping out necessary / possible functionality. Competitor analysis was then undertaken to understand what various large scale companies were doing with mobile verses desktop date pickers. Data gathered from a/ b testing and heatmapping on hotel sites has provided great information on what methods work best for selecting dates. An open style large date picker has consistently performed better than using small horizontal fields. With this knowledge, the idea was to incorporate this style into the application. A number of clients were interviewed on their experience of the current step one and were asked to detail any features they would like to see. With all information gathered the design process began

A test prototype was to be created to ensure that those approving the concept could understand how the product flowed. It was necessary to see if they would understand what to do without being told and how they would react to various screens. Mockups were drawn up in Photoshop and imported to InVision to create an interactive prototype. Users could select dates, enter a promo code, add rooms with different occupancy and submit their search. An example of changes implemented after the first test is the strengthening of colours once users had selected items. The test showed the need for more reaction to user’s choices. While they thought they had selected a date the selected state was slightly too pale and they were unsure the had done the right thing. Once the functionality, flow and structure had been defined the UI was completed using appropriate colours fonts and icons. This application is currently under development and will have a visual QA on completion