New TravelStory: An End-to-End UX Design Case Study · 2020. 9. 29. · 2020 Gregor alfas gregorsmallgreendog .com 1 INTRODUCTION I undertook this end-to-end user experience project

TravelStory: An End-to-End UX Design Case Study

Designer: Gregor [email protected]

©2020 Gregor Kalfas | [email protected]

The Problem, The Solution, My Role . . . . . . . . . . . . . . . . . . . . . . . . . . . 1My Approach and Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Secondary Research, Comparative Analysis . . . . . . . . . . . . . . . . . . . . .4

Primary Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Affinity Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Empathy Maps and Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

How Might We . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17The Idea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

User Stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Information Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Sketching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25Wireflows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26Moodboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29Style Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30High-fidelity Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32Lessons Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35Next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

INTRODUCTION

UNDERSTANDING

EMPATHIZING

DEFINING

IDEATING

PROTOTYPING

TESTING

©2020 Gregor Kalfas | [email protected] 1

INTRODUCTIONI undertook this end-to-end user experience project while studying for my UX Design certificate at Springboard. This study follows my journey from identifying a problem space to address, learning about the problem, and creating, testing and iterating solutions.

Modern travelers have to log and track a great deal of information — related to planning, bookings, confirmations, reservations and more — as well as keep track of what they do while on the trip, for memorializing or sharing later. They often use multiple sources (printouts, apps, emails, scraps of paper) to access this information, while relying on other sources (journals, journaling apps, camera roll) to record and their experiences.

TravelStory is a mobile app which enables the user to easily log, organize, access, record and share all types of travel-related information in one source. Part planner and trip folder, part journal and photo album, TravelStory integrates a travel itinerary with in-destination experiences, notes, photos and more into a single timeline, which forms the narrative for a shareable story when the trip is finished.

As a “UX team of one,” I was the sole researcher, designer, information architect, prototyper and tester for this project. Throughout the project, I incorporated invaluable feedback from my UX mentor, and from the numerous travelers I spoke with. While working solo presented many challenges, this project was a great exposure to the many facets of UX and UI design.

The Problem

The Solution

My Role


My process employed a design thinking mindset, in which I focused first on learning about the problem space, through the discovery stages of understanding and empathy, then on synthesizing what I had learned to define and frame the problem, and finally on creating solutions through stages of ideation, prototyping and testing.

My Approach and Process


PHASE I: LEARNING ABOUT THE PROBLEM


UNDERSTANDMy first objectives were to develop an understanding of issues relating to travel tracking, and to gain insights that would enable me to empathize with users and the issues they deal with in this sphere.

Secondary ResearchLooking into existing secondary research from several travel industry websites and white papers I was able to identify recent trends and patterns in travel. Some notable insights marked increases in :Ū Travelers combining business and leisure trips

(“bizcations”)Ū People taking shorter, “micro-trips” of up to 3 daysŪ People who travel soloŪ The use of “travel logistics management” apps

Comparative AnalysisI followed that with a comparative analysis of three travel-related apps (Tripcast, Journo and Polarsteps) with a similar focus: that of memorializing and recording a trip experience.

Among my observations, I found that each app addressed recording trip experiences differently: Polarsteps emphasizes tracking a trip’s physical journey. Journo is based on making journal entries and is subscription based. And Tripcast was group-focused and sharing the recording experiences with others on the trip. None of the apps provided social media integration. I did like how Polarsteps gave the option of creating a printed travel book, though.


EMPATHIZE Primary ResearchWith a good understanding of travel trends and information tracking, I then moved into primary research, where I could learn directly from travelers through user interviews. Prior to setting these up, I developed a research plan with the following goals:1. Identify the key pieces of travel information that users

want and need to log and track2. Discover the pain points in a customer journey when

traveling3. Determine what tools travelers use currently to log

and organize travel information

I started by developing a screener survey, which had almost 40 repondants, and which provided some useful quantitative information on how people travel.

Screener survey and select data


From the field of respondants to my survey, I selected six participants to interview, gaining some invaluable perspective on how various users plan, manage and organize their travel information. Several insights came to light:Ū Users will compare flight and hotel prices on travel

sites but prefer to book directly with the airline or hotel afterward because they don’t want to deal with a middlemanŪ Users want to share the planning of a trip with othersŪ Some rely on having physical paper with their travel

information, while others express a preference for keeping all their information digital or paperless Ū Users will rely on emails to access booking and travel

informationŪ Users will use social media not only to share their

experiences but also as a way of keeping a record of their tripŪ Some emphasize being in the moment vs taking the

time to record the moment or taking pictures

It’s very time-consuming to put together the documents with all of the information…. If there were some way for that system to be automated… that would be key.”

“I wish I had some way that I could capture the experience in a way that wouldn’t just go to the bottom of a barrel somewhere.”

“I take the pictures, I store the pictures, but I don’t really look at the pictures, because they’re not physically printed out and in a book somewhere.”

“

Some quotes from interview participants


DEFINE

Affinity MapSynthesizing the notes and quotes from my research, and putting them on sticky notes, I set to work creating an affinity map. From this, two main themes emerged. First, I noticed a clear delineation of how users think of travel information, set into one of three groups:1. How we plan and book travel2. How we organize travel information3. How we record and share our travel experiences

Affinity Map (1 of 2 parts): Tangible grouping


Second, there appeared two predominant traveler archetypes: the traveler who relies on physical artifacts as their way of organizing and accessing information which I call (“tangible”); and the traveler who keeps as much as possible digital and paperless.

To delve further into the mindset of the archetypes, I created empathy maps to organize information into what each might do, say, think, and feel, as well as identify their goals/needs and pain points. Each of these became the basis of my persona development.

Affinity Map (2 of 2 parts): Digital/Paperless


Empathy Maps and PersonasMy initial empathy map was for the archetype I labeled the “tangible traveler” looking at those who have a preference for paper information, and what they might Do, Say, Think and Feel, as well as their “pains” (or frustrations, fears and obstacles) and “gains” (which encompass their goals needs and wants)

This traveler feels more secure having a physical folder with their information, they express frustration in the amount of time it takes to put this all together, and find it a hassle ...while their needs would include a way to link their prepared research with information related to in-destination decision-making.

This formed the basis for my first persona, Angela.

Empathy Map: “Tangible Travler”

©2020 Gregor Kalfas | [email protected] 10Persona 1: Angela


As with the first empathy map, I sorted the notes from the second grouping, which I call the “paperless traveler”

This traveler will use a Google calendar for a time-based itinerary of a trip, yet express frustration in the way Calendar events won’t integrate with the appropriate time zone of the destination, or that they’re not editable when imported. They’ll access booking confirmations through emails and various brand apps.

While their needs include having one place on their phone to access all travel information, and having the ability to easily share the planning of a trip with others.

And this was the basis and archetype for my second persona, Steve.

Empathy Map: “Paperless Travler”

©2020 Gregor Kalfas | [email protected] 12Persona 2: Steve


While these personas were representative of the people I spoke with in my interviews, I felt that my secondary research and survey gave me enough information to look at a third type of traveler

So I made some assumptions and created notes to form a third empathy map, which I call the “solo traveler”

This traveler combines business and leisure trips, and is always capturing their travel experiences in words and images, but needs a way to keep photos and notes organized together.

They post a lot on social media, and find no Internet access to be a real obstacle to real-time sharing.

And this became the basis of my third persona, Tracy.

Empathy Map: “Solo Travler”

©2020 Gregor Kalfas | [email protected] 14Persona 3: Tracy


Problem StatementFinally, the synthesis of information also gave me the opportunity to redefine the problem into a more succinct and addressable problem statement, which becomes the core piece of the next phase:

Adult travelers must contend with a great deal of information in planning and realizing travel, as well as in memorializing

in-destination experiences, and need an efficient way to organize, access, document, and share this information.


PHASE II: CREATING A SOLUTION


IDEATE

As indicated earlier, working as a solo designer does present it’s challenges, particularly in the ideation phase, where many of the more common techniques to ideation are group or team-focused. I was able to get inspired by structured ideation techniques, like mind mapping and laddering that I would be able to complete on my own. These helped me consider multiple points of view to form questions and possible solutions.

How Might We ...?From the insights I gained through the Define/Synthesis stage, and with the help of the ideation techniques, I formulated a series of “How Might We” (HMW) questions, which I then narrowed down to three that I felt addressed the core elements of the problem statement.

With these questions in mind, I generated a series of possible solutions, which I then informally tested with several of the participants I had interviewed earlier. The overwhelming standout was the idea which addressed each of the three HMW questions, to which I went back and reframed into one integrated question:

Selected “How Might We” Statements

How might we make travel information more efficient to organize and access, and easier to document and share securely?


The Idea“TravelStory: an app that compiles images, notes and entries related to in-destination experiences, activities, events, and more, into a timeline tied to a travel itinerary, and packages this into a printed travel photo journal or a shareable secure digital story format.”

Who would use TravelStory?Taking consideration my persona’s points of view, I feel that TravelStory addresses the needs and pain points of each.

“I would use this as it’s an easy way to record my trip, keeps my notes and photos together, and gives me a structure to organize my itinerary and events that happen on the trip. I also like how it can provide me with a keepsake book at the end of my trips for my kids.”

— Angela

“I would definitely use this for the fact that it keeps all my travel information in

one location and lets me keep track of what we’re doing on the trip. It also lets me share and manage the itinerary and

details with others on the trip.”— Steve

“I really like how this associates my notes and photos together in one place. Entries are just like posting on social media, but with everything kept together to make a full accounting of what I did on the trip. And tagging allows me to keep my business and leisure activities separate.”

— Tracy


PROTOTYPEUser StoriesHaving envisioned the app in terms of how it might serve actual users, I turned to concept development, beginning with a series of actions, epics and user stories.

User Stories


Information ArchitectureIn the information architecture phase, in creating the structure of the app itself, I first created an app map, to show how I envisioned the screens to be structured.

App Map


I generated three user flow diagrams based on specific red route actions I identified in the user stories, which included onboarding for a new user, and a returning user both adding a trip and adding photos and comments to a timeline.

User Flow 1: Onboarding

©2020 Gregor Kalfas | [email protected] 22User Flow 2: Adding a New Trip

©2020 Gregor Kalfas | [email protected] 23User Flow 3: Adding Photos to a Timeline


SketchingI then created a series of sketches following the red routes I identified, which I turned into a low-fidelity rapid prototype, and then did some guerilla usability testing with them.

You can view all of my sketches in the low-fidelity prototype I tested, here:https://marvelapp.com/prototype/4dj2d9c

Select Initial Sketches

https://marvelapp.com/prototype/4dj2d9c


WireframesAnd I used the feedback I got from the testing in developing my wireframes.

Select Wireframes


WireflowsAfter several rounds of revisions, I turned my wireframes into wireflows to demonstrate user interactions while using the app.

The first two wireflows followed the first two user flow diagrams I created ...

Wireflow 1: Onboarding

©2020 Gregor Kalfas | [email protected] 27Wireflow 2: Adding Photos to a Timeline

©2020 Gregor Kalfas | [email protected] 28Wireflow 3: Preparing a TravelStory Book

In order to allow for a more complete demonstration of the app’s functions, I developed a new red route which involves creating a TravelStory from a timeline once a trip is completed.


MoodboardWith a solid idea of the structure of the app, I turned my attention to creating a moodboard. In it, I wanted to evoke a sense of nostalgia — of actual travel journaling, capturing your trip in images and words, and creating and sharing photo albums and stories afterward.

Moodboard


Style GuideFrom there, I created the TravelStory style guide, to illustrate how the typefaces, colors and various UI elements are to be applied within the design system. While certain elements were chosen for their nostalgic qualities, I still wanted to achieve a minimalistic modern look to stay relevant to the travelers of today.

Style Guide


High-fidelity MockupsAfter that, I started on my high-fidelity screen mockups, which would become the base of the prototype I wished to test. Following an initial round, I made some changes to better conform with iOS and Material Design standards.

And after receiving more feedback, I made further changes to ensure my red routes flowed successfully for testing a prototype.

The link to the current prototype (and the full set of screens) is here: https://bit.ly/39N8cNx

High-fidelity Mockups

https://bit.ly/39N8cNx


TEST

Usability TestingOnce I felt my prototype was ready to be tested, I drew up a usability test plan, setting the following goals:1. Determine whether the onboarding provides

sufficient information on how the app functions.2. Ascertain whether the UI in the intro encourages

people to continue the intro or to skip.3. Identify any points of uncertainty when using the app.4. Determine whether the adding to timeline task is

intuitive.5. Uncover any usability problems in the output (create

a TravelStory book) red route.

After recruiting five test participants, I conducted individual remote, moderated testing sessions with them.

Screen shot from a usability test


The results of the first usability test gave light to several key findings:

1. While the introduction provides useful information on how the app operates, additional in-context guidance appears necessary.

2. Orange Sign Up button is the predominant call-to-action on the screen.

3. Images don’t relate constructively to content.4. Some participants considered or clicked on

“Upcoming” on the trip screen to Add a New Trip (when phrased as “create a new timeline.”)

5. Some uncertainty as to what the “Add” icon was for.6. Down - Up chevrons to indicate closed and open

states were confusing.7. All participants in one task or another indicated the

intention to click on the specific date in the timeline to add an entry associated with that date.

8. One participant skipped the introductory screens in the onboarding; seemed to have more uncertainty with completing tasks than others

Usability Test Findings


So I had some major usability issues that needed to be addressed. I drew up a usability test report, then got to work on making the needed changes.Modifications after the first usability test for the second iteration included:

1. Reworking the introduction to ensure it provides clear, succinct guidance on using the app.

2. Labeled the initial screen as “How It Works”. 3. De-emphasized “Sign Up” as an immediate call-to-

action.4. Made the images relatable to the content.5. Provided additional empty state data to help illustrate

for first time users the features of the app and how they work.

6. Drew attention to the “Add” menu icon

Usability Test Key Modifications for Second Round


I conducted the second iteration of the usability study with five new participants, all in remote moderated sessions.The conclusions to the efficacy of the changes I made following the first iteration were mixed:

1. I believe the changes to the introduction made users more likely to read the screens rather than skip or quickly go through.

2. This resulted in a full success in users understanding that they create a timeline by Adding a New Trip, and taking the appropriate actions.

3. However, despite the amount of empty state explanation as to the use of the “ADD” menu icon, several users did not initially go there either to add a flight or to add photos to the timeline.

Lessons LearnedAs stated at the beginning of the case study, this project gave me a great exposure to working on a full UX problem from concept through solution iterations and testing. While each step was a learning opportunity, it gave me a solid foundation to proceed to the next project with confidence.

Documents

New TravelStory: An End-to-End UX Design Case Study · 2020. 9. 29. · 2020 Gregor alfas gregorsmallgreendog .com 1 INTRODUCTION I undertook this end-to-end user experience project