skip to Main Content

1. Overview of project

A research organisation with long-term working relationships with communities needs a website for a new citizen journalism project. The goal was to create a simple website that allows the reader to engage with the project content in an intuitive and pleasurable way. In this case study, I show how the iterative UX research and design process is a systematic and rigorous approach to solving a design problems that can be scaled to fit a project scope and its limitations.

Duration: 2 months

Design target:
A

Design goal:
A

Proposed solution:
A

Proposed measurement:
A

Design target:
A

Design goal:
A

Proposed solution:
A

Proposed measurement:
A

1.1 Client

Africa Centre for Society & Migration
This is Africa’s leading scholarly institution for research and teaching on human mobility dedicated to shaping global discourse on human mobility and social transformation.

1.2 Practices

User Experience Designer
 (UXD)
UX Research
UX Design
UX Writing

1.3 Tools

Zoom
Google Hangouts
OBS Studio
Pencil, pen and paper
Figma
PowerPoint

Process and methods

Research
Competitive analysis
Interview
Usability test

Analysis
Affinity diagram
Persona
Customer journey map

Design
User flow
Sketching user interaction

Prototype
Medium-fidelity prototype
Interview
Usability test

Handover
Wireframe

This project followed a full UX process starting with identifying the user problem. In the user research phase, I conducted a competitive analysis, interviews, and usability tests to gather usability data on user goals, behaviours, contexts, pain points and mental models. During the analysis phase, I employed an affinity diagram, persona, and customer journey map to structure user data according to categories and sub-categories. I used the outcomes of the analysis to create a problem statement and high-level recommendations which guided my designs. I first designed a workflow for a primary use case, then the site’s interaction design using sketching. I used the designs to create a low-fidelity prototype and then a medium-fidelity prototype. After validation through interviews and usability testing, I created wireframes.

2. Research phase

In the user research phase, I conducted a competitive analysis, interviews, and usability tests to gather usability data on user goals, behaviours, contexts, pain points, and mental models. I looked at the goals, contexts, behaviours, mental models, pain points, and good points of people who frequent online newspapers and blogs, and I identified patterns that are commonly used on these types of sites.

2.1 Competitive analysis

The precedents I looked at were the Pandemic journaling project, Humans of New York, Humans of Bombay, The Moth, The New York Times, and The Guardian. The research focussed on the homepage, contributor pages, story pages, about page, and social media pages. I wanted to see how images were used, how the text was used, and the information architecture, navigation, and user flow that underlined the site design. 

Objective:

The competitive benchmark was aimed at helping us know what other comparable storytelling sites were doing, how they were solving problems, and what design patterns were consistently used on these sites. Understanding what was happening on other sites was critical in giving early direction for further user research for our new site.

Results

  • An inconsistent main menu makes it hard to get to the stories.
  • An overly complex menu it difficult to find stories and features.
  • Having no categories makes it difficult to find stories.
  • Too many similar labels make it difficult to navigate.
  • A somewhat hidden search function makes it difficult to navigate.
  • Individual story pages help focus content and improve readability.
  • Layout, images, and typography can improve readability and interest.
  • Ease of navigation is really important for a site that has many stories.

2.2 Interviews

My interview script focused on job information, device and connection types used, news and blog website and app usage, how the interviewe normally found interesting stories, and a recent experience finding a story online. I recorded the interviews and made detailed codified notes.

Objective:

The interviews were aimed at understanding reader’s goals, contexts, behaviours, pain points, and mental models. Interviews with readers would help me understand online reading habits like how readers find stories that interest them, and on what devices they tend to read different types of content.

Results

  • A

2.3 Usability tests

I conducted usability tests on blog-type storytelling media sites: the Pandemic Journaling Project, Humans of New York, Humans of Bombay, and The Moth. I was focused on testing the information architecture, the main navigation menu and the search function. I also looked at what in the presentation of stories made stories intriguing enough to click into and read. The most pertinent usability issue I uncovered was that it was difficult for users to find the location of the stories, and to find relevant stories. I recorded the sessions and took notes which I categorised in terms of pain points, good points, behaviours, and mental models. 

Objective:

Before being able to design a site for the stories I needed to understand what the user experience was like on other media sites. The aim of running usability tests at this stage of the project was to further benchmark user experience on precedent sites. I wanted to see how users navigate the homepage, what they do to find stories, what they do to find specific stories, and what other goals they had.

Results

  • Homepage does not give enough context
  • Unclear main menu and IA
  • Main navigation bar is not consistent
  • Does not know current location in website
  • Not immediately clear where stories are posted
  • Lack of organisation of content
  • Layout grids are not consistent
  • Too much information on a page
  • No themes, categories, or tags for stories
  • Too broad categories to be useful to find stories
  • Did not see a small top-left search button
  • Filters does not narrow down stories
  • Little info on authors and their lives
  • Little project info and context
  • Distracting titles or images
  • No titles, and bold fonts inside paragraphs
  • Feature image was duplicated in the body
  • Unclear where stories start and end

3. Analysis phase

The research created a large volume of qualitative data about air travellers and their experience of the online booking process. This raw unstructured data still needed to be transformed into actionable insights. The methods used to help make sense of this raw data were the affinity diagram, empathy map, user persona, and customer journey map. By the end of the analysis phase, a coherent story through those data points was evident: I could clearly state the user I was designing for, and I understood and could articulate the problem I intended to solve for this user type.

3.1 Affinity diagram

The affinity diagram process made clear that the site should be designed in a way that allows easy navigation to stories, authors, and project information. The affinity diagram made clear that the precedents had many usability issues that prevented users to find and read stories, or find more information about authors and the project.

Objective:

I chose to employ the affinity diagram method at this point in order to structure the raw research data along key categories and subcategories that could be useful to the project. My aim was to make apparent, through the transformation of data into knowledge, a range of usability problems, user behaviours, contexts, goals and expectations, as well as useful design patterns.

Results:

  • Primary goals of users are to find and read stories
  • Readers also want enjoyment or interest in the stories
  • Secondary goals are to find out more about the project, or authors
  • Some users might  with the organisation, or share a story
  • PC and mobile devices would both be used to find and read stories
  • Complicated or unclear navigation prevented users from finding stories
  • A lack of organisation or categories also hindered navigation
  • The search function was used if users wanted to find specific stories
  • Story headings, blurbs, and images create interest
  • Participant bios were important in creating credibility
  • Readers sometimes shared the story, but usually via URL
  • An about us is focussed on people, with links to organisations

3.2 Persona

The blog will draw casual, advocacy, and research readers on both desktop and mobile devices. The primary goals of our users are to find and read stories. Overlap in the goals of our users made it possible to create a persona that incorporated ideas into a single user type. 

Objective:

In order to start working towards defining specific problems on specific user flows, we still needed to pin down the idea of the user we were designing for. A persona could help us understand user needs, experiences, behaviours and goals. This persona would help guide the customer journey map, and subsequent ideation.

Results:

  • A use case for a semi-regular flyer
  • Buys tickets for themselves and others
  • Familiar with the flight booking process
  • Wants transparency in the fare and extras offerings
  • Has some baggage requirements
  • Compares flight options for best value
  • Price, then date, and then time impact decision

3.4 Customer journey map

The customer journey map enabled us to highlight specific problem areas in the user flow and prioritise areas of the user experience. The quotes, goals, pain points, behaviours, good points, and noteworthy mental models would be a useful guide in the design phase.

Objective:

A customer journey map was useful to show how users find and read stories and navigate through the site. The method would enable us to highlight important patterns identified in the affinity diagram and persona and show where improvements to the user experience could be most beneficial in a user flow.

Results:

  • A

Articulating the problem to solve

Design goal:
A

Design target:
A

4. Design phase

The research and analysis were specific but only gave hints at how to solve the identified design problems. It was still necessary to come up with a coherent solution. During this phase, I switched from understanding, articulating and defining the usability problems in airline booking processes to offering potential solutions to these problems. Conceptualising the high-level flow through the system and creating the interaction design for the system helped create potential solutions. I came up with many possible design solutions, and by the end of the process, I had a well-defined design solution ready for prototyping.

4.1 User flow diagram

The user flow starts at the story level of a social media post which links to a story page and moves to the author’s bio and another story by the author. The user then goes to the footer and clicks through to the homepage, followed by the about us page and then the contact us page. I conceptualised the user flow to channel users to the most important parts of the site. The user flow is built on the likelihood that most people will not enter the site through the homepage, but rather through a story page. Since this is a niche site that is not known to many people, the homepage and footer elements are conceptualised to help orientate the user to the main aspects of the site. The overall user flow depends on a navigational structure that is simple to get users to their goals quickly. With Hicks’s law in mind, I focus the user on the menu and in-page navigational choices that are relevant to their primary goal of finding and reading the stories and a secondary goal of finding out more about the organisation and its people. I employed the principles of disclosure and exemplars to help the user navigate through the site by providing some information before clicking on links which are focussed on the user’s goals. The user is also given options to find the stories they want through various channels: search, themed scrolling, category and tag lists, as well as filters.

Objective:

At this point in the design process, it was necessary to start planning how users will flow through the design. The aim was to create a high-level flow diagram of one primary use case for booking flights that addressed the issues highlighted in the customer journey map. This would later guide the design of individual screens.

Results:

  • Text and dropdownsearch for destinations using
  • Easy and clear way to select two adults
  • Intuitive date selection using a calendar
  • Intuitive low-price selector
  • Clear price comparison on flights
  • Can see low prices on convenient days and times
  • Order of prompts important – find cheap flights first
  • Clear and transparent information on extras
  • Ability to control baggage and extras
  • Add and remove options micro-interaction
  • Important text – labels, headings, descriptions
  • Key screens – specific prompts and offers

4.2 Interaction design for desktop

Sketching as a problem-solving approach enabled me to create potential design solutions that incorporated earlier findings regarding user goals and pain points. Early sketches were loose and experimental, but through the sketching process, the screens became resolved. These concepts were subject to change as the design process unfolded during prototyping.

Objective:

Building on the flow diagram, the interaction design was aimed at visualising the screens and screen states for users flowing through the booking process. Interaction design through sketching would allow quick incremental changes to the proposed solution, and to transform ideas into tangible forms that can be shared and discussed.

Results:

  • Homepage focuses on the search form
  • Combined date, low price search, and flight search
  • Placing bundle selection on a new screen
  • Have clear bundle options, and feature offers
  • Have seats easily selected, changed, or skipped
  • Have more control over extras
  • Improved language and image usage
  • Have extra information available when required

5. Prototyping phase

With a clear concept in hand, it was time to start prototyping the proposed solution. Prototypes provided quick mock-ups of the workflow and the interaction design. In a movement from the analogue to the digital, I transformed the design concept sketches into a clickable low fidelity paper prototype, noted problems and successes in the design solution, and proceeded with the medium-fidelity prototype.

5.1 Low-fidelity prototype

I transformed the final sketches of the conceptualisation phase into a low-fidelity prototype to get a feel for the movement through the design. It allowed me to spot problems in the proposed solution that were not evident in the user flow diagram or static sketches. I could address these issues with higher specificity in the medium-fidelity prototype. View the full low-fidelity prototype here.

Objective:

Getting usability information from the sketches would help design efforts in the medium-fidelity prototypes. This required transforming the sketches into a clickable prototype for a specific user flow and then testing navigation, interaction design, basic layout, and the hierarchy of elements.

Results:

  • Micro-interactions on search form to increase flow
  • Mico-interaction on low fare calendar to increase flow
  • Layout of information modals can be simplified
  • Adjust labels on price tables can be clearer
  • Adjust labels on itinerary to be clearer
  • Adding seats, and blocking seats, can be simplified

5.2 Medium-fidelity prototype

The prototypes build on and refine the user flows and interaction design. I created two medium-fidelity prototypes of the proposed user flow, screen layouts, text and interactions for the new airline booking process. The first prototype focused on the flow between the homepage to seat selection. The second prototype focussed on a micro-interaction of contextual help while selecting seats. View the full medium-fidelity prototype here.

Objective:

With the aim of solving the previously identified problems, the prototypes required an open correspondence with the research and analysis, to supplement insights, and to keep on generating ideas through sketching. The prototyping process allowed me to shift, tweak or change designs as issues became visible. Aspects of the design changed according to digital requirements.

Results:

  • Search form lightbox modal on the homepage
  • Simplified search form with best practice controls
  • Auto-complete and auto-suggest on airport search
  • Past search remember and suggestions
  • Combined date selection with low fare calendar
  • Split flight select screens from fare select screens
  • Results for departure and return on the same page
  • Low fares are indicated on the results page
  • One-click flight selection with focus on selection
  • Clear labels and feature offers on price tables
  • Itinerary and price breakdown update dynamically
  • Clear bundle information on itinerary
  • Clear price breakdown
  • Tabs for surrounding dates
  • Tab is focused on the current date
  • Personal info, bags and extras together
  • Easy to see what bags and extras included
  • Easy to add or remove bags and extras
  • Easy to skip seat selection – entirely optional
  • Seat selection flow is an easy click-through process
  • The continue button behaviour is consistent
  • Client info focussed only on what is needed

6. Validation Phase

It was necessary to conduct usability tests of the medium-fidelity prototype to ensure that the proposed design solution met users’ needs. The validation process would ideally follow an iterative process where feedback could influence the design and prototyping phases until finalising the design. The iterative nature of the validation phase in this project was limited in scope because the project was part of a study.

6.1 Usability test of prototype

In preparation for the usability test, I listed the proposed design solutions that needed validation. This helped ensure keep the process on track and get the information required. Unanticipated problems would reveal themselves in the usability test.

Objective:

At this point of the design process, we had a prototype of the user flow and interaction design of the booking process. Conducting a usability test was intended to observe how a user interacted with the design, influence the design of the prototype based on user feedback, and validate the design.

Results:

  • Added, changed, and refined the design
  • Added a save button for the number of passengers
  • Added an auto-month shift in the calendar select tool
  • Added edit buttons for departure and arrival seats
  • Bundles and extra info changed into a tooltip
  • Tooltips of seat choices changed to contextual help sidebar
  • Refined various micro-interactions in the booking process
  • Added transitions after selection actions
  • Added contextual help at the top of pages

7. Handover Phase

With a clear solution to the problem, it was time to prepare the documentation to hand over the design to the next stage of the larger project: build. I created a set of annotated wireframes with developers in mind.

7. Annotated wireframes

Wireframes use a combination of image and text to relay the workings of a design solution. I noticed that building the wireframes helped me spot small and sofar hidden problems in the design, and gave me an opportunity to correct them.

Objective:

Wireframes are a documentation process that creates a set of descriptions of how the software works. Because prototypes do not include all details to build a design these details should be explicated in a wireframe document.

Results:

  • Logical, clear, precise, and concise for a developer
  • Cross-referenced set of annotated wireframes
  • Focussed on interactive and conditional elements
  • Outline content, functions, constraints, and behavior
  • Show how screens and actions work together

Concluding thoughts

This case study delves into the practical matter of designing a booking process, and it outlines ideas and approaches in the field of UX design. The project that is discussed employed the entire UX problem-solving cycle in designing an online booking process for a hypothetical airline. Each phase of the project informed the next: research and analysis phases were critical in formulating the proposed solution in the design and prototyping phases. At a high level I learned the following:

  • Undertake exploratory and rigorous fact-finding/interpretation
  • Remain attentive to feeding the larger purpose
  • Focus on identifying design problems and design solutions
  • Make prototypes and wireframes that solve the problem
  • Make solutions that work in a business context

My key learning in the project was that although UX design is about details, it is vital to keep track of the big picture while working with those details. It is crucial to start the UX design process with rigorous research and analysis and to know when to follow this through with prototyping and testing. I developed three strategies to help me keep on track:

  • Take note of high-level insights and ideas throughout the process
  • Routinely gauge to what extent a phase is sufficiently completed and when to move on
  • Use sketching-writing to get relationships of ideas onto paper and ready for discussion

The reason to undertake research, analysis, and designs is to illuminate design problems and create potential solutions. To be meticulous in any given process can only help improve a design solution up to a point, and at that point, to gain more depth or to stay on course, it is more useful to move on.

Back To Top