FlyUX: Prototyping & Wireframing

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 created a prototype to test with users, plus some wireframes to help pass over the project to developers.

“Arggh”

Helen Peak, whilst learning Axure

Project

Prototyping

Having sketched out all my intended interactions, I began creating a medium-fidelity prototype in Axure. Naturally, some elements were altered or removed as I worked, but the prototype remained reasonably similar to my sketches in Part 4. As Axure allows comments I added these in as I worked so I didn’t forget anything. These notes also proved helpful for for creating the wireframes.

You can try out my prototype using this link: https://xneg31.axshare.com. The password is “Artichoke”.

FlyUX Prototype: Homepage

This prototype allowed for testing with users, who thought it was easier than EasyJet’s or British Airways’ booking processes. However, I would gather a team to create a high-fidelity prototype for further testing before taking the design into production.

Wireframing

The high-fidelity prototype and final product would be built by developers who are experts in coding. I therefore created handover documents, which included the Information Architecture diagram and User Flow diagram (see Part 3). It was also essential to create wireframes which defined how the system:

  • behaves;
  • responds to actions;
  • communicates results;
  • helps fulfil user intentions.
FlyUX Wireframe: Date Pickers

My wireframes included the different screen states, not just individual screens. For example, on the luggage booking screen I needed to make it clear that the ‘continue’ button is actually labelled ‘cabin bag only’ when the user has not selected any luggage. Once luggage has been booked, the developers needed to change it back to ‘continue’. 

FlyUX Wireframe: Luggage Wireframe 1
FlyUX Wireframe: Luggage Wireframe 2

Although this handover documentation is useful, I would also sit and go through it with the developers and other stakeholders. The “extras” page would need very detailed discussion with marketing, legal and developer teams. The offers need to be affordable, legal, technically feasible and tempting. Personalising the offers is essential, so we would need any information we can find. Teamwork and thinking outside the box would be paramount.

FlyUX Wireframe: Upselling Screen

Conclusion

Although I’ve been creating and managing websites for years, it has been great to upskill with this UX course. Comments are welcome, either on my design or how I’ve presented this project. 

I’m going to do plenty more UX design. I intend to create the mobile app version of this booking process (when my workload allows). I’m also keen to fix my city’s bus ticket app, which is driving me crazy!

Previous: Sketching the interactions