Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ATM UI prototyping


Published on

ATM UI prototyping for withdrawing and PIN change

  • Sex in your area is here: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here

ATM UI prototyping

  1. 1. ATM UI Renovation<br />Seung Wook Lee<br />July 6, 2011<br />
  2. 2. Index<br />Design Concept<br />Interaction Map<br />Grid System<br />Screen<br />Receipt Design<br />ATM Design<br />Appendix – UI Sketches<br />Note<br /><ul><li>Some texts on UI can be replaced by icons or images
  3. 3. Collected ATM usability problems from two user interviews and a web page;</li></li></ul><li>1. Design Concept<br />Business Objectives<br />Improve overall ATM experience<br />It can enhance its brand<br />It can save costs<br />Users might face problematic situation such as<br />Users leave after getting cash without their ATM card which is in the machine<br />Sometimes users forget taking receipts, and leave quickly<br />Some steps are not necessary. “I do not print out receipts, but every time I had to click No-print.”<br />Hard to park within reachable distance from ATM<br />Users do not recognize that they can change PIN with ATM<br />“Withdrawing cash is boring, and I cannot recognize it will be completed quickly., although it is quick actually.” <br />Sometimes sunlight reach the display panel, so users have difficulty to read the screen<br />Some icons look clickable, but actually they are not<br />“ I want to input number information on the touch screen, not on the physical numeric buttons.<br />
  4. 4. 1. Design Concept<br />Minimal Errors with Minimal Steps<br />Prevent Errors<br />Always display feedback and process<br />Provides buttons to navigate previous pages<br />Over-emphasize critical messages and buttons<br />Keep strict design consistency among relevant information and buttons<br />Minimize Steps (Clicks)<br />Merge relevant steps<br />Display multiple steps on one screen<br />Provide shortcuts<br />Minimize the amount of information<br />Enhance marketing functions of ATM<br />Deliver valuable information to connect to customized promotions<br />Provide ways to deliver detailed information if users want<br />Provide better convenience<br />
  5. 5. 2. Use Flow<br />A customer who has only one account and is withdrawing $90<br />Splash<br />Processing<br />and Greeting<br />Splash<br />Enter PIN<br />Select Account<br />Select Transaction<br />Confirm<br />Another Transaction?<br />Greeting<br />Splash<br />Processing<br />and Greeting<br />Renovated Process<br />Conventional ATM clicks<br />Renovated<br />ATM Clicks<br />Enter PIN<br />Enter PIN<br />Select Account<br />Select Account<br />Select Transaction<br />Select Transaction<br />Insert card<br />Input Additional Info.<br />Input Additional Info.<br />1 click<br />No Click<br />Confirm<br />Confirm<br />No Click<br />2 clicks<br />when customers have only one account<br />1 click<br />3 clicks<br />2 click<br />Another Transaction<br />4 clicks<br />5 clicks<br />Customers <br />click 5 times and view 7 screens<br />Customers <br />click 2 times and view 3 screens<br />
  6. 6. 3. Grid System<br />Header<br />1 column<br />Key Visual Area<br />Header<br />2 column<br />Key Visual Area<br />ATM Card Display Area<br />Header<br />3 column<br />Step Display Area<br />Key Visual Area<br />ATM Card Display Area<br />
  7. 7. 4.1 Splash screen<br />1 column<br />TheLowest Interest Mortgage<br />UIDG Guarantee!<br />Print Detail<br />For Transaction<br />Please Insert <br />ATM Card Here<br />ATM Card Reader<br />The Lowest Interest Mortgage<br />Receipt Printer<br />Description<br />- When customers want to know promotion details, print out a check size promotion brochure through the receipt printer. It extends the amount of marketing messages.<br /><ul><li>WA large bank wants to improve its overall automated teller machine (ATM) experience, not only to enhance its brand, but also to reduce costs by driving customers to the ATM. Assume you will be working with a third party industrial design firm for the ATM’s hardware design and that visual designers will be responsible for the final graphic treatment of the interface. Your job is to design how the product interacts with users, including any software and hardware-based interaction. You are required to create</li></ul> Go To: Call: 919.889.1820<br />A check size promotion brochure<br />
  8. 8. 4.1 Splash screen - 2<br />1 column<br />TheLowest Interest Mortgage<br />UIDG Guarantee!<br />Print Detail<br />ATM Card image<br />ATM Card Reader<br />Description<br />- Display the ATM card image to make sure a customer’s ATM card is inserting and inserted. It prevents that customers leave without their ATM card. <br />Physical ATM Card<br />
  9. 9. 4.2.1 Enter PIN<br />3 columns<br />Please Enter PIN<br />PIN<br />Cancel Transaction<br />And Return Card<br />Description<br /><ul><li> As soon as customers type the 4th digit, it goes to the next step.
  10. 10. No “Enter” and “Clear” button at the initial trial </li></li></ul><li>4.2.2 Enter PIN – Retry PIN<br />3 columns<br />Your PIN is entered incorrectly.<br />Please Re-Enter PIN<br />PIN<br />Enter<br />Cancel Transaction<br />And Return Card<br />Clear<br />Description<br />- No “Enter” and “Clear” button; As soon as customers type the fourth digit, it goes to the next step.<br />
  11. 11. 4.3 Select Account<br />3 columns<br />PIN<br />● ● ● ●<br />Account <br /> Checking 982012356<br />Cancel Transaction<br />And Return Card<br /> Saving 989013456<br /> Saving 989013987<br />Description<br /><ul><li> If the customer has only one account, skip this step.</li></li></ul><li>4.4.1 Select a Transaction<br />3 columns<br />PIN<br />Select<br />Transaction<br />Completed Step<br />not clickable<br />● ● ● ●<br />Completed Step<br />Clickable<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />Current Step<br />$20<br />$40<br />$80<br />Other<br />Amount<br />Balances<br />Deposit<br />Transfer<br />More Options<br />Description<br /><ul><li> Display withdrawal options on the 1st line and frequently used transaction options on the 2nd line.
  12. 12. The 2nd line is customized menus by tracking the user’s transaction history.</li></li></ul><li>4.4.2 Select a Transaction<br />3 columns<br />PIN<br />Select<br />Transaction<br />● ● ● ●<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />Withdrawal<br />Enter Amount<br />$ 300.00<br />Account <br />OK<br />Clear<br />Cancel<br />Description<br /><ul><li> Enter the amount of withdrawal</li></li></ul><li>4.4.3 More Options<br />3 columns<br />PIN<br />Select<br />Transaction<br />● ● ● ●<br />4.4.1 Select a Transaction<br /> Select “More Options”<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />$20<br />$40<br />$80<br />Other<br />Amount<br />Balances<br />Deposit<br />Cash<br />Transfer<br />More Options<br />Direct<br />Deposit<br />Deposit<br />Check<br />PIN<br />Change<br />Language<br />Description<br /><ul><li> Display all options
  13. 13. “More Options” button is grayed and becomes not clickable</li></li></ul><li>4.4.4 PIN Change<br />3 columns<br />PIN<br />Select<br />Transaction<br />● ● ● ●<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />Change PIN<br />Enter New PIN<br />Change PIN<br />
  14. 14. 4.4.5 PIN Change<br />3 columns<br />PIN<br />Select<br />Transaction<br />● ● ● ●<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />Change PIN<br />● ● ● ●<br />Re-Enter New PIN<br />Change PIN<br />
  15. 15. 4.4.6 PIN Change<br />3 columns<br />PIN<br />Select<br />Transaction<br />● ● ● ●<br />Account <br />Checking 982012356<br />Cancel Transaction<br />And Return Card<br />Change PIN<br />Your PIN has been Changed<br />Change PIN<br />Send New PIN by email<br />Send New PIN by Phone<br /><br />919.889.1820<br />Finish and Return ATM Card<br />
  16. 16. 4.5 Processing<br />2 columns<br />You will receive <br />Cash, Receipt, and ATM Card<br /> You have taken CASH<br />Cancel Transaction<br />And Return Card<br /> Take Your Receipt<br />Take Your ATM Card<br />Description<br /><ul><li> Display all events that will happen.
  17. 17. Each event box show dynamic and descriptive messages. For example, at the first box, the messages change; “Counting Cash”  “Take Your Cash”  “You have taken CASH”
  18. 18. Current message box is highlighted, and after each event completed, the message box is grayed </li></li></ul><li>4.6 Final Greeting<br />1 column<br />THANK YOU<br />If you want another transaction, please re-enter your PIN.<br />As-Is: Customers are required to select “Make Another Transaction” or “Finish Transaction” before this thank you message.<br />Description : Customers can leave without the former step. A person behind the customer will not be able to access the customer’s account without the PIN.To prevent accessing the account by another customer who saw the PIN on the quiet, the ATM card holder is required to insert his/her ATM card again at the last additional critical transaction. (Hypothesis: majority of customers use ATM for single transaction.)<br />
  19. 19. 5. Receipt Design<br />Description<br /><ul><li> Use backside of the receipt to deliver valuable and attractive information.
  20. 20. Provide customized promotion based on the information For example, for a customer who takes a trip often, recommend a reward credit card which can transfer reward point to flight membership mileage. </li></li></ul><li>6. ATM Design<br />Description<br /><ul><li> Equip an arm between ATM and the display panel. So Drivers can move the display panel closely regardless height of the drivers’ position.
  21. 21. The display panel has upper and lower handles. Without holding the handle to adjust the display position, the position is firmly fixed.</li></li></ul><li>Appendix – UI sketches: Splash page, Print, and Insert card<br />
  22. 22. Appendix – UI sketches: Multi Steps in One Page<br />
  23. 23. Appendix – UI sketches: PIN, Customized Short-Cuts<br />
  24. 24. Appendix – UI sketches: Processing Page<br />
  25. 25. Appendix – UI sketches: PIN Change<br />
  26. 26. THANK YOU<br />If you have any question, please email or call me<br />Email:<br /> Phone: 919.889.1820<br />Seung Wook Lee. 7/6/2011<br />