E V A L U A T I N G I N T E R A C T I O N S

My Apple Pay experience at stores.

When I was trying to pay with ApplePay at Target, the opening and choosing card flow was quite different from my mental model. The confusing part was when I just tapped on one of the card from the stack at the bottom. I anticipated and wished it would allow me to pay with a new card right away. But there were few more unexpected steps. From this experience, I wondered what other interaction could be possible. So as a first step, I wrote down the steps to point out where the gap existed between the system and my mental model.

3 steps of card picking interaction. It switches the view twice.

1. Activate ApplePay : Needed

2. Unlock the default card : Sometimes convenient, sometimes feel unnecessary

3. Tap to pick a card / open the card list in the "card selection mode" : Could be replaced.

4. Wait and figure out the interaction into the "card selection" mode : Could be shortened.

5. Tap on the card you want to use again : Could be shortened.

6. Unlock the chosen card : Needed

For me, the discrepancy between the current interaction and my expectation was that when I tapped on a card from the list (Step 3) I entered another mode (Step 4) where I should repeat what I thought I just did (Step 5) instead of getting ready to pay (expectation).

I D E A T I N G S O L U T I O N

How do we browse and select on mobile apps promptly and precisely?

Interaction Patterns

So, I decided to reimagine the card-picking interaction. I wanted to compress browsing, targeting, confirming and unlocking process into a seamless interaction. To see what quick-selection interaction patterns exist, I browsed some other apps.

Idea Sketch

Feedback & Insights

• There are different types of usage patterns. - Some people have 1-3 cards registered while some have more than 10 cards, including memberships, bus cards, flight tickets, door keys.

• Prioritize the goals to achieve over the sleekness of interactions. - The wallet affordance could be revamped if necessary.

Iteration

I sketched new layouts and interactions and gathered feedback for each concept from various types of users, and ended up with 2 sketches for 2 directions each.

Speed dating

Users with 10+ cards preferred the two-column layout which shows most of the cards they registered, while users with much less cards showed interests in the simplicity of interaction in the second direction.

A user with 10+ cards on her wallet preferred the two-column layout

P R O T O T Y P I N G

Hi-fidelity Prototyping

Using Origami Studio, I built two prototypes for each user groups. Two-column view and carousel view.

Two-column view prototype

Carousel view prototype

Feedback

• Users with more than 6 cards preferred the two-column view, while users with less than 4 cards preferred the carousel view.

• The two-column view is good to see all cards.

• When a user has only 2-3 cards, scrolling carousel one by one might be enough for card selection in the carousel view prototype.

• In the prototype, card info is simplified. To see if it really works, it is required to test with informations from many different use cases - transportation, memberships, key, flight tickets, debit cards and credit cards.

R E F L E C T I O N

Achievements and Learnings

1. It was great to create two prototypes and tested my ideas in a tight schedule.

2. I learned that starting point could be my own pain point. However, as I ideated solutions, I learned that listening to people and analyzing existing patterns and systems are crucial to develop ideas into a valuable solution.

3. Creating hi-fidelity prototype enabled me to focus on details of micro-interactions. I could test many different values and logics to find the most natural interactions.

4. I enjoyed trying many different functions in Origami Studio. While trying many different logics for the same interaction, I figured what is possible and what is not using a certain patches.

Future Steps

1. Iteration based on the feedback I got- 1) discover more use cases and detailed information to test the interactions in the real context, 2) provide view options in the user interface.

2. Testing a few more steps of mid-fidelity prototypes until get enough detail of actual use cases.