Brief

I completed this project for my Professional Diploma in UX (User Experience) Design with the UX Design Institute. The brief was to research airline websites or apps then develop a new user interface that tackled the problems faced by users. As the project is long I’vebroken this case study into five sections. This section focuses on how I developed the user flow, navigation style and Information Architecture of my proposed website.​​​​​​​

“I don’t know where I’m going now… “

Iain Shaw, Usability Test Participant

Project

Desktop User Flow

I find that post-it notes are very useful for defining Information Architecture and User Flow. You can easily add and remove items until you are confident you have the essentials and nothing more. I left these stickies on my wall for several days, rearranging them as things occurred to me (usually after a shower). I then created the User Flow diagram in InDesign.

Information Architecture & Homepage Navigation

After playing around with Post-it notes as above, I was confident enough to begin sketching out the home page. I was also working through the linear booking process at the same time (see below). My initial sketches are pretty illegible to anyone else, but they did help me think through the process.

British Airways had a simple Information Architecture that covered all the tasks identified during the research phase, so I reflected this on the global navigation bar. I also proposed including elements of Kayak’s map-based search for flights (although developing this in detail was not part of the brief). In short, I developed a navigation style including a global navigation bar and content-as-navigation for the home page.

I sketched out several options for combining the booking functionality with a date-picker modal box. I chose EasyJet’s sliding drawer option (above) as it can easily show several months at once. This is handy when your possible travel dates are towards the beginning or end of a month. It also allows viewers to still see the details of their booking on the left. This could be important if you’ve been interrupted during the process and need to remember where you left off.

Flight booking process navigation

Again I began by sketching out alternatives for each screen and screen state of the flow. For the second iteration, I created a printed ‘template’ featuring the universal elements of each screen. This speeded up the sketching considerably and let me focus on the specifics of that screen.

The screens began to look too cluttered, so I moved the progress indicators onto the bar above, resulting in the sketches below:

On discussion with fellow designers, I removed the “home” button as this might distract users from completing the booking. We also thought a budget airline would not want to invest in Live Chat at all times, since this increases staff costs. 

Conclusion

These sketches helped me think through the booking process. They were also very useful for getting detailed feedback from friends and fellow designers before creating the prototype.

Previous: Analysis of user research
Next: Sketching the interactions