Client Cocus   Role UX/UI
Cocus challenged me to redesign two screens of their new app for a travel agency client. The app is used in several different countries including the UK. It is built on a single codebase that can be tailored to suit a broad set of markets and brands.
The app allows users to explore what the agency has to offer and book new products such as holidays, flights, and excursions. Customers with an existing booking can access this through the app to find details of their trip including itinerary, boarding passes, destination guides, and travel advice.
Brief
We would like you to look at TWO SCREENS we have in the app and consider what an improved version of each screen might look like. You may wish to consider:
Screen 1 / Trip dashboard

CONTEXT
This screen is presented to users when they access their holiday bookings.

PURPOSE
This screen should provide simple access to a wide range of information relating to a customer’s trip.

RELEVANT INFO
The amount of information on-screen depends on the type of booking each user has. More features are added to the screen, turning it longer and less manageable. It is important to create a flexible design approach to simplify and improve the user’s experience. 
Screen 1 / Older Version
Screen 2 / Itinerary

CONTEXT
This screen is accessed from the trip dashboard.

PURPOSE
Outline all the main events throughout a customer’s holiday that collectively form their itinerary.

RELEVANT INFO
Customers can click on each item in the itinerary to access more details (e.g. tapping into the hotel section reveals a hotel guide that outlines the facilities available at that hotel).
Screen 2 / Older Version
1. RESEARCH

1.1 COMPARATIVE ANALYSIS
Based on a comparative analysis with direct competitors, a current dashboard list of problems was defined:
• Lack of hierarchy
• IA Problems (Information Architect)
• Unintuitive Navigation
• Uninviting CTAs
• No visual contrast (color, type, alignment)
• Imperceptible
1.2 USER INTERVIEW
For qualitative analysis, I interviewed some users aged 28 to 50 and observed some common user habits.

Questions
1. After buying your trip do you use your travel app to access your trip information?
2. What information do you consider most important to get in the travel app?
Based on the information collected from the users’ interview, here is a summary of the most relevant info:
2. DEFINE / CARD SORT
Creation of a Card Sort, organized by topics, to define the design and the information architecture.
Identification of the topics by similarity and relevance:
Management of similar topics and categories to simplify the copy.
Finally, based on the Card Sort definition and the user’s interviews, creating a new structure to manage the dashboard features hierarchy.
3. DESIGN
3.1 PAPER PROTOTYPE
Sketches of the dashboard solutions.
3.2 WIREFRAMES
Based on the new dashboard sketches, to validate the ideas before the final design, I created the low-fidelity wireframes.
The hierarchy must be well defined and clearly visible.
3.3 MOCKUPS
After validating the low fidelity wireframe, an update of the final dashboard mockups with visual design elements.

SCREEN 1

The most important features were:
• Focus on the color to highlight the main CTAs.
• Color and visual styles to differentiate the sections.
• ‘Contact’ button highlighted at the top of the screen.
• Generally the icons are added to the buttons.
• When the customer makes a reservation, the icon changes, and some features adjust to the context of the reservation.
• If the customer only books a flight, the copy changes from “hotel” to “find hotel”.
SCREEN 2

The main problems detected on screen 2 were:
• Unintuitive Navigation
• Uninviting CTAs
• No visual contrast (color, type, alignment) 
• Imperceptibility

The proposed solutions:
• Highlight the main information
• Contrasting CTAs
• Information organized by card design. 
• Applying the same styles used on the dashboard (screen1). Styles must be coherent across all pages.
Thankyou

You may also like

Back to Top