FLY UX 

A project completed for the Professional Diploma in UX Design with UXDI

Project Brief

The client a fictional start-up airline called Fly UX

The goal create a desktop experience that is fast, forgiving, and intuitive; uncover user pain points and user goals, and deliver elegant solutions

The task focus specifically on the flight booking process: how users search for, find, and select flights online

The rules implement the full UX process:

Research AnalysisDesignPrototypingWireframing

 

The Details

Team

Mark Wilde

Roles

UX Researcher
UX Designer 

Deliverables

A Medium Fidelity Prototype
Comprehensive Wireframes

Tools

Figma
Miro

Duration

6 months  (part time)

The Elements of User Experience

Jesse James Garret

An essential reference for web and interaction designers the world over, defining the core principles of the practice.

Inmates Running the Asylum

Alan Cooper

Illustrates how talented people continuously design bad software and why technology should work the way average people think.

The Design of Everyday Things

Don Norman

A powerful appeal to good design and a reminder of how – and why – some products satisfy while others only disappoint.

Just Enough Research

Erika Hall

A detailed overview of common user research methods, along with practical tips for carrying them out.

Rocket Surgery Made Easy

Steve Krug

A small informative classic providing brilliant advice on conducting your own usability tests.

Don't Make Me Think

Steve Krug

One of the original books on website usability, with lots of material on heuristic evaluation.

The Mom Test

Rob Fitzpatrick

An insightful candid book on the importance of customer interviews and how to do them well.

User Story mapping

Jeff Patton

A technique that helps teams stay focused on users needs throughout the software development process.

Lean UX

Jeff Gothelf

This seminal book defines principles and methods for incorporating user-centred design and experimentation within agile product teams.

Sprint

Jake Knapp

A transformative formula for testing ideas. Go from idea to prototype to decision in five days, saving you and your team significant time and money.

Information Architecture

Rosenfeld, Morville, Arango

The definitive book on information architecture. A handy reference for anybody working with complex, content-rich websites.

About Face

Alan Cooper

Arguably the book that defined interaction design. Its principles are still as relevant today as they were 20 years ago. 

Microinteractions

Dan Saffer

The definitive how-to guide and reference book on designing effective microinteractions.

Simple and Usable

Rosenfeld, Morville, Arango

A quick and easy read, great to dip into whenever you need a reminder that simplicity is powerful in design.

Universal Principles of Design

Lidwell, Holdren, Butler

A beautiful, comprehensive book covering laws, guidelines, and general considerations paramount to successful design.

Wireframing Essentials

Matthew Hamm

A short book that provides a useful overview of the UX design process with a focus on wireframing.

Research

UX is a research-based discipline, if we aren’t doing research we aren’t doing UX

Competitor Benchmark Analysis

About

I used two well know airlines at either end of the pricing spectrum for the competitor analysis. For the budget option, I went with AirAsia, and for the premium option, Qatar Airways was assessed. Click here to view the benchmarks directly.

 

Outcomes

The analysis and subsequent note-taking resulted in 48 data points being gathered during the affinity diagram stage. The data was later represented through the customer journey map and helped shape the design process.

What core questions informed the analysis?
  1. How do best-in-class websites solve potential usability problems?
  2. What are they doing really well that we can emulate?
  3. What are they doing not-so-well that we can improve?
  4. What conventions have been established that we need to follow?
What was being assessed?

The Homepage

First impressions matter; a homepage should function well, look good, and feel good.

  1. What do they say about themselves?
  2. Is the proposition clear?
  3. Is the key functionality easy to access?
  4. How much of the functionality do they offer on the homepage?

Search and Select

This is the key functionality of the software, finding flights is the problem and users are trying to solve that problem.

  1. Are there any similarities or conventions apparent?
  2. What seems to be the most efficient way of doing it?
  3. Is it intuitive or confusing?
  4. What emotions does the process of searching and selecting invoke?

Entering Details

It’s paramount that users can enter their details quickly, comfortably, and as confidently as possible; to increase the likelihood of the payment being completed.

  1. How do users enter passenger details?
  2. How are the necessary user inputs presented?
  3. Is the process free-flowing or mentally taxing?
  4. How does the airline encourage them to register?
  5. How does the process of entering details feel?
  6. How is payment taken and confirmed, is it easy, or overcomplicated?

What where some of the key observations?

Homepage

AirAsia

  • First impressions, this brand doesn’t feel premium, but it does feel very affordable.
  • Should include flight booking functionality close to the top of the page, there is an option in the navbar, but it’s not enough.
  • Overall, a very plain design that doesn’t do enough to guide users towards making a flight booking, uninspiring.

Qatar

  • First impressions, this brand feels premium; expect the services to be excellent, and the prices to be expensive.
  • Appealing hero image with a message reminding users this is a brand they can trust, the learn more button is helpful.
  • Booking functionality provided right away, clean, well organised, and easy to understand. Options are clear, builds user confidence.

Search and Select

AirAsia

  •  Users must choose the ‘Flights’ option in the navbar to trigger the flight search process, it’s an extra step that may cause confusion.
  • The flight search form is quite small and very busy, there are some options that new users won’t understand (such as Snap?).
  • The flight results page uses a basic design, which is easy enough to understand, shows departure and return flight options together, useful.

Qatar

  • Strong upselling of premium services and exclusive benefits of the ‘Privilege Club’, can be offputting.
  • A red warning message appears when a user searches for unavailable dates, which breaks the calming mood, worse still, no alternate dates are offered.
  • User must restart the search, takes them out of the flow, causing frustration, users may go elsewhere.

Entering Details

AirAsia

  • Option to add another passenger before payment is very useful, no need to backtrack or restart the booking process.
  • Standard payment form – follows convention.
  • Seat selection is intuitive but has limited options, the user can’t choose an exact seat.

Qatar

  • Entering passenger details is straightforward and follows convention.
  • Overcomplicated payment/booking process, too many options and information about said options, which are mostly tied into the airlines premium services.
  • First-time users and those not using premium services will be frustrated with these extra steps.

Above – Section one of the AirAsia homepage analysis

Section one of the Qatar homepage analysis – Below

Benchmarking Benefits

  • Gain perspective on our performance compared with other websites
  • Exploration of solutions to usability challenges
  • Emulate what competitors do well, avoid what they do poorly
  • Gain knowledge of established conventions, which we can follow
  • Identifies improvements we can make in our design, strategy, etc.
  • Opportunity to develop a standardized set of processes and metrics
  • Promotes a mindset of continuous improvement
  • Helps clarify website performance expectations
  • Implement insights gained to outperform our competitors
  • Helps improve the quality of our products and services

Benchmarking Considerations

  • Identify and focus on competitor websites with similar goals, processes and flows as our product
  • Consider what metrics our competitors may – or may not – use to measure success
  • Apply and test what we learn through our design process
  • Be clear about purpose and goals, what is being benchmarked? Why?
  • It should be an ongoing process, not a one-off
  • Make it actionable – the process should result in actions that deliver real-world benefits
  • Prioritising insights that offer the most potential benefits

The Survey

About

I used a free account with SurveyMonkey to create the survey. I asked 10 questions and receive 36 responses. Survey link here.

Outcomes

15 data points were gathered and represented in the affinity diagram and later informed the customer journey map. These insights helped shape the design process. Also, I realised later that I’d missed an opportunity to ask users what device they preferred booking flights on.

  • travelling for pleasure – 95%
  • intended to book a flight on last airline website visit – 33%
  • Never pay an additional fee for seats – 25%
  • Always pay an additional fee for seats – 20%
  • Unable to complete task on last airline website visit – 17%

%

Prefer to book directly with the airline

%

Use a rewards program

%

Last visited an airline website to check prices

%

Last visited an airline website for a refund

%

Preferred to book with Aer Lingus

Survey Benefits

  • It’s a very time-efficient way to gather user requirements
  • Opportunity to ask both structured and unstructured questions
  • The results provide a good mix of quantitive and qualitative data
  • A large number of responses returns a large volume of data
  • Lots of quantitative data, unambiguous, can quickly be made sense of
  • It’s cheap, and can even be free

Survey Considerations

  • Ask a maximum of 10 questions and present them on a single page
  • Only ask genuinely useful questions, omit arbitrary questions
  • Always ask the 3 paramount questions:
    • Why did you visit the website?
    • Were you able to complete your task? If not, why not?
    • Could the website be improved? If so, what changes would you like to see?

Usability Testing

About

Due to Covid restrictions, the tests were run remotely using Zoom. I compiled a test script by altering a template I had access to. The script included an introduction and explanation of what we would be doing together, a depth interview, and a guide for the usability tasks to be carried out. I also included notes to myself, with regular reminders to maintain a neutral tone – so as not to influence the user’s actions or emotions.

 

Outcomes

The analysis of the notes taken resulted in 57 data points being gathered at the affinity diagram stage. The data was later represented in the customer journey map and informed all subsequent design decisions.

The Process

To prepare for the usability test I intended on using as part of my research, I carried out a practice test with a friend of mine. I wanted to uncover weaknesses in my interview style and consider possible amendments to my test script. This approach proved very beneficial as I was made aware of the following:

  • I was too informal and verbose at times
  • I didn’t clarify the rules well enough at the start
  • My script included too many questions about the homepage
  • As a result, the test ran for too long
  • On review, I realized I often didn’t maintain a neutral tone
  • I unwittingly encouraged the user at certain times when they expressed an opinion or carried out a microtask

With this new understanding of my potential weaknesses, I organised the official usability test. I had recently built a website for a client and he agreed to take part in the test. I screened him beforehand and was aware that he was a  regular flyer and computer literate. I made amendments to my test script and was mindful of the issues apparent in the first test. I was happy with how the test went and felt I had addressed the shortcomings I wished to avoid.

 

The steps involved

Interview flow

  •  Introduction and explanation of what we are doing
  • Ask the easy questions first
  • Ask about travel habits in general
  • Who do they prefer to book with? Why?
  • What device(s) do they use when booking? Why?
  • What steps do they take when booking flights?
  • Focus on a recent specific example
  • Explore this example in detail
  • Probe on any usability pain points uncovered
  • Recap on what was discussed and finish the interview

Avoid

  • Product questions
  • Leading questions
  • Hypothetical questions
  • Closed questions

Explore

  • What, why, and how questions
  • Past behaviours
  • Open-ended questions

User Testing flow

  • Explain the overall task to be carried out
  • Begin on the homepage, ask about the users initial impressions, how does it feel?
  • Invite the user to interact with the flight search form
  • Observe emotions and behaviours, ask questions, keep them talking
  • Invite the user to consider and interact with the flight results page
  • Observe emotions and behaviours, ask questions, keep them talking
  • Invite the user to consider and select their baggage options
  • Observe emotions and behaviours, ask questions, keep them talking
  • Invite the user to enter personal details and consider and select their seats
  • Observe emotions and behaviours, ask questions, keep them talking
  • To finish, ask the user about their overall experience, something good, something bad, and something insightful

Depth Interview and Usability Test

Key Insights

  • Uses Ryanair, Aer Lingus and Whiz Air Apps on his phone
  • Prefers Aer Lingus, uses their loyalty reward program
  • Travels for pleasure took five trips in the previous year
  • Uses Skyscanner to compare flights, prices, etc.
  • Mostly uses his smartphone when making a booking
  • Prefers booking directly with an airline through their website
  • Uses Whatsapp to communicate with friends, shares screenshots and flight information
  • Isn’t interested in information about deals or Covid-19
  • Understands all information and links on the search flight forms
  • Prefers to manually type airports, says it’s quicker than scrolling
  • Prefers using date picker calendars, doesn’t like typing dates manually
  • Some confusion when choosing a return date, he felt it wasn’t clear how to proceed
  • Confident around baggage options, it’s a smooth process
  • Difficulty explaining current total flight costs when asked, he didn’t see it on the screen, this caused frustration
  • Quickly figures out what the ‘Price Lock Flights’ option is for, but he’s not interested
  • Didn’t like upselling of insurance, finds upselling frustrating, mentions Ryanair as the worst offender
  • No issues entering personal details and choosing seats, finds it straightforward
  • Thinks the Covid-19 information banner ‘is a little bit tacky’
  • Understands all links and information on the search flights form
  • The date calendar opens automatically after airports are selected, useful
  • Quickly chooses dates from the calendar, found it easier to do compared with Aer Lingus
  • Likes that he doesn’t need to move the cursor, the next option is highlighted automatically when the previous option is selected
  • Thinks the page is ‘a bit cluttered looking’ beneath the flight search form
  • Opens and understands the information presented in the stopover popup box, and closes it with no issues
  • Thought the two outgoing flight options displayed were just one flight with a stopover included
  • Confides that he was quite confused by how the flight options were displayed
  • Thinks that there’s too much information being presented at times, which leads to human error, says he has experienced this himself

‘There is a lot going on’ (regards information and options on the choose flights page), ‘it’s a little bit confusing’

User Testing Benefits

  • It’s a very time-efficient way to gather user requirements
  • Not expensive, not complicated, does not require a scientific environment
  • Presents users’ experience, our most important potential stakeholder
  • Presents the product from a users perspective
  •  Unites the stakeholders behind a common cause, clarity about the users goals and experiences
  • Can bring a team together, creates purpose, optimism and confidence
  • Produces a variety of user data that challenges or validates assumptions
  • Helps build consensus and avoid feature debates
  • We can find out about secondary and tertiary goals as well as primary goals
  • It is essential we know about our users’ goals, behaviours, and context; no users means no product

User Testing Considerations

  • Don’t take what they say as fact, observe how they interact with the product
  • What are users trying to do? (goals)
  • What are users actually doing? (behaviours)
  • In what context are they doing it? (environment)
  • How is our product helping them achieve their goals?
  • How is our product hindering them in achieving their goals?
  • How does our product facilitate common behaviours? (mental models)
  • What are the most significant user pain points?
  • How does our product compare to our competitors?
  • Is our product desirable?
  • Is our product solving a problem?

Note-taking

About

I was provided with and took notes of two usability test videos, which were carried out by a UX researcher at UX Design Institute. Each video included a depth interview and user testing of two airline websites. The focus was on learning about user goals, behaviours, pain points, mental models, and contextual information. I took additional notes later when I ran my own usability test.

 

Outcomes

I compiled structured, concise and detailed notes which paid particular attention to positive and negative user experiences and general insights. These notes were colour-coded to assist with ease of reading and draw attention to what I felt were some of the most important observations. There were 156 data points gathered from the notes when creating the affinity diagram.

Some of the notes taken

View all notes here

Note-taking Benefits

  • Creates a bank of insights that informs all subsequent steps of the UX process
  • Organises and emphasises salient research findings
  • Improves understanding and knowledge of the research being documented
  • Affords patterns to emerge in the data gathered, which can be further investigated
  • Can be shared across diverse teams to get them up to speed with the test findings
  • Provides an entry point for discussion and debate on what direction the project should take
  • Can be used for stakeholder onboarding, gives stakeholders quick and direct access to user experiences

 

Note-taking Considerations

  • Note-taking is a core UX skill, it’s mandatory and essential to the UX process
  • Highlight any key insights, anything that can inform design decisions later on
  • Capture exactly what the user said and did rather than interpreting, avoid personal opinions or biases, these can be explored later in the process
  • Avoid filtering, document all information present, not just information relevant to our product or feature, This approach lends itself to capturing users needs and behaviours that could shape our product down the line
  • Be mindful about ensuring consistency in the note-taking style, implement an agreed format such as colour-coding to represent category types eg. red for pain points
  • Capture insights separately, don’t write paragraphs with several ideas, instead, keep notes in sequence when they go together

Analysis

‘A perfect formulation of a problem is already half its solution’ David Hilbert

Affinity Diagram

About

Due to Covid restrictions, I was unable to collaborate on this project. I had a lot of data and would have needed someone to review everything and spend a day working with me online, it wasn’t possible. Although I took an unconventional approach, I learned a great deal. I look forward to collaborating with colleagues in the future. I used Miro to create the affinity diagram.

Outcomes

By going through the process detailed below, patterns unfolded as the data was organised and refined. The unstructured data was transformed into structured, meaningful data. Actionable insights emerged throughout the process and there were many obvious considerations on completion of the diagram. The diagram was sequenced so that its groupings represented steps in the user flow of booking a flight, this was done so as to benefit the next stage of analysis, the customer journey map.

The Process

  • I took my time creating the affinity diagram as I wanted to learn as much as I could
  • I gathered and analysed all the data from the competitor benchmarks, the survey, and the notes from the usability tests
  • I wrote data points on post-its and added them to the whiteboard
  • I grouped related post-its together and gave the groups meaningful titles
  • I broke large groups into smaller groups
  • I sequenced the steps the user takes, with the customer journey map in mind
  • I sub-grouped some steps into 3 parts, as they are the same step with contrasting information
  • In the centre of the diagram, I placed groups that relate to different aspects of the customer journey but weren’t a step in themselves
  • In the UX wins and UX fails groups there is some data that could be presented in 2 or possibly 3 of the other groups
  • The buttons/popups/goal dependent groups are each also relevant to several different stages of the customers’ journey
  • So with some post-its being relevant to more than one grouping, I put them where I felt was most appropriate, and made a note of it; so that no data would be overlooked
  • All relevant groups were reviewed where appropriate, at each stage of the customer journey map creation
  • For each group (stage) in the 6 to 17 range, I reviewed the centre groups of A-E to pinpoint and include any relevant data therein
  • I had considered coding post-its relevant to 2 or more groups by including  group identifier code(s) on each relevant post-it, ultimately, I deemed it unnecessary 
  • As it stood, I was aware of all post-its that had extended relevance, all of which were considered when creating the customer journey map

How it Happened

The Final Result

Affinity Diagram Benefits

  • The best tool for organising unstructured data derived from user research
  • Harnesses the power of collaboration to organise data quickly
  • Helps build a shared unserstanding and a shared vision among team members
  • Great tool for improving team communication, innovation, and planning
  • A powerful tool for brainstorming ideas, analysing ideas and finding consensus
  • Fast analysis resulting in high-quality output
  • Opportunity to get stakeholders involved, and increase stakeholder buy-in
  • With the affinity diagram, we can get through a huge amount of work in just one day, when working with a team

Affinity Diagram Considerations

  • Remember – identifying patterns is an art, not a science
  • Don’t despair when you find yourself awash with data at the outset, unsure how to proceed. That’s the process, everyone feels like this
  • Putting the research data together is a messy process, it can be painful and confusing, especially early on
  • Getting all the data together, comparing, and finding patterns and insights is critical to creating top-class designs and building good software
  • Analyse, analyse, analyse! The patterns emerge,  through hard work, critical thinking, observation, concentration and triangulation
  • It’s very hard for one person to get through all this data solo (I know myself!), in a timely fashion, and produce high-quality data

Customer Journey Map

About

The affinity diagram was referenced extensively throughout the process of building the customer journey map. I selected for the most common user journey experience, defining each step in the process. While there was an extra focus on pain points (to highlight high priority issues), user goals, behaviours, the context of use, and positive aspects of the user experience were also documented and were integral to the final map. I used Miro to create the customer journey map.

Outcomes

A clear, structured, comprehensive, visually appealing, easy to understand representation of the most common user experience inherent in the analysis. All the research carried out and all the data gathered and interpreted up to this point was condensed into a highly accurate, illustrated user journey; which best captured the most common user experience patterns seen in the data.

The Process

  • I referred to the affinity diagram and formulated the steps of the customer journey map using its sequenced groupings as a guide
  • I chose five categories to document and represent in the map:
      • User goals
      • User behaviours
      • Context of use
      • Pain points – which were given extra emphasis, due to the importance of addressing them in the design stage
      • Positive experiences
  • I filled out the categories for each step by carefully considering the data in the sequenced groups in the affinity diagram
  • I added user quotes to most of the steps, to quickly communicate information I considered important
  • When all data points had been added across the chosen categories, I made an assessment of whether the experience was positive neutral or negative for each step of the process
  • I used 5 types of emoticons to represent positive, neutral and painful experiences
  • The emoticon that best described each step overall was used
  • I drew a line between each emoticon to show how the experience was changing across the steps in the process
  • I was mindful throughout that the end goal was to accurately represent the booking process through the experience of our users

 

How it Happened

The Final Result

Journey Map Benefits

  • It’s a brilliant tool for seeing things through the eyes of an outsider
  • Visualises what the customer experiences as they interact with our company, our service, or our software
  • Can be used for stakeholder buy-in as it’s easy to understand
  • Makes an appeal to emotions which facilitates discussion, easy to share with colleagues and gets them thinking about the user
  • It highlights aspects of the journey that need to be fixed as a priority
  • Analogous to winning multiple battles to win the overall war
  • See things from a wider context,  leads to insight and possible design decisions that address that context
  • It’s reliable and factual, everything on the journey map is based on patterns we have seen when analysing our research data
  • It’s a great way to represent our software through the eyes of our customer

Journey Map Considerations

  • A natural and beneficial next step on completion of an affinity diagram
  • Be mindful that within the journey there are steps and smaller sub-tasks that need to be accomplished to meet the overall goals
  •  Not every step in the flow will involve an interaction with our software – but it’s worth documenting every step for context of use
  • It’s more art than science, chosen categories won’t be relevant to every step in the journey
  • Some stages will have conflicting data, a mix of emotional experiences – go with the emotion that appears most pronounced across the data points
  • Consider favouring negative emotions, as we are looking for pain points that we can design solutions for – we can learn more from a user’s poor emotional and practical experiences
  • Nonetheless, keep note of the positive experiences and what has been done well, as we can also use these good experiences to inform our design

Design

‘It’s easy to be different, but very difficult to be better’ Jonathan Ive

User Flow Diagram

About

The transition into design mode: define one high-level flow from searching for flights through to payment details. Solve our users’ problems by addressing and fixing issues uncovered during the research, which has been highlighted in the affinity diagram and illustrated in the customer journey map. I used Miro to create the user flow diagram.

Outcomes

  • I designed a high-level flow for one primary use case
  • I addressed the most salient issues present in the analysis phase, specifically the custom journey map
  • I used the completed user flow diagram as a constant reference point in the interaction design phase
  • I gained deep knowledge of how users would flow through the booking process before I started sketching my website design
  • It was excellent preparation for formulating interactions details and navigation/information architecture considerations

The Process

I started by doing some research online to consider different user flow diagram styles, and get some ideas on how I wanted my diagram to look and function. My priority was that it should be intuitive, easy to understand and use contrasting colours to differentiate the steps in the flow so that it can be scanned through quickly.

I spent time reviewing the affinity diagram and customer journey map, there was a primary focus on addressing user pain points in each step, especially the ones deemed high priority, while also emphasising positive aspects of the user experience documented throughout the analysis.

I designed the screen states and actions step by step and had a very clear idea of what I wanted to accomplish – what the ideal flow would be for a good user experience. I kept rough notes/sketches for each step and used Miro to build the diagram.

I settled on using rectangles for screen states and  circles for user interactions. I explained and supported my decisions through the accompanying annotations. I also used the annotations to help guide me when I began sketching in the interaction design phase.

How it Happened

The Final Result

Flow Diagram Benefits

  • User flows are the fastest way to visualize a process
  • More easily communicate what the user flow should be
  • Make sure you don’t miss important steps in the process
  • Make decisions and changes at low fidelity before investing time in design
  • Get quick feedback from different stakeholders
  • Can show all possibilities and reveal all the paths in a single picture
  • Easy to understand flow diagrams present and visually and explain in words and pictures relations in the designed solution
  • Address all the little details now, and save time later, a great foundation for subsequent design decisions
  • Gives stakeholders and various team members an accurate, understandable picture of progress through the creation stage
  • Visualizes all tasks before  interaction design begins

Flow Diagram Considerations

  • It is not an arbitrary process, all preceding data should be analysed and inform the process
  • Keep in mind, who is the user? What is their goal? What are the steps the user needs to take to achieve their goal?
  • Determine company objectives and user objectives – we can’t give directions if we don’t know the destination
  • It’s essential to take the preceding steps of creating an affinity diagram and customer journey map, to base the user flow diagram on
  • Consider the information our users need and when they need it, information should be in the right place at the right time
  • Gather feedback across the team and with stakeholders, make iterations as required

Interaction Design

About

The work for understanding and articulating the problem(s) found in the user experience of interacting with airline websites has been carried out. It’s time to get into solution mode and start solving the problem(s). I went through several iterations of many aspects of the design before settling on the final annotated sketches.

Outcomes

  • I sketched from the homepage to the payment page, regularly consulting all the data previously gathered
  • I implemented a simple, usable navigation style that followed convention
  • I addressed all the issues identified in the research
  • I used the user flow diagram as a foundation to build on
  • I considered the sketches as a process of problem-solving, a vital step before creating a prototype

The Process

  •  My goal was that users should flow through the flight booking process as smoothly as possible, in as few steps as possible – keep the user in the flow and don’t make them think
  • I prioritised the user at every step of the booking process, rather than potential business goals of the airline, this meant less focus on airline premium services and less upselling of extras such as insurance and car hire
  • I wanted to keep the number of clicks the user had to make to an absolute minimum, to get the user from the start to the finish as smoothly and friction-free as possible
  • I implemented automatic selection of the next field when the current field had been selected for, eg. the outgoing date field is highlighted and the date picker menu opens immediately when the destination airport has been selected
  • I followed all the design and input field interaction decisions I had made in the user flow stage by carefully visualizing the screen states and reading the annotated notes
  • I tried to explain details in as few words as possible so as not to crowd the page and take the user out of the flow; links or icons or buttons were provided where appropriate, so the user had the option to read additional information if they wished
  • I tried to make the process forgiving so that a user could easily go back a step or change inputted details without having to restart the booking process

Final Annotated Sketches

Interaction Design Benefits

  •  It’s a very efficient way of communicating design while allowing designers to try out a multitude of ideas and iterate them before settling on one
  • Encourages idea generation – consider different approaches and decide which is the most efficient in the context of your task and the various constraints of the project
  • We can add details and refinement step by step, settle on a few promising variants and proceed to work out the specifics, thus rendering some ideas unsuitable
  • Bring your research insights into life by using sketches to visualise your design decisions
  • Sharing sketches enables both collaboration and creativity across the whole team, resulting in a shared understanding
  • Saves money and time, see what works well or not, before building a prototype

Interaction Design Considerations

  • Sketches are a problem-solving tool first and foremost focus on your sketches being efficient rather than beautiful
  • Sketching is about getting ideas out and reviewing those ideas, as long as your sketch can convey your idea, it’s a good sketch
  • Sketches don’t need to be pretty. Focusing on making your sketches look like professional illustrations is a waste of your time, energy and money
  • Don’t expect to get it right the first time – we will need multiple iterations of the sketches before we start to see the solution become apparent
  • After which a few more iterations will be needed, before we can add the finishing touches
  • Consider defining the rules and feedback for each control on your  final sketch iterations, even a rough idea of how these work now will save a lot of time when we get into more detail later

Deliverables

Prototypes and wireframes often get used interchangeably, but they are different tools with different purposes

Medium Fidelity Prototype

About

With much of the solution already defined through the flow diagrams and sketches, it was time to add more detail in the form of interactivity. I felt that a medium-fidelity prototype provided the necessary functionality and contained enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions.

Outcomes

  • Implemented the main user flow and made it an interactive experience
  • Further developed the websites layout, hierarchy and navigation
  • Created and tested copy and labelling
  • An opportunity to see what my design decisions feel like
  • Simulated a working product, tested basic interactions
  • Lots of ideas for creating a design library and how the final UI might look

The Process

  • I regularly referred to the flow diagram and sketches throughout the creation of the prototype
  • I settled on using Figma as the design tool as it’s fast and intuitive, I was able to create all the screens, components, wireframes and the prototype in the same workspace
  • Building the screens began in a rudimentary fashion, they were low-fidelity and became medium-fidelity throughout the design process and several iterations
  • I created a components library throughout the process, but it was basic and disorganised, I was learning as I was doing, I intend to improve on this in subsequent projects
  • I was mindful not to overdo it on details outside of the primary flow and to stay focused on the pertinent interactions and design issues uncovered earlier
  • I made improvements where appropriate throughout, such as using white space efficiently and incorporating meaningful text and labels
  • As such, I wrote as much as the copy as I could to give it a more realistic feel, so that it reflected what the finished product would look like

The Medium Fidelity Prototype

Figma embeds work best on larger screens, on smaller screens open a new page to avoid errors or loading issues

Prototyping Benifits

  • Prototypes are a critical part of the design and development process – they simulate a working product and the interactive experience therein
  • It allows the product to be tested with users
  • Test if the product works and solves the problem(s) before we commit to building the solution
  • Efficiently communicates design ideas and solutions to stakeholders and team members
  • Helps improve the quality of designs by identifying issues before the actual build – reducing time and money costs
  • Reduce the risk of building a product nobody wants, needs, or can use
  • Helps validate or invalidate product assumptions – enables better decision making across the team
  • It’s a valuable political tool – use it to get feedback and buy-in from stakeholders
  • It’s an aid for managing our stakeholders, it communicates design ideas clearly, particularly to groups or individuals who may be far removed from the design process
  • Reduces ambiguity, unnecessary opinion-based debate, and design by committee
  • Finally, a well-executed prototype can be an opportunity for you and your team to showcase some design flair

Prototyping Considerations

  • Prototypes are a preliminary model, from which other forms are developed – its a work in progress – the first draft of a solution, used to draft another solution until a final draft is decided on
  • Design iterations should be based on user testing until we have a version that we’re happy to release to our customers
  • Great experiences don’t happen by accident, painstaking attention to detail is involved, and a strong adherence to the process
  • Most of the best interfaces we see online are the result of countless hours of designing, testing, refining, and redesigning – we need to emulate this
  • Prototyping plays a central role in this fine-tuning process – it will take several iterations until our design is deemed ready to be built
  • Sometimes stakeholders need to be educated or reminded about the benefits of design – prototypes serve this purpose very well
  • When choosing the fidelity consider your resources, skill level, time constraints, the audience, and what needs to be tested
  • Use a low-fidelity prototype to explore broad concepts and mental models, and find out if users have a positive experience with your product
  • Use a medium-fidelity prototype to do deeper testing with users, communicate with stakeholders, and gain richer data and insights
  • Use a high-fidelity prototype to convey rich interactions such as maps or other data visualizations, get stakeholders on board, and collect the most data and insights possible, outside of a real website

Comprehensive Wireframes

About

At this stage, I have finished my design loop, prototyped my designs, and iterated to the point that I’m happy with the solution(s). Part of this transition from design to build is to communicate clearly to our developers exactly what we’re going to build. That’s what wireframes do.

Outcomes

  • The wireframes contain annotated notes that define the functionality and behaviour of how the product should work.
  • I defined how the system behaves
  • I defined how it responds to actions
  • I defined how it communicates results
  • I defined how it helps fulfill user intentions

The Process

  • With the wireframe screens completed via the prototype, I started considering the elements and interactions that needed to be defined
  • Being aware that development is a timely, often difficult undertaking; I understood that I needed to support this process by describing in detail every aspect of the product and the elements therein
  • I was mindful of being very consistent in my description of the elements and interactions throughout the annotation process
  • Users are familiar with and have expectations around elements behaving in a certain way, as such, I implemented rules and behaviours that reflected the most common mental models – I stuck to the norm
  • I paid significant attention to defining the behaviour of input fields, endeavouring to answer the following questions:
      • What are the rules of how it functions?
      • What happens on enabled, disabled, hover and selected states?
      • When an interaction occurs does anything happen to other elements?
      • Have all the use cases been considered?
      • Does it change based on device type?
      • Have all errors been considered?
      • Has feedback for all errors been defined and described?

I continuously revised and updated the annotations throughout the process. On completion of the wireframes, I read them forwards and backwards several times, from start to finish,  to find small errors and typos that I had overlooked; and to spot and address differences and inconsistencies in describing certain elements, which I then amended.

 

The Completed Wireframes

Figma embeds work best on larger screens, on smaller screens open a new page to avoid errors or loading issues

Wireframing Benifits

  • Wireframes are analogous to an architects blueprint, they tell developers how everything works
  • It’s a tool to precisely communicate what the product is and how it should be built, the properties, the materials, and so on
  • Clearly communicate to our developers exactly what we’re going to build
  • Wireframes provide annotated specifications, specifying controls, rules, and feedback, cutting out any guesswork by the developers
  • Wireframes come at the very end of the design process, they enable a smooth transition from design to development in a product life cycle
  • Wireframes contain annotated notes that define the functionality and behaviour of how the product should work
  • Opportunity to see exactly how the final content, copy, and text will look and function

Wireframing Considerations

  • Essential when building complex software applications – give clear guidance on what is to be built
  • Wireframes need to be effective rather than beautiful
  • Not suitable for testing – they are static and lack interactivity
  • Without them, key parts of the product may not be developed properly
  • Be obsessive with error checking and have another term member scrutinise the wireframes before the handoff to the dev team
  • Sit down and talk with the dev team about the wireframes to build a shared understanding – ask and be open to constructive criticism
  • Be open to changing certain rules or altering certain elements in the wireframes – as long as it doesn’t break the user flow or impact the user experience negatively
  • Due to various organizational constraints, something might take too long to develop in the way you’ve described it – be open to altering an element and supporting the dev team, when appropriate

What I Learned

Problems

UX is a problem-solving discipline. It’s about understanding users’ problems and designing software to help solve those problems.

Process

UX is a process and the process is sacred. Adherence to the process reduces the risk of building unnecessary software and the risk of project failure.

Research

UX is a research-based discipline, you can’t solve people’s problems if you don’t know what those problems are. If you’re not doing research you’re not doing UX.

w

Qualitative

Qualitative research is more valuable to UX designers than quantitative research. It provides richer insights into users’ goals, behaviours, and context. If you’re solely relying on quantitative data you’re not really doing research.

Purpose

Users don’t care about our software products, they only care about what the product can do for them. They want to flow through our software as smoothly as possible and get to the other side: the job done, the problem solved.

Risk

The entire UX process is a tool for minimising risk. It minimises the risk that we waste time, the risk that we waste money, and the risk that we build poor quality products.

What I Earned

I received a final grade of 93%, click here to view grading and feedback