Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. UI/UX design for the Redesign of theFriends Community Bank ATM Platform wikipedia atm redesign project PRESENTED BY IAN CAMPBELL email: Phone: 312.804.5749 web:
  • 2. 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 | | 312.804.5749
  • 3. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 3 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 IAN CAMPBELL | | 312.804.5749
  • 4. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 4PROJECT DEFINITIONBusiness 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. IAN CAMPBELL | | 312.804.5749
  • 5. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 5 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. IAN CAMPBELL | | 312.804.5749
  • 6. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 6Considerations & IncitesWhat 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 ( and NCR software ( 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. IAN CAMPBELL | | 312.804.5749
  • 7. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 7Considerations & IncitesWhat we’ve learned about our customers, and what are the tangible and intangible considerations that we’ll need to solve for.• 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. IAN CAMPBELL | | 312.804.5749
  • 8. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 8Considerations & IncitesWhat we’ve learned about our customers, and what are the tangible and intangible considerations that we’ll need to solve for.• 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. IAN CAMPBELL | | 312.804.5749
  • 9. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 9Considerations & IncitesWhat we’ve learned about our customers, and what are the tangible and intangible considerations that we’ll need to solve for.• 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. IAN CAMPBELL | | 312.804.5749
  • 10. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 10 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. IAN CAMPBELL | | 312.804.5749
  • 11. CURRENT design PAGE 11Current ATM DESIGN WIREFRAME. TASK: MAKE A DEPOSITHome > 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. ThisI’m using the above wireframe to represent the old ATM design. It’s based of off my local system is not particularly deep with pagesCitibank 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 contentIAN CAMPBELL | | 312.804.5749
  • 12. CURRENT design PAGE 12Current 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 atI’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 ofCitibank screen so its actually real. Kind of amazing how much opportunity there is. the back button is not as intuitive as it could be.IAN CAMPBELL | | 312.804.5749
  • 13. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 13 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. IAN CAMPBELL | | 312.804.5749
  • 14. PROPOSED WIREFRAME/DESIGN PAGE 14Quick, USABLE And hassle free experienceIAN CAMPBELL | | 312.804.5749
  • 15. PROPOSED WIREFRAME/DESIGN PAGE 15Concept RationalTOP 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 putIAN CAMPBELL | | 312.804.5749
  • 16. PROPOSED WIREFRAME/DESIGN PAGE 16Concept 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,IAN CAMPBELL | | 312.804.5749
  • 17. FRIENDS COMMUNITY BANK ATM PLATFORM REDSIGN PAGE 17 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. IAN CAMPBELL | | 312.804.5749
  • 18. design SPECIFICATIONS PAGE 18Education and Best practises • To come.IAN CAMPBELL | | 312.804.5749
  • 19. VISUAL design CONCEPT PAGE 19TIMES 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:IAN CAMPBELL | | 312.804.5749