Wikipedia

UI/UX design for the

Redesign of the
Friends Community Bank
ATM Platform
wikipedia atm redesign project
PRESENTED BY IAN CAMPBELL

email: ian@4thofficial.com
Phone: 312.804.5749
web: 4thofficial.com

FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 2

task
Design an automated teller machine (cash dispenser). It doesn’t matter if

the ATM is associated with a bank or if it is a standalone, privately owned

dispenser. Note that we do not expect a complete design for this.

Whatever assets you choose to provide during this time are fine, we

are especially interested in workflow documents over “finished” screens

mock ups.

IAN CAMPBELL | ian@4thofficial.com | 312.804.5749


INDEX
Page 4 - Project definition

Page 5 - Considerations & incites

Page 10 - Current design

Page 13 - Proposed wireframe/design

Page 17 - Design specifications

Page 19 - Visual design concept



PROJECT DEFINITION
Business and design objectives for the project

• The ATM has not been designed for several years and needs to
integrate with the new content management system, analytics
tools, CRM strategy and security systems. What else?
• Increase the number of transactions for each customer by 25%
each month.
• Help the bank become a virtual and digital business and cre-
ate a meaningful relationship with customers.
• Align user experience, branding and design with our online
banking web site, mobile web site and applications, and corpo-
rate identity.
• Timing of this redesign comes at the same time as an increase
in charges for our ATM service. Many competitors are doing the same, but we’re hoping the new features,
ease-of-use and new visual design will help retain current customers and capture new ones.
• Opportunity to up-sell new services to customers throughout the most common ATM user flows.



CONSIDERATIONS & INCITES
I’m taking a few liberties here to demonstrate the kind of discovery style

discussion, brainstorming and deliverables that I believe drive great user

experience and design. It also helps setup the project process and allows

the project management team to begin working with the calendar.



Considerations & Incites
What we’ve learned about our customers, and what are the tangible and intangible considerations that we’ll need to solve for.

TECHNICAL

• Software considerations. There are two primary software products that control the majority
of the ATM’s that we use every day. They are Diebold (http://www.diebold.com) and NCR
software (http://www.ncr.com). Consider them as different operating systems with their
own specific specifications. Is there any kind of iTunes App style approval process that we
need to know about? Task/Exercise: Review both sets of usage/user/design guidelines to
understand what the predefined UI characteristics are, and what flexibly and opportunities exist.
• Hardware considerations. Friends Community Bank uses several different hardware con-
figurations. A combination of old and new machines/computers running a variety of plat-
forms. Are we creating one primary experience that’s optimal for both low and high-end
hardware configurations, or a separate experiences for each? Task/Exercise: Review OS,
CPU power and speed, memory, screen: size, pixel depth and density.
• Content management. What role within the bank owns content delivery? How is content shared across various
customer touch-points? (web, services, mobile etc.) What is the style of content (opening screens, promotions/
ads etc.), and how frequently does it change? Task/Exercise: Interview content stakeholders and create con-
tent flows.



• Feeds. Get an understanding of what content, data, customer profile and security feeds exist between the ATM
and the central technology hub. Task/Exercise: Work with the internal engineering group to map out the system
feeds, and discuss the effort involved to create additional ones.
• Analytics. What are the analytics tools that are currently being used and how can they
best utilized for the redesign? Can we capture the varied user interactions on touch
screens? Task/Exercise: What have we already learned about the current design.

USER EXPERIENCE
• Brand/customer relationship. What role does the ATM service play for a typical customer? Are there enough
bank (physical) locations, and freestanding ATM machines? How often do customer use them? Is there any in-
tegration between the mobile and online banking systems? Task/Exercise: What are the most common use cas-
es and task flows that represent customers?
• Customer demographics. Will vary based off of different geographical locations. For example: Customers life-
styles and needs in Manhattan will vary from customers in a rural town in Illinois. Task/Exercise: Create key user
persona’s to identify needs across: age, user experience, tech savvy, general usage, services, features, fre-
quency and brand. These personas will act as the target audience for user testing throughout the process.




• UI, experience and technical innovation. How progressive can the UI design be from today’s key task flows and
design? Task/Exercise: Prototype (on paper or quick comps) several scenarios that articulate the new features,
UI innovations and task flows.
• Communication. Do customers understand the language/names of the banks products? Is there a clear under-
standing of how they interact with them at an ATM (versus a live interaction with a bank teller)? Task/Exercise:
Simple Q&A with a mixture of customers to gain the above knowledge.

UI DESIGN & BRAND
• Interaction style. Touchscreen or permanent placement. Most
ATM’s have touchscreen capabilities, but not all do. Some older
ones have 6 to 8 predefined buttons that are built into the frame
that surronds the screen. Those buttons, navigation design and style
are there to stay, and only the labels in the monitor can change.
• Color considerations. Blue, green or brown present customers
with a calm and secure mood.




• Environment
• ATM’s are located indoors and outdoors. Consider various weather conditions. Rain/snow will more than
likely be on customers fingers and on the ATM screen during bad weather.
• ATM’s are used during the day and night. Consider lighting conditions.
• ATM can be situated at a variety of different heights off of the ground, and customers come in all shapes
and sizes. Most common buttons/actions should be placed lower (Clearly view-able for shorter or taller cus-
tomers) and to the right in the UI (80% of people are right handed).

I’m stopping here given the time limit for this exercise.



CURRENT DESIGN
Design an automated teller machine (cash dispenser). It doesn’t matter if

the ATM is associated with a bank or if it is a standalone, privately owned

dispenser. Note that we do not expect a complete design for this.

Whatever assets you choose to provide during this time are fine, we

are especially interested in workflow documents over “finished” screens

mock ups.


CURRENT design PAGE 11
Current ATM DESIGN WIREFRAME. TASK: MAKE A DEPOSIT

Home > Sign In > Make a Deposit > Insert Cash or Checks
• The UI fails to clearly articulate what the cus-
tomer should do next. The visual weight of the
elements does not lead the customer to a
specific action. There’s to much of an effort to
do everything and thats not ideal for a suc-
cessful ATM UI design.
• The ‘Deposit’ title at the top of the page
should align with the step in the process (De-
posit > Insert Cash or Checks)
• Body. Type is small. Content is too long. Para-
graph formatting is all wrong. Should be a
concise list that customers can quickly react
to (if its even there at all).
• Promo on the left is highly ineffective.Way too
much copy. Stock photo doesn’t connect
with 90% of the demographic. Contextual rel-
evance of the service to the customer (right
now) is zero. The desire to include the ad has
comprised the success of the entire UI. There’s
also no way to click through the ad to a desti-
nation.
• Bottom navigation row. Having the primary
navigation bar on every screen is not neces-
sary. Its eating up precious real estate. This
I’m using the above wireframe to represent the old ATM design. It’s based of off my local system is not particularly deep with pages
Citibank screen so its actually real. Kind of amazing how much opportunity there is.
and features (Maximum of 2 levels of naviga-
tion), and customers are not browsing content


CURRENT design PAGE 12
Current ATM DESIGN WIREFRAME. TASK: MAKE A DEPOSIT

Continues ...
Home > Sign In > Make a Deposit > Insert Cash or Checks
or sections, they have specific goals that they
want to achieve quickly.

• Primary navigation. The brightly colored but-
tons at the bottom of the page are the most
dominate items on the page. They shouldn’t
be. Different colors for buttons makes them
less usable, and they don’t carry through into
their respective sections so the concept of
a color system breaks down. The black type
on some of the buttons is illegible, and the
use of icons on some of the buttons makes
little sense. Using icons to represent naviga-
tion requires enough forethought to make
sure they’ll work for all possible scenarios and
names. Icons and colors together don’t work
to differentiate navigation, its too much visual
differentiation.

• Back, Insert Cash and Insert Checks buttons.
The user flow for this page is that a customer
has already picked the option to make a
deposit. Why would a customer need to go
back a step when the primary navigation is at
I’m using the above wireframe to represent the old ATM design. It’s based of off my local the bottom of every page. The placement of
Citibank screen so its actually real. Kind of amazing how much opportunity there is.
the back button is not as intuitive as it could
be.



PROPOSED WIREFRAME/DESIGN
People typically want a quick, usable and hassle free experience when

they interact with an ATM. I also doubt it’s desired from a customer stand-

point. This idea is very high-level. It attempts to minimize the steps for key

task flows, and focus on what customers do most often. From experience

I know there’s a ton of predetermined UI restrictions that are tough to

stray too far from the (Definitely not a smartphone). Deep levels of navi-

gation for browsing large amounts of content are a challenge with the

limitations of the available software.


PROPOSED WIREFRAME/DESIGN PAGE 14
Quick, USABLE And hassle free experience


Concept Rational

TOP RIGHT CHANNEL customer minds at ease and possibly in-
crease their time spent at the ATM.
• Communication preference. Tapping this • Start. This block is part of the physical ma-
bar releases a drop down menu that con- chine and is mounted on an arm. When a • Keypad. Placed at the bottom of the arm
tains several language options and modes customer stands facing it for several sec- to take advantage of the arms proximity to
for visually and hearing impaired custom- onds the arm extends toward him. The arm the customer.
ers. Those customers also have options has the ability to change position to align
at the front of the ATM machine (not in- with the customers face or hand. BODY
screen).
• Customers will no longer require a debit/ • UI has a structure of three independent
• Promotion. Offer contextual relevance (+ credit card to access their account. A vertical columns. Swiping each column with
respect) to your customers. The bank is plastic card accompanied with a 4 digit your finger slides the row up to reveal more
aware that that the customer has a mort- password is no longer deemed sufficient for options. Green blocks of color represent the
gage with them, but still presents generic modern day security. They can scan their UI elements that you interact with. The idea
promotions. It’s advertising, customers need retina, use a fingerprint or a scanner to con- is primarily focused around multiple interac-
a reason to care, and that’s accomplished nect with a mobile device. Depending on tions to quickly accomplish tasks.
by knowing what products they have and their level of security desired they have the
how they can save money, and be reward- option to use all three options. • Get cash. Customers can customize their
ed for their loyalty. The two call-to-actions preferred withdrawal amounts through their
give users a mechanism to immediately • Alarm. Irrespective of age, gender or gen- online account or through the preferences
respond. ‘Email Me’ sends info to their on- eration people will never feel entirely se- button on the ATM. Customers can select
line inbox + sends an email with more infor- cure accessing an ATM in a public place. Checking or Savings accounts. Another
mation. The bar code is so a customer can Yes, its a digital screen, but its not your thought was to use a slider to increase/
scan it with their mobile device and learn personal digital screen (like your mobile decrease the amount of cash in one stand-
more about the promotion after they com- device, or home computer). Having the alone box.
plete their transaction (and leave). presence of a security measure might put

Concept Rational

• Make a deposit. Customers can select and by just using type it makes it easier to
Checking or Savings accounts. They enter change languages, without the complica-
the amounts of cash and/or checks with tion of the icon having the same mean-
the keypad to the respective boxes. Click- ing. Two options for what happens when
ing enter on the keypad to go to the next a customer taps on the buttons. The first is
step. Thinking that the touchscreen capa- the content in the body slides to the left to
bility is not used for entering data, only to reveal the relevant content/column. So all
operate the overall UI. the content is really on one wide screen.
The second is the entire menu bar rises to
• Check balance. Customers can select the top of the screen to reveal the respec-
Checking or Savings accounts. Balance of tive content. The three main columns repre-
their respective accounts is presented. The sent 80% of what customers do most often
history button is a secondary option to give and that’s why they take priority. Perhaps
customers a quick history of their most re- some of these secondary options should be
cent balances. a feature of online only.

BOTTOM

• Navigation bar. Presenting several naviga-
tion options. Clear labeling for quick inter-
action. Not using icons or color variations
here. For icons to add value they need to
be clearly discernible, and that would eat
away at the valuable height of the bar. It’s
unclear if there will always be an icon that
supports some of the more obscure terms,


DESIGN SPECIFICATIONS
Designing for any device requires a level of education and specifications.

They could be the equivalent of Apples Human Interface Guidelines,

some of latest Responsive Design considerations, and UI best practices

around sizes of buttons, type size, navigation design etc. That information

would go here. Given the time limitations I’ve not included those details.


design SPECIFICATIONS PAGE 18
Education and Best practises

• To come.


VISUAL design CONCEPT PAGE 19
TIMES UP!

TIMES UP!
My goal was to create at least one visual design
based off of the above wireframe. I unfortunately
went beyond the allotted time, and to stay aligned
with the spirit of the exercise and other designers I
decided to stop. Please let me know if you would like
to extend the time and for me to complete the design
(I’d love to :).

You can view several examples
of my visual design work at:
www.4thofficial.com.

Wikipedia

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Wikipedia

Similar to Wikipedia (20)

More from Ian Campbell

More from Ian Campbell (14)

Wikipedia