Process book

THE ATLANTIS TRANSIT HUB
Data-Driven Display
Eric Guo
Vasant Menon
Gillis Bernard
1

OBJECTIVES
2
Create a data display for the fictional Atlantis Transit
Hub in Washington’s San Juan Islands
Engage and inform travellers to enable exploring the San
Juan Islands for business and pleasure
Satisfy objectives and needs of imagined client stakeholders
1
2
3

TABLE OF CONTENTS
4-6
3
7-16 17-25
25-40 41-47 48-56
Data Discovery & Modeling Putting People in The
Equation
Parallel Prototyping &
Sketching
Iterating Through
Initial Design
Concepts
Design in Motion &
Animations
Control & The
Preferred Future
Concept

5
DATA DISCOVERY & MODELING
Abstracting The Data
We were provided a vast set of data
about the modes of transit and routes
among the San Juan Islands. Columns
of data ranged from the expected–
departure time, airline company– to the
granular–amount of fuel on board the
airplane, airplane manufacturer.
Our first step was to abstract the data
set into a model to make sense of the
relationships between each data
category.

Transit Decision Trees
6
DATA DISCOVERY & MODELING
As we created our first model, we
realized that some data categories were
likely not relevant to the end user who
was looking for information on travel
routes within the Atlantis Transit Hub
(ATH).
To align our data model with our
perception of user needs, we created a
decision tree that provides a high-level
representation of how a user might think
about their transportation options from
the ATH.

Putting People in
The Equation
7

Empathizing with Personas
8
PUTTING PEOPLE IN THE EQUATION
Along with the data set, we received
three personas for the project–Elizabeth
Duarte, Patrick Mulvaney, and George
Shimko. We whiteboard brainstormed
goals for each user (in blue), later adding
in ideas for design elements (in red) and
relevant data categories (in black).

User Personas: Elizabeth Duarte
9
Elizabeth Duarte, Transportation
Director1. “I want to offer highly readable displays of
changing transportation data.”
2. “I want to educate the public about the ease of
travel with PTF pass.”
3. “With PTF Pass, I want to provide great value and
flexibility to customers.”
Elizabeth is our client. From her persona,
we concluded several insights:
1) Our display has to be highly readable
2) We have to consider real-time data
changes in our design
3) Promoting the PTF pass is mission-
critical to Elizabeth in the redesign of the
data display.
We also concluded two area of focus for
the PTF pass: great value and
flexibility.

User Personas: Patrick Mulvaney
10
Patrick Mulvaney, Business
Traveler1. “I want more flexibility around my travel options so
I can prep for weather changes”
2. “I want to spend less mental energy planning how
to get around during my business trips.”
3. “I want to minimize my time spent traveling to and
from a site and my next destination.”
The persona of Patrick Mulvaney
presented an interesting design
challenge. Rather than coming to the
San Juan Islands as a tourist, Patrick
found himself in the ATH for his job at a
clean energy company.
We came to the conclusion that above
all else, Patrick wants to get into the
ATH and get out as soon as possible
with the information needed to get him
to his next customer site.

User Personas: George Shimko
11
1. “I want my guests and grandchildren to be able
to explore the San Juan islands easily.”
2. “I want my guests to be able to create
personalized itineraries.”
3. “I want my guests to use my home on San
Juan Island as a base from which to experience
all of the Islands.”
George Shimko, Family Traveler
While George was our given personas,
our touchpoint throughout the design
process was George’s visiting family
members and guests. As a local with
houses on both San Juan Island and
Stuart Island, George likely knows his
way around the archipelago.
The real challenge was the imagining of
George’s guests’ needs. We imagined
that his guests included (but were not
limited to) his adult children and their
grandchildren. George’s extended family
served as an additional persona to
consider throughout the design process.

The Traveller User Journey: Priorities by Persona
12
George / Patrick
In the Atlantis Hub
George
Next, we focused on identifying the role
that the data display plays in the travel
experiences for George and Patrick. We
split the traveller’s journey into four
stages–Planning, Purchasing, Waiting &
Confirming, and In-Journey.
Of the four stages, the Waiting &
Confirming stage seemed most relevant
to our task of designing the data display,
and thus provided the biggest
opportunity for engagement.
Stage 1:
Planning
Stage 2:
Purchasing
Stage 3: Waiting &
Confirming
Stage 4:
In Journey

The Traveller User Journey: Adding Relevant Data
13
Stage 1:
Planning
Stage 2:
Purchasing
Stage 3: Waiting &
Confirming
Stage 4:
In Journey
George / Patrick
In the Atlantis Hub
George
PTF Discount / Bundle
Tourists Attractions
Train Connection
Price
Availability
Departure/
Arrival Time
Related
Data:
Departure/Arrival Time,
Flight Status, ID,
Boarding Gate/Platform
Arrival Time
13
Based on our modeling, we incorporated
data categories into the different phases
of the traveller user journey.

User-Driven Data Decisions: Finding Commonalities
14
Identifying data categories valuable to
both George and Patrick (shows in
yellow) was a crucial initial step in our
design process.
Blue sticky notes represented persona
goals (slide 3) and yellow sticky notes
represented abstracted data categories
relevant to George and Patrick’s
respective objectives.

15
Left: Some very specific data
categories that were included
within the initial set were discarded
at this point in the process.
Through our persona-building and
modelling, we deemed them
irrelevant to the display.
User-Driven Data Decisions: Letting Go & Doubling
Down
Right: After creating our
commonality data model, we used
pink sticky notes to quickly
incorporate design elements onto
the model to prepare us for the
sketching phase.

Market Research: The Islands
16
We conducted market research to
deepen our understanding of the needs
of George’s guests on the San Juan
Islands. Resources like TripAdvisor, the
tourism blog #IslandStories, and Google
Images revealed the attractions that
draw tourists to the islands.

Parallel Prototyping
& Sketching
17

Market Research: Data Displays
18
PARALLEL PROTOTYPING & SKETCHING
Prior to creating our initial sketches, we
quickly searched via Google Images for
inspiration. We were struck by the
diverse use of color (semantic use of
yellow for delays versus standard use of
yellow within palette for minutes until
departure) and iconography to
communicate meaning.

19
Thinking Through Sketching
Our team used parallel prototyping and
rapid iteration to kick off our design
process during an in-class work session.
Using a map of the San Juan Islands,
our personas, and our data models as a
guide, we each created multiple high-
level visions for the layout of information
on the ATH data display.

20
Sketches: Sorting by Mode, Time, Coming/Going
The following slides present artifacts
from a generative phase in the project.
We created numerous pen and ink
sketches of the data display,
experimenting with different forms of
visualization and representation.
Elements of featured sketch (right):
- Map with temperature, storm
advisory, date
- Information hierarchy by mode of
transit, time
- Train routes numbered by 1 or 2
- Display minutes countdown until
boarding if departure time in
under 30 minutes

Sketches: Sorting by Time & Coming/Going
21
Elements of featured sketch:
- Information hierarchy by
departures and arrivals, time
- Incorporation of icons to indicate
mode of transit
- Horizontally split screen with
map
- Map slider visualizing PTF pass
flights only

Sketches: Sorting by Location & Time
22
- Information hierarchy by location
(country, island), time
- Icons featuring mode of transit
- Routes represented as pills
within destination blocks
- Rotation weather and map
section in top right

23
Sketches: Sorting by Mode & Time
- Information hierarchy by mode of
transit, time
- Experimenting with visual
representation of proximity based
on user dependency on trains to
reach harbors
- Time table including all departure
and arrival times for planes,
ferries to island destinations
- Ability to toggle back and forth
between flights view and train &
ferry view

24
Sketches: Sorting by Mode, Location, Coming/Going
- Information hierarchy by mode,
location (in ferry section)
- Visual representation of stops on
train to educate user on layover
times
- Narrow, zoomable section for
map above timetable

Iterating Through Initial Digital
Design Concepts
25

Digital Sketching in Grayscale: Version 1
26
ITERATING THROUGH INITIAL DESIGN CONCEPTS
After creating the initial pen and paper
sketch, we realized our two most
promising designs in grayscale.
Critique & Team Assessment:
+ Situated the Hub within the
entirety of the user’s travel
experience coming to the islands,
from left to right, starting with an
incoming flight at the airport
+ Clear point of entry with “You Are
Here” button
- Puts cognitive load on user,
potentially hard to decipher
- Design necessitates small text
- Does not show returns to Hub

Digital Sketching in Grayscale: Version 2
27
Critique & Team Assessment:
+ Visual representation of duration
of routes reduces cognitive load
of user
+ Displays layovers in case user
has clearer expectations
+ Shows complete user journey
from Hub to destination
+ Uses iconography to indicate
mode of transit
- Low contrast in areas
- Busy with text, status tags
- Little visual hierarchy
Ultimately, we chose to explore Version
2 further because it seemed to provide a
better foundation on which to iterate and
meet the needs of Patrick and George.

Digital Iteration 1
28
Our first iteration was based on our
digital sketching in Grayscale Version 2
in previous slide. We added color to
improve the information hierarchy. We
also developed our first iteration of the
map for San Juan Island.
The map shows weather information, a
location finder within the ATH and
potential routes departing from the ATH.

Digital Iteration 2
29
Our second digital iteration illustrates
the beginnings of our exploration of
coupling the map and the boarding
route with color – an idea that we would
build upon during the animation phase
of the project. The foundational grid for
the display (60% map, 40% schedule),
along with the grid for the route
schedules, also became more refined in
this version.
One big change between the Iteration 1
and the Iteration 2 is that instead of
sorting information by destination, we
sorted by time. As a result, the most
temporally relevant routes are always
displayed on the top of the list. By doing
so, we try to display the most urgent
information to users.

Remixing Map Elements: The Old & The New
30
While creating the map portion of the
display, we found inspiration in a
number of different types of maps that
influenced our style.
- Vintage maps of continents and
countries, for the arching low-
contrast island names
- Illustrated maps, for the
incorporation of delightful
elements and icons signifying
activity
- Transit maps, for zoomed insets
that provide additional
wayfinding information
- Mall maps, for the point of entry
star
- Metro maps, for the modern
approach to route visualization

31
Remixing Map Elements: Experimentations

32
Remixing Map Elements: Ultimate Version
Map points
While the islands were perhaps the real
destinations for users, we recognized
that George’s guests and Patrick were
traveling to specific areas related to
transit on the islands. Thus, we included
clear map dots that represented the
location of Stations, Airports, and
Harbors.
Point of Entry
A clear point of entry on the map is the
You Are Here badge, enabling the user
to quickly locate themselves in relation
to other places.
Route lines
Plane routes are represented by solid
lines, trains are dashed lines, and ferries
are dotted lines.

Color: Adding Meaning to Colors
33
Our initial explorations experimented
with the application of color. During the
later phases of the project, we
considered more deeply how the colors
of the map and the schedule were
interacting with one another, and the
meaning behind the colors we selected.
The following series of slides gives
context to the use of color within the
scheduling side of our display.

Color: Balancing Hue & Highlighting Information
34
The bottom-right combination of typeface and
color was our ultimate choice for legibility at a
distance–an important factor with our users
within the ATH.. The green had strong enough
contrast on both the black schedule background,
and the lighter background of the map.

Color: Semantic Carriers of Meaning Brought to Life
35
Ultimately, the three colors within the
schedule side of the display utilized
semantic carriers of meaning to suggest
to the user that a route was canceled,
delayed, or in boarding mode – similar
to that of a stoplight.

Playing with Engaging Elements
36
Knowing that George’s guests might
include his children and grandchildren,
we experimented with adding activity
icons and attractions within the
schedule side of the display.
Ultimately, we decided the look
was too busy and might distract
our personas from their mission of
finding the most relevant route.

37
Exploring Edge Cases
We wanted to test the limits of our
display within the context of our
personas. We did this by applying
various edge cases to our design.
Top to bottom:
- Flights leaving at the exact same
time on different airlines to the
same destination
- Last flight of the day departing
- No more flights being available to
particular destination

38
Defining the PTF Pass: Packages
In order to move forward with our
project, we realized we needed to define
the parameters of the PTF pass. We
conducted a brainstorm and decided to
frame the PTF pass as a series of
packages that met the needs of
George’s guests and Patrick.
Types of PTF pass:
- Individual Passes
- Group/Family Passes
- Business Passes

39
Defining the PTF Pass: Visual Representations
Initially, we had represented the PTF
pass within the schedule as a small tag.
Reflecting on the importance of the PTF
pass for our persona Elizabeth, we
decided to only display PTF-eligible
flights in our schedule, and added a
large ad at the bottom of the map to
emphasize the deal.

40
Defining the PTF Pass: Flexible Options & Engagement
In our initial version of the control, we
thought to add an expanding element to
the bottom PTF banner. When a button
was pressed, it would open into a
broader window with a description of
packages and pricing, and a QR code to
immediately purchase a pass.

Design in Motion &
Animations
41

42
DESIGN IN MOTION & ANIMATIONS
Progressive Disclosure: Adding Opacity to Routes
One piece of information we received
during critique was that the schedule
display was like a wall of information,
and thus impenetrable to the user.
We experimented with adding opacity to
the less urgent routes to ease user
overwhelm. At right is our first iteration.

Progressive Disclosure: Barrel Roll Effect
43
In an additional exploration of
progressive disclosure and opacity, we
expanded the width of upcoming route
schedules and adjusted the opacity at
the bottom of the schedule. With the
larger boarding/departing card at the top
of the list, the schedule takes on the
effect of a barrel rolling through
information, or an open roll-a-dex.
We built upon this effect with animation,
and used AfterEffects to scroll upcoming
routes towards the top of the schedule
when a route departed.

Emphasizing A Point of Entry with Animation
44
Expanding upon the point of entry of the
You Are Here button, we used color and
animation to couple the map and the
schedule.
When the countdown to boarding hit 10
minutes, the boarding badge on the top
of the schedule would blink and a
glowing light would trace and loop from
the You Are Here button along the green
path to the destination, drawing the
user’s eye.

Applying Disney’s Slow In & Slow Out
45
One of Disney’s 12 animation principles
is the Slow In Slow Out motion
technique, which allocates more frames
at the start and end of the motion to
have an overall smoothing, graceful
effect.
We used the same principle in the
transition sequence after a route
departs. After a route departs, the top
card representing the recently departed
route is replaced by the upcoming route
card.

Slow In & Slow Out: Applied
46

Coupling Data Using Motion
47
We wanted the boarding process to be an immediate call to action. We used coupling between the boarding card, which
contains a tag that blinks, and the corresponding map route, which glows along its route, to draw user attention
immediately. The aforementioned animations occur only when there are 10 minutes left to board, and stops after the
transport departs.

Control & The Preferred
Future Concept
48

49
The Preferred Future Concept
CONTROL & THE PREFERRED FUTURE CONCEPT

50
Reducing Cognitive Load: Organizing Routes by Time
Tier One
Tier Two
Tier Three
Our final version for this project
organizes data into three tiers of
information, with gradually less pieces of
data displayed the further away the route
is from departing.
Tier 1
Routes departing in 20 minutes or less
Tier 2
Routes departing in 40 minutes or less
Tier 3
Routes departing in over an hour

51
Reducing Cognitive Load: Combining Train & Ferry
One of our insights during the project
was that users needed to access ferries
from the train. We represented this on
the final display with a layover and time
estimate to manage Patrick and George
and his guests’ expectations–and
potentially provide them with an
opportunity for on-the-way exploring.

52
Reducing Cognitive Load: Weather Warning
Patrick:
“I want more flexibility
around my travel
options so I can prep
for weather changes.”
We incorporated weather warnings into
the map portion of the display to keep
Patrick, as well as George’s vacationing
guests, up to date on any changes that
may affect their plans.

53
Reducing Cognitive Load: Last Flight/Ferry/Train Warning
George:
“I want my guests to use
my home on San Juan
Island as a base from
which to experience all
of the Islands.”
Knowing that George wanted his guests
to be based on San Juan Island, we
added a warning to the last route of the
day from a given destination within our
display.

54
Giving Users Control: Playful PTF Itineraries
We incorporated marketing elements into our control. With George’s guests in mind, we created three different fictional
itineraries with points of interest around the San Juan Islands, and paired those itineraries with PTF pass packages. The three
categories were Family, Romantic, and Adventure. Users could access the itineraries below by pressing one of the buttons in the
following slide. The user could save the itinerary–and purchase a PTF pass directly from their phone–by scanning the QR code.

55
Giving Users Control: All-Business PTF Pass
While informative PTF pass itineraries may delight George’s guests, we understood that Patrick would simply want to get access
to the PTF pass and start receiving the savings and flexibility benefits right away. To make the display work for Patrick, we have
a general QR code on the display. When he scans the QR code with his phone, Patrick is taken to a quick-purchase PTF pass
webpage that includes 1-month, 6-month, and annual pass pricing for businesses, along with the tourist-friendly packages in the
previous slide.

56
Giving Users Control: Button Building
We imagined pairing the display with a
panel of buttons existing below the map
portion of the screen. Each button is in
the same shape as the point of interest
on the map–triangle, square, and circle–
and includes a relevant icon for easy
identification for George and his guests
in the ATH.

57
Curating The Pitch to The Client
Pitching to our fictional client, Elizabeth Duarte,
gave us the unique opportunity to practice
advocating for our design in a professional
context. It was especially interesting to
consider how we might curate our process for
the benefit of Elizabeth and her boss and other
stakeholders.
We could have done a better job at tightening
up the beginning of the presentation and
shining a spotlight on the trusted rapport we
had built with our fictional persona Elizabeth to
establish credibility.
Importantly, we learned that we should be
sensitive to using the word “final” in reference
to the proposed design concept. In order to get
a follow-up meeting, the door should be open
to compromise and adjustments.

58
The Preferred Future Concept with Control
[control section]

Process book

Recommended

Recommended

More Related Content

Similar to Process book

Similar to Process book (20)

Recently uploaded

Recently uploaded (20)

Process book