Ironhack prework assignment 2: design thinking

© Vodafone Medien

The (fictitious) Whole Bank has run into a problem: its customers find the conventional credit/debit payment system to be inconvenient when traveling for the following reasons:

  • They may lose their cards
  • Some shops don’t allow credit/debit card payments
  • Physical cards are susceptible to damage

The bank’s innovation department has (fictitiously) tasked me with the creation of a payment feature within the bank’s existing mobile app that lets bank customers pay without having to use a physical card. They would pay using the app on their mobile devices, exclusively when traveling.

Got it.

BUT — this smells suspiciously of innovation for innovation’s sake. Would adding a new feature in the mobile app really solve the customers’ problems? If a customer tends to lose or damage things as critical as a credit card, they might lose or damage their phone. If a shop doesn’t allow credit card payments, is it likely to allow payment by app? In places where cash is necessary, could the app be used at an ATM? Is this feature more advantageous than a competitor’s offering? (Possibly, since there don’t seem to be many options unless the customer wants to switch banks.) And how would this work? Full disclosure: before this assignment I was aware of contactless debit card payment and the ability to pay for things in the Apple store using your phone, but completely ignorant of the term “NFC” (near-field communication), the technology that makes these things possible. NFC is also the magic that lets you enter public transportation simply by touching your commuter card to a terminal.

So let’s start the design thinking process to investigate this task further.

In a nutshell, design thinking consists of 5 iterative stages preceding product implementation: empathize > define > ideate > prototype > test. Repeat until the product satisfies user and business needs. This assignment will cover the first four.

Design Thinking 101, by Nielsen Norman Group

Step 1: Empathize

I interviewed four people of different nationalities and living in four different countries, in person, by Skype or by phone, to learn about their payment experiences when traveling abroad. They all had frustration making payments abroad, some of them common pain points and others specific to their situation. It’s fascinating what insights you get from interviews — experiences and ideas you would never have imagined. Which is why empathy is so crucial to product design. Without it, you’re basically designing for yourself and not letting your product be as useful (and profitable!) as it could be.

Skype interviewing is convenient but you can’t control who will join the call

Step 2: Define

I highlighted my interviewees’ pain points in my notes but it needed further organization so I created an affinity map to group common problems together. You can do this using paper or sticky notes, but I jump on any chance to make a spreadsheet so that’s what I used. 6 main categories floated to the surface:

  1. Losing money
  2. Using money between countries
  3. Spending & value blindness
  4. Card not accepted
  5. Card getting blocked
  6. Card minimum
99% of trees approve of virtual sticky notes

For this assignment let’s focus on the following:

  • Using money between countries
  • Spending & value blindness
  • Card getting blocked

Losing money would be a nice problem to solve, but ATM and exchange bureau fees, poor exchange rates, card minimums and card acceptance are beyond the control of the bank (apart from reimbursing fees and poor exchange rates). NFC-enabled ATMs would enable cash withdrawal using your NFC-enabled phone, but the technology isn’t widespread and a virtual debit card won’t prevent ATM fees.

To help customers use money between countries via a virtual debit card, payment tech like Apple Pay, Android Pay and Samsung Pay would need to be available in all countries, which it isn’t — in France for example! (But France has amazing cheese… pick your priorities.)

Step 3: Ideate

I brainstormed a few solutions for each problem and distilled them down to:

  • Spending & value blindness solution:
    At the “confirm payment” step, the app will display the purchase value in the customer’s home currency, as well as Whole Bank fees.
  • Card getting blocked solution:
    As long as the customer is authenticated by password or fingerprint scan at log-in, the bank won’t block them, even if they’re abroad. But they may still need to enter the card PIN at the point of sale if they’re using a virtual debit card. If they enter the wrong PIN 3 times, instead of blocking the card the app will request 2 security responses then display a temporary PIN (maybe not the most secure method but security isn’t an issue in this assignment).

The bank could help make sure your physical debit card doesn’t get blocked, by detecting when you purchase transportation or accommodation with the debit card in your home country, and sending you an email asking if you’d like to advise them when/where you’re traveling to avoid card blocking, advising what to do if you lose or damage your card (provide a Skype call option in case international calling isn’t possible), and sharing tips like minimizing ATM withdrawal frequency to reduce fees, storing cash in different places on your person.

To resolve the issue of using money between countries, the bank can enable the virtual debit card to be used in any country, including chip-and-pin transactions standard in Europe. But that’s a task for the bank, not the app.

Step 4: Prototype

Now we’re going to sketch some screens to show how this solution will work and how the new feature will integrate into the bank’s app. But what does the Whole Bank app look like? No idea. So let’s borrow my own bank’s mobile app. At this point we’re hatching ideas with pen & paper because we don’t need a polished visual —we’re examining how it works more than how it looks and sketching is the fastest way to do that, plus it keeps you focused on the functionality — you can argue sunset orange versus sunrise orange in a later phase.

Screen 1: Bank app’s home screen (after logging in to the mobile app).
Screen 2: Menu (after clicking menu button the home screen slides right).
Screen 3: Shows the placement of the new virtual debit card feature within the menu (circled in blue). This is the entry point to the new feature. I wasn’t sure whether to call this feature virtual card, e-debit card or wallet but that’s what content writers are for.

Imagine your favorite mobile phone framing these screens

Screen 4: Virtual card home screen.
Screen 5: Shows the card you’re about to use and its daily limit, daily amount left to spend and account balance.

Remember, ugly sketches are ok at this point

Screen 6: After swiping your phone over the point of sale NFC terminal, you see a visual confirmation of the card you’re using, the local currency and your home currency. Clicking “pay” takes you to screen 8. Clicking “cancel” takes you to the list of cards (screen 4).
Screen 7: Shows what screen 6 would look like if bank’s fee was displayed.
Screen 7b:
You can change your home currency by clicking the pencil icon and selecting from the drop-down list.

Screen 8: Payment confirmation + button to return to list of cards (screen 4)

Screen 9: Alert appears if you enter your PIN incorrectly 3 times.
Screen 10:
Modal window with 2 security questions and text fields.
Screen 11:
When you click in a text field, the keyboard appears. You can submit your text with the “confirm” button (checkmark icon) or hit “enter” on the keyboard. Exit the modal by clicking the X in top right corner.

Screen 12: If answer incorrect, “wrong response” appears and text turns red
Screen 12b:
At bottom of modal window, you have options if you can’t enter correct security answers: “cancel” (to give up — takes you to card list page) or “help” (takes you to a page with contact info & a Skype account you can call.
Screen 13:
Confirmation modal for successful security answers, displays a temporary PIN. The “got it” button closes the window and screen 6 reappears (payment screen). But first there should be a pop-up (“you’re about to close this window, do you no longer need to view the temporary PIN?”) to give the customer a last chance to note the PIN.

Key things I learned throughout this process:

Empathize: Interviews need to be planned several days in advance if you want to conduct them in person. Unless you do guerilla interviews.

Define: This was the easiest step.

Ideate: Use a big piece(s) of paper, not a sketchbook, to have room for all your ideas on one page.

Prototype: Sketch on loose leaf paper and cut out the screens with scissors, rather than scanning your sketchbook and cutting and pasting in Photoshop, so you can quickly move the screens around and photograph the whole flow.

Like what you read? Give Amelia Stone a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.