Select Bus Service Vending Machine Graphics and Interface Redesign

Select Bus Service Vending Machine Graphics and Interface Redesign

Select Bus Service Vending Machine Graphics and Interface Redesign

Wraps
Before
After

Wraps
Before
After
¯
MetroCard Fare Collector
Speed your Ride
PAY BEFORE
YOU BOARD
Use all 3 doors to board the bus
Dedicated bus lanes
Faster, greener service
Dispositivo de cobro de
tarifas con MetroCard
Acelere su viaje
PAGUE ANTES
DE ABORDAR
Use las 3 puertas para abordar el autobús
Carriles dedicados para los autobuses
Servicio más rápido y más ecológico
¯
MetroCard Fare Collector
Speed your Ride
PAY BEFORE
YOU BOARD
Use all 3 doors to board the bus
Keep your receipt
Dispositivo de cobro de tarifas con MetroCard
Acelere su viaje
PAGUE ANTES
DE ABORDAR
Use las 3 puertas para abordar el autobús
Guarde su recibo
¯
MetroCard Fare Collector
Speed your Ride
PAY BEFORE
YOU BOARD
Use all 3 doors to board the bus
Dedicated bus lanes
Faster, greener service
Dispositivo de cobro de
tarifas con MetroCard
Acelere su viaje
PAGUE ANTES
DE ABORDAR
Use las 3 puertas para abordar el autobús
Carriles dedicados para los autobuses
Servicio más rápido y más ecológico
MetroCard machine
MetroCard machine
Challenges:
• “Pay Before You Board” is a
problematic central message
• Cluttered design makes it hard to
understand at a quick glance
• Unnecessary information, for
example, “Speed your Ride”
• Inconsistent information from
one machine to the other
• English and Spanish are used on
all sides unnecessarily and are
presently relatively
nonhierarchically
Icons reduce
text and
explain the
difference
between the
machines
Central
message is
changed to
“Get Ticket
Here”, with the
explanation,
“Before You
Board Bus”
Branding is
consistent with
the language
used on the
bus shelter and
buses
English and
Spanish are
each on one
side only— one
is always visible
Coin machine
Coin machine

MetroCard Machine Interface
Information
is redundant
and
exceptions
and rules are
not laid out
clearly or
hierarchically
(top and
bottom decal)
Information is
simplified and
treated
hierarchically.
1-2-3 instructions
and icons,
with their exceptions/qualifiers,
are on top decal
One of the
biggest
problems is
that the Push
to Start
button is hard
to locate—
users try
to push
the screen
because
an identical
machine in the
subway has a
touch-screen;
this machine
does not.
Additionally,
the motion
graphics onscreen
have a
arrow pointing
to the start
button, but
in the wrong
place— we
proposed
to alter this
graphic, but it
was outside
our scope.
Instructions are
color-coded with
the area on the
machine. We
recommended,
but were not
able to
implement as it
was outside our
scope, a
re-ordering
of the start,
MetroCard, and
receipt modules.
A bullseye is
added to the
start button to
make it more
visible
Explanatory,
identifying, and
rules information
is on lower decal
Before
After

Coin Machine Interface
Having been designed
originally as a muni meter,
this machine can be
confusing — for example,
because buttons are not
clearly labeled and there
are some defunct
functions
Instruction decal does
not clearly state the
user’s options for
starting, and colors have
little, no, or an incorrect
relationship to those
on the machine—for
example, Step 1, “insert
coins”, is yellow, but so
is the reduced fare
start button.
Information is simplified
as much as possible, put
in the proper place, and is
treated hierarchically.
Instruction decal clearly
states the user’s choices
for starting the machine
Information is colorcoordinated
to the area
on the machine it refers to
wherever possible. Otherwise,
it uses the branding
colors or colors that are
distinct from others on
the machine
Some text is too small
to be easily read by the
visually impaired
There is unnecessary,
inconsistent or redundant
information
Note: this yellow coin
entry decal was an unknown
condition for both
designer and client. We
propose to change this to
green to properly relate it
to Step 2
Before
After

MetroCard Machine Interface Decals
Coin Machine Interface Decals
Top decals: There was very little space for basic identifying information or exceptions—
but we were able to fit these two decals at the top of the machine.
Top decal: Colors were chosen to match corresponding parts of the machine— the middle
color did not provide sufficient contrast for the visually-impaired, so we made it darker.
Instruction decal: All text was required to be 18 pt or larger, with the proper contrast,
for the visually-impaired. Step 1 shows the three ways you can start the machine—
this was split up visually in the previous design so the options were less clear.
Bottom decal: Identifying, exception, fare, and transfer information were all required.
Fare decal
Bullseye decal: Draws
attention to start button
that was previously hard
to see
Reduced fare decal: This
information was required by the
client. The client had observed
older users’ difficulty at locating
the yellow, reduced-fare button.

SBS System: Branding
The wrap’s design
relates to both the
overlapping,
gradient curves on
the bus as well as
the simplified bus
shelter panel, shown
at far left.

Machines in Use

Machines in Use
Users often wait to get their tickets until they see the bus coming; the system needs to be very quick and easy to
use in order for this to work.

Machines in Use
The machines are often used by the elderly and non-English speakers. Icons, simple language, and legible type
help to make the machines easier to use.

Select Bus Service Vending Machine Graphics and Interface Redesign