Research

Process 1/3

By mapping out the expected user's journey, we could figure out the features that PIA would help with or just hand-off to other systems, and the modality with which users would interact with PIA to use the features.

Users' Journey with PIA

We were tasked to choose a business with more than two devices including mobile and kiosk. After visiting a number of businesses, we arrived at the airport.

Why the Airport?

Most kiosks we found were operated by each airline, leaving most of the passengers' journeys unsupported.

We thought the resources provided by the Pittsburgh Airport have a lot of potentials but are pretty bare in their functionality right now.

Difficulties in Navigating Information

The PIT mobile application was just a directory of information.

Limited Functionality

Kiosks in the airport were performing only as a bridge to a few airline software.

1

2

We were tasked to choose a business with more than two devices including mobile and kiosk. There were two points to consider. First, the business should have offline branches. This condition gave us challenges in regards to privacy and hygiene. Especially during the COVID-10 pandemic, direct contact with public devices can be unsafe. Also, no one would like to speak out their personal information like their address to a kiosk when we suppose they are interacting with a VA.

                    Second, Mobile devices and Kiosks had different advantages in different contexts. With those in mind, we looked around Pittsburgh neighborhoods to find our client who needs our VUI solution.

While ideating pain points, we could generate plenty of frustrating scenarios that we all might have experienced or at least heard of. We mapped out these pain points to help us focus on the problems worth solving and technically plausible (Problem Space).

Pain Point Mapping

Intelligent Assistant for Pittsburgh International Airport

PIA

Role

Research, Concept Development, Interface Design, Visual Design, Motion Design

Tools

After Effect, Illustrator, Figma, Finalcut Pro

Timeline

8 weeks (2021)

Team

Devika Pillai, Matt Muenzer, Youngryun Cho, Wei-Chei Wang

Overview

Our challenge was to create novel interactions between human(s) and a virtual intelligent agent for the company or organization of our choice based in Pittsburgh.

AI-powered Voice User Interfaces (VUI), in particular, have shifted the way users interact with computers or machines. Virtual assistants (VA), a type of VUI, such as Apple Siri, Microsoft Cortana, and Samsung Bixby, can access and analyze users’ locations and online activities, and they have become an important means for users to interact with other services and applications. AI has also yielded new types of products, like Amazon Alexa or Google Assistant, and technologies that are widely implemented in smartphones, watches, and vehicles. In this project, we investigated how designers might build systems for VUI in new ways and change the ways users interact with VA.

Outcome

Meet PIA, 

Pittsburgh's intelligent airport assistant.

Mobile UI

Kiosk UI

Schedule Notification and Transit Suggestion

Reservation and Payment

Reminder Setting

In-door Way-finding

Conversation overlay

Concept Video 1.

Chad plans his trip with PIA mobile app.

Multi-language Support

Conversation

Input Choices

Mobile Integration

Hand-off to a Staff

Concept Video 2.

Jin, an international student, arrives in Pittsburgh for the first time.

Process 2/3

Concept Development

Building Scenarios

To find out the situations in which PIA would be helpful to passengers, we included, 

  1. Frequent User/ Local resident/ Driver who takes a flight, with a delayed flight schedule.

  2. Frequent User/ Local resident/ Driver who takes a flight, with a spouse, two kids, and one elderly.

  3. First-time User/ Foreigner/ Public transit user who lands, at late night, without someone to pick her up. 

Talking while Browsing

How users can get into/out of the conversation mode and going back to the previous conversation was also a key flow.

Conversation History

Navigating information in mobile and kiosk are different, which led us to decide to make mobile conversation history is saved, while kiosk conversation just keeps moving on considering it interacts with many other people.

Dialog Suggestion

One thing we thought important was showing suggestions of what users may want to know or request, which also works as instructions of what PIA can help with.

PIA added on home screen

The first thing we considered was integrating PIA into the existing information structure. In this process, we aimed to provide passengers free to choose to start a conversation or navigate GUI while giving easy access to PIA.

While iterating our storyboards, we simultaneously worked on wireframes. Through these two processes, we could refine interactions and make decisions on details.

Integrating PIA to UI

1

2

3

4

Personas

Throughout the initial storyboarding process, we listed up key features and decided to describe two personas' journeys for our demo video.

2

Jin

Arrival/

International/

Late-night arrival/

Baggage problem

Kiosk/

Multi-language support/

Ground Transportation/

Connection to staff

1

Chad

Departure/

Frequent User/

Driver/

Flight Delay/

Mobile app/

Way-finding/

Schedule tracking/

Reservation/ Payment Service/

Discovery

We drew storyboards to give shapes to how PIA helps users.

Storyboards

Visualizing Identity

Process 3/3

We wanted our assistant to look or sound like she/he belongs to the airport. As airport experience includes unexpected situation, strict rules, and various groups of peopel, we wanted PIA reliable, neutral, and informed. To create this personality, we set three key words that explains PIA.

Defining Identity

Direct, connected, reliable responses

Decisive

Simplicity and clarity in statements

Straightforward

Proactive and joins the dots

Intelligent

Creating Look and Feel 

To develop coherent visual languages, we got inspirations from shapes of mobility, intelligence, and airport spaces. Dots and connecting lines, 3-D shapes, looping motions were main three explorations of our sketches.

Visual Languages

Visual Identity of PIA

Final form of PIA consists of four dots and lines. These elements were devised considering fluid transitions between states.

Typography

Rubik to keep it conversational and lively. Cabin to tap into classic wayfinding and informational aesthetics.

Palette

Crisp and confident. Dominant on blue to stay close to aviation and sky shades.

Icons

The icon style borrows the translucency and opacity play from the VUI identity.

Adding Motions

We created motions for each states in conversation. Based on wireframes, we defined 8 states and then made transitioning motions between states.

Integrating Screens

Visual elements came together on screen. We added UI feedback including dictation and skeleton UI for clear interaction.

1

Mobile UI

2

Kiosk UI

PIA Beyond Pittsburgh

We believe PIA would help the airport to build an entire traveling ecosystem, it will not only improve passengers' experience but also better serve the airport’s economy. Because Pia could connect passengers to the airport’s infrastructure like retail, parking, or even local businesses like transportation or accommodation facilities.

Transitions

We listed up cases when transition happens, and created transitioning motions.

Designing Conversations

As a part of designing conversation, we learned about the four modes of conversation. In conversations, there are many implicated deeper meanings behind the letters. To give answers that users want, considering how to guide users to ask was also one thing to consider. Also, understanding how deep current AI technology can catch the context would also be important in building conversations.

Reflections

Wrap up

Diversity and Accessibility

Featuring an international student in our second scenario was considering the airport context. Jin could have been anyone who needs a wheelchair, is visually impacted, or is a kid. Having a broad spectrum of users let us think and discuss solutions from many different perspectives.

How to define/ How to deliver

Pain point mapping, defining problem space, evaluating solutions. All processes we went through helped us navigate our project in one direction. Prototyping and presenting our design are also a big part of this project. It was a great opportunity to develop new software skills and soft skills.