Adding mobile payments to the Foursquare app
My third project for the User Experience Design Immersive at General Assembly was to add a mobile payment feature to the existing Foursquare app to drive engagement for users and merchants. My team had 2 weeks to run market and user reseach, come up with a design solution and test it with users.
Realising this project has really been an amazing experience for me, and I would like to share the process and the results in this article. Click here to see the final result, a clickable prototype of the Foursquare mobile payment solution.
RESEARCH AND IDEATION
Mapping out the competitive scenario
Our research process started mapping out the complex competitive landscape around mobile and card payment technology providers, an area were many players are competing and often struggling to capture early adopters (see this Accenture report on mobile payments adoption)
We then crossed this axe with online discovery and loyalty online platforms, and traced out the new strategic positioning of the Foursquare app. A very promising one, since the discovery component can play an important role in driving uptake.
Running a survey, and interpreting results
We run a survey on 76 people to investigate their habits and pain points regarding payments in physical locations, and their use of Foursquare. At the end of the survey we were able to identify two main problems to solve with our solution: the disengagement of Foursquare users, and the problem of paying by card for small amounts in coffee shops and shops that ask for a minimum amount to take card payments, or only accept cash.
Users interviews and persona creation
The second step of our qualitative research has been focused on interviewing a sample of users that replied to our survey telling us that they were no longer engaged with Foursquare, and at the same time felt strongly about the problem of minimum card payments.
After conducting 7 in dept interviews, we were able to abstract three personas that represent the Foursquare audience. The primary persona turned out to be Olivia, a young professional that visits chain coffee shops during the week, and explores independent coffee shops at weekends.
Mental models and emotional mapping
Card sorting has been used to construct mental models for choosing and paying for a coffee, and to screen a variety emotional responses of users in precise scenarios, such as when facing the minimum card payment problem. We mapped out a range of responses covering a wide spectrum, from the altruistic and cooperative reactions ( e.g. buying an extra coffee for a friend or a stranger), to uncooperative behaviours such leaving the place in anger, and entering a different coffee shop.
Prioritising features
Thanks to our research, we were ready to define users needs more precisely, and prioritise them using the MOSCOW framework. We grouped features into different categories, from the essential to undesirable. This helped us focusing on what was strictly necessary to build, since we were request to prototype a minimum viable product to launch the service.
TESTING AND PROTOTYPING PAYMENT MECHANICS
Design studio: sketching different payment solutions
Arrived at end of our research phase, we were finally ready to start sketching our ideas and test them with users.
In line with our priorities, we decided to getting started by figuring out what the best mechanic for payments would be. To explore radically different solutions, we used the design studio technique.
At the end of the design studio session, each of us came up with an original and radically different solution for solving the same problem in a very limited amount of time. Then we picked a total of four possible mechanics to test with users.
We decided to test these four different solutions with a role play. We asked three different users to interpret the role of a customer in front of a till, to order a coffee and simulate the payment using the four different methods.
The role play was an incredibly accurate and fast way to discard all of them. We got to discover, for example, that people wanted a very intuitive and agile method, that still, though, ‘feels like a transaction’, also they were literally horrified by the perspective of giving away their telephone number in order to pay with their mobile credit, and didn’t want to preselect their order from a menu while standing in front of the barista, they wanted to interact with the barista. The relationship with the barista seemed crucial: ‘ I want to be served, and want to talk to the barista’. For the same reason, they were not comfortable with a mechanic that requires customers to input the amount to pay, they wanted the barista to do the job for them.
Field testing a new paper prototype
As a result of this tests, we unvalidated all the options we came up with, created a new paper prototype, and went testing and researching in various London independent coffee shops with a strong presence on Foursquare.
Click here to see the clickable paper prototype we tested with users in four different locations.
Contextual enquiry
An important part of our research has also revolved around testing available mobile payments solutions, playing the part of the customer that is using this method for the first time, and then interviewing merchants to gather feedbacks about their experience with this new methods from the other side of the till. We tested Droplet at Prufrock café, in Farringdon, and YOYO at Hummus Bros, Islington.
Thanks to all the testing and field research, we finalised the design of the payment mechanic: a code generated in the app at the moment of payment, that can be scanned by another mobile device. We then went back to the drawing board, and studied how to integrate this mechanic into the current structure and visual identity of the Foursquare app.
We went through different reiterations of several screens, and tested variants of the first payment page with users.
Finally, our solution evolved from a sketched paper prototype into a wireframe, and from a wireframe into a fidelity mock up.
TESTING AND PROTOTYPING ENGAGEMENT INCENTIVES
Design studio: sketching different solutions to drive engagement
Once finalised our solution for the payment mechanic, we still needed to understand what was the best way to incentivise the adoption of the new method of payment. So we decided to run a new design studio session, in order to come up with a few quick testing ideas of payment mechanics.
By the end of the session, we finalised two ideas that we wanted to test with users:
User testing engagement incentives
We tested again in coffee shops or with Foursquare users, and we soon figured out that none of the two option was appealing for them.
Users unvalidated both our options, but also told us exactly what was appealing for them. They told us they wanted to be surprised, and feel privileged. They wanted a treat, something as unpredictable Asos flash sales.
At this point, we had a better understanding of the kind of incentives we could use to engage Foursquare users. We just needed to go back to the studio and start sketching again.
Once again, we worked on incorporating the ‘Flash Sales’ incentive within the existent look and feel of the Foursquare app, and transformed paper prototypes into wireframes, and wireframes into hi-fi mock ups.
NEXT STEPS
The final prototype we have build is an MVP. Having more time to develop the project, it would have been great to develop these two areas:
User adoption
Integrate a solution for extending the uptake to friends of the early adopters. During our research, users told us that they would only feel comfortable paying with their mobile if one of their friend is recommending it to them.
Merchant adoption
Work on optimising the solution for café owners. During our contextual enquires, we got to know that speed at the counter and the demographic of the clients that will use the application are taken into account when choosing a mobile payment provider.
Thanks for reading!
Sketches from this project have been featured on Smashing Magazine, in an excellent article about paper prototyping.
Want to know more? Email me at martafioni@gmail.com or check out my online portfolio at www.martafioni.com
