My role was to design the user interface for mobile devices. I worked with the lead designer to address the site’s responsiveness, analysing the version he made for desktop. I worked with the development team to ensure we were able to implement specific requirements for mobile devices. I managed the full site handover through Zeplin. We went through a number of rounds of quality assurance before delivering the final product to stakeholders.

Understanding the product: In the preliminary stages of the design process, I examined what had been made for the Desktop version of the site. I reviewed the user flow and the research conducted by the lead designer and the marketing team, to have a comprehensive understanding of the reasoning behind choices made for the final product.

Problem insight: Everyone looks forward to their next vacation. Most of the time, finding a new destination to visit is time-consuming. Many travellers do not always have time to do research or don't know where to look to quickly seek out their next voyage, while also trying to get the best deal.

Solution insight: To create a microsite with a simplified booking experience, to more effectively connect travellers with Air Canada destinations and tourism agencies promoting those destinations, all in one place.

Understanding Air Canada’s visual identity: I conducted thorough visual research on Air Canada's visual identity by looking closely at their website on mobile devices, reviewing their mobile app, brand guidelines and more. This allowed me to create visual consistency with Air Canada's brand throughout the overall experience.

Responsive layout: Reviewed the microsite desktop designs to identify areas that might pose challenges for the mobile user experience.

Problem insight: (a) The experience was not designed for mobile devices and the desktop version didn't thoughtfully consider a responsive layout. (b) Interactive elements such as the map feature and cards for the Travel Style had to be adapted to work with much less screen real estate.

Solution insight: (a) Worked with the lead designer to reconsider elements of the layout for both desktop and mobile, to ensure consistency across all devices. (b) Studied and worked on hand gesture implementation to improve navigation.

Problem – Interactive map: (a) On mobile devices, users couldn’t zoom out the map to display more destinations because of pin overlap issues with close destinations. (b) In user testing, we identified that users were not exploring the map to seek other destinations located outside the viewport.

Solution insight: (a) Implemented a pin combining feature to display one pin only with the numbers of available destinations in that area, instead of all destination pins displayed at the same time. The pins eventually split when the user zooms in on the map. (b) Added an interactive arrow in the map to highlight destinations not displayed in the viewport.

Problem – Travel style cards: Desktop user interface didn’t consider the possibility of having an extended number of cards on the page – only a set number. This problem needed to be addressed across all devices, to ensure a cohesive experience.

Solution Insight: I initially considered a carousel slider to display the cards on all devices. After some research, we identified that a scrollbar delivered a better user experience, keeping users engaged with more natural navigation.

Once users select their preferences based on budget or travel style, a map of different destinations across the globe appears, allowing users to view the destinations that fit their preferences. After selecting one of the marked destinations on the map, the microsite directs users to a booking link where they can purchase flights to their desired destination as well as hotels for those partners featured on the map.