Hugo

A redesigned USPS postal service with conversational AI introduced and Mobile-Kiosk UX flow refined

team

4 Designers  
(Anupriya Gupta, Greg Chen, Jamie Choi, Laura Pedrosa)

timeframe

7 Weeks, Fall 2021

My role

Research, UX Refinement, Storyboarding, VUI Motion Design, Mobile UI, Mobile Prototyping, Video Shooting

tool

After Effect, Audition, Figma, Premiere, ProtoPie, Voiceflow

01  
Background

We are tasked to design voice assistant on Kiosk and/ or APP for a company that could benefit from such solution. We choose USPS to be the client as its current postal experience is cumbersome and unintuitive and often requires the help of real human services. It makes USPS a perfect candidate for conversational design. The problem space we define:

How might we create a more efficient and comprehensible USPS customer experience utilizing conversational AI?

02  
outcome

We introduce voice assistant, Hugo, in both kiosk and mobile APP to help users filter their options by asking a few simple questions in AI-enabled natural language. Furthermore, we redesign the APP to ensure a seamless task transition from mobile to kiosk. Lastly, predictive reminders and shipping status are integrated into APP to enhance the overall user experience

Wake up
processing
done
error
user speaking
hugo listening
hugo speaking
waiting

03  
Design process

Why USPS

We choose USPS to be the client because:

  1. The only delivery service that reaches every address in the nation— 160 million residences, businesses and Post Boxes
  2. It has 2,732 self-service kiosks, but very little touch on mobile-kiosk integration
  3. VUI is the right fit for postal service for the following reasons:

USPS Brand Identity

Logo

Iconography

Colors

Current USPS Experience

We first try the APP. It redirects us to their website in every task. We then visit the post office at Squirrel Hill to try kiosk. There are vast potential opportunities:

  1. Tasks are cumbersome and mundane
  2. Terminology (box type, stamp types, etc.) they use is incomprehensible
  3. The flow between the in-store and the mobile app is disconnected
  4. Improving kiosk experience to increase the usability of kiosk, minimizing human contact during the pandemic

Onsite Interview

We randomly interview customers at the post office at Squirrel Hill. Although they generally enjoy using the kiosk, they all love to see some improvements. One of the interviewees is the clerk working there, and he mentions how little knowledge he has about the kiosk.

Current User Flow

Current mobile experience only covers part of user flow, and the integration and transition between mobile and Kiosk are not well designed

Kiosk Flow

This scenario assumes users bring the object and need to select the type of service and create shipping label through the kiosk. Shipping a package needs to go through many steps.

Problem 1 - Too many Options

After landing page, users are faced with an overwhelming number of options that might be irrelevant to your task. We see potential opportunities for voice assistant that can help with narrowing down the options in a quick one-sentence exchange

Problem 2 - Non-descriptive Options

The language that is used to describe these options is non-descriptive and technical that it is unclear to the user what the differences are. USPS even has to provide a glossary on their website to describe terms like express, legal means

Problem 3 - Dead Ends

After going through all these cumbersome steps, you can run into dead ends if your package is overweight and does not comply with their standards or you prefer to pay in cash at the very end of this process

Mobile APP Flow

We focus on postal services only for mobile flow

Problem 4 - Limited In-app Experience

After the landing page, each option takes users to the mobile web version rather than staying within the app. There is not much in-app experience. We see the opportunity here, aligning the simplified structure of Kiosk to mobile would create a united and a less-friction user experience

Storyboards & Scenarios

We explore more scenarios while storyboarding, aiming to find more design opportunities and cover major use cases, we look into:

  1. Use Kiosk after hours
  2. Use mobile to build shipping cases at home, then head to Kiosk to drop off
  3. Use Kiosk, then go to counter

Scenario 1     Sara ( Kiosk - after hours )

"I use kiosk a lot, the biggest advantage is that it is open after hours."
Customer, female

Scenario 2     Jane ( Mobile APP -> Kiosk )

"I usually get everything ready at home and just drop off "
Customer, female

Scenario 3     Robert ( Kiosk -> Counter )

"You can not ask the kiosk which shipping type, for that you have to ask the staff at the counter."
Customer, female

Core Scenario

Given it’s a short project (7 weeks), we narrow down our scope to focus on Jane’s scenario, which is preparing shipping at home and dropping it off using Kiosk. We also add stamps browsing & purchasing at Kiosk into the scenario. We choose the mobile-heavy scenario because compared to Kiosk, mobile is less developed in the current flow. Besides, we have a doubt people would be comfortable using voice commands at kiosks in a public setting for concerns that personal information might be overheard, and talking to a machine in public is not a widely-adopted idea yet.

conversation design

To understand and design conversation, we first studied model of coversations by Paul Pangaro. We build our conversations based on the models

Also, we reference to Google’s conversation design to categorize Hugo’s conversations with users to make sure Hugo has a consistent voice

User Journey of core scenario - Jane

Existing VUI Study

We looked into Google assistant, Cortana, and Siri. Insights we have:

  1. Aligned with brand images
  2. Motions to express different emotional states
  3. Constantly dynamic
Confirmation
Incomprehension
Listening
Reply
Thinking
User speaks

Define VA personalities

We define USPS voice assistants as friendly, efficient, dependable, and perceptive.

Hugo Characteristics

Name

We start with Benjamin Fraklin, who is the founder of USPS, so the candidates include Frankie and Fran. We also have Atlas and Hugo on the list. We then conduct a vote, Hugo is the name because:

  1. Hugo means “mind, intellect”
  2. Uplifting, easy to say with multiple accents
  3. Echos the phrase USPS go

Voice

  1. Friendly, professional, calm
  2. The Balance between human vs. AI-generated voice

Form & motion ideation

Paper  |  Bird  |  Fly  |  Plane  |  Flexible  |  Speed  |  Friendly  |  Lively  |  Simple  |  Agile  |  Playful  |  Geometric

After many rounds of iterations, we decide to go with the design that is inspired by the logo of USPS. It origins from the logo and assembles to the image of box and mail, which resonates with the postal service

Hugo States Matrix

During storyboarding, we define 8 states of Hugo. We design motions to reflect these emotional status, and categorize them on a matrix map

waiting
Hugo Speaking
Done
wake up
Error
Hugo Speaking
Processing
Hugo Listening

State-to-state Transition

While designing motions for each state, we also think about how to transit from state to state smoothly

Processing to done
Processing to Error
Processing to Waiting
Idle to Speaking

UI Wireframe

In wireframe, we set up a couple of important UI features,

  1. Progress bar
  2. Hugo motions at the bottom
  3. Cards to show the price of “fastest”, “cheapest”, and “best” options

UI Ideation

Dialogues blobs

Dark Mode

We try several key screens in dark mode as it helps increase the visual weight to balance the conversation design that is largely left empty in some single-question pages. But we all agree the image is less associated with the current USPS, so we switch back to white theme

Progress Bar & Navigation Bar

We try several different progress bar designs and end up going bigger icon one (the second from the left) as it also serves as a navigation bar for users to go between steps. Bigger icons give users a clickable feeling and carry a larger clickable area

Finalized UI structure

In the final version, we place the task title and navigation bar at the top and voice assistant at the bottom. At the center, it shows the summary of the next step and buttons for the next actions

Why Only User Dictation

One of the major changes from wireframe is we decide only to show user dictation, but not Hugo dictation

  1. Having user dictation allows users to confirm if Hugo gets the command right.
  2. Users care about efficiency the most when it comes to shipping. Compared to Hugo’s exact lines, next actions are more important. We thereby prioritize the space for next actions in the screen  center.

In the case Hugo fails to understand commands, it would show Hugo dictation by confirming what he thinks he heard

Kiosk UI

Kiosk has a rather relaxing real estate, so we separate the progress bar and navigation bar.

04  
solutions

Problem

There are tons of options here, I am not familiar with any

Solution

Simplify shipping process by asking users a few simple questions to find out their needs and get rid of an overwhelming number of non-descriptive options

Problem

My hands are full of stuff. I don’t have hands for screens

Solution

AI-enabled voice assistant that accepts voice inputs, even several requests in a single command

Problem

What type of box would fit the stuff I am sending?

Solution

AR technology to give box size tip on mobile APP

Problem

I want my package to arrive New York tomorrow, which option works for me?

Solution

Personalized shipping cards to suggest the optimal shipping rate using AI on speed, preferences, and cost

Problem

I want to send a birthday present to my friend, but I’m worried the upcoming holiday season will impact ETA

Solution

Timely notification to advise customers on future delays due to weather, holidays, or calendar events

Problem

Tracking # is too long to remember. Any easy way to share package status?

Solution

Integrated sharing feature in the mobile APP

Problem

I am at the post office, how do I finish dropping off? And which box is Priority Express Box?

Solution

Location-based notification to inform customers on next steps in their tasks

05  
Prototype

protoPie

We use ProtoPie for high-fi mobile APP prototyping. Check out the whole prototype screen recording in our concept video

Voice Prototyping

This is our first time trying voice prototyping. We are excited about how accurate it dictates. The mobile prototyping in the video was recorded with real-time voice dictation

Core Scenario UI Flow

The prototype is based on core scenarios, Jane’s

06
next step

Design for Power User

For power users who are very familiar  with shipping flow, the conversational shipping process may end up slowing them down. It would be interesting to iterate our design to meet their needs, such as jumping steps and multiple addresses input.

Expansion on other services on the kiosk

Our project focus on improving the postal experience, other services on Kiosk, such as renew PO box, passport scheduler, etc. are not included. We are sure there are many opportunities for design intervention as well.

What is the best practice for determining the weight

During our design process, what we struggle with the most is how weight is determined using a mobile APP in-home setting. The most common way is to provide an estimate and re-weight at the post. We are curious to know if there is a technology that would help.

07
reflection

Debate between helpful and invasive behaviors with technology

One of the features Hugo has is to send reminders for events on users’ calendars that might need shipping services like a friend’s birthday. We discuss if grabbing data from the calendar is too invasive, making people uncomfortable. Although the intention is to help users organize their errands more easily, it’s always important to let users have the right to decide how much information they would like to give away to the service.

Privacy concerns: voice Interactions in public spaces

Others might overhear users’ or recipients’ personal information when the voice assistant read the content out loud, so we are not sure if people are comfortable with that. Also, talking to a voice assistant in public spaces is not a common practice yet. That’s why we decide to largely focus on mobile APP in home setting.