Foursquare is looking to increase the level of engagement with their users and merchants by adding a mobile payment component to check-ins.

Foursquare realizes they are missing out on a huge market opportunity.

Enter
Fourpay

Project Parameters

  • Client: Foursquare/Swarm
  • Timeframe: 2 weeks
  • Goal: Add a mobile payment function to Foursquare's current app

Overview

  • Understand how people use Foursquare currently
  • Understand how people currently use mobile payment apps
  • Design the key screens using the current look and feel of Foursquare

My Role

  • Research
  • Concept development
  • Personas
  • User Flows
  • Sketches
  • Prototyping

Research


Tasks

  • Research the current usage of popular payment applications
  • Download and analyze popular payment applications
  • Survey Foursquare users on use of both Foursquare and payment applications
  • Survey users on pain points

Key Findings

  • Most solvable pain points occur at bars and restaurants
  • Largest pain points involve the amount of time it takes to pay due to lines and delays on receiving and paying a bill
  • Most users split checks when eating out with friends
  • Current available apps do little to solve these problems
  • Most payment apps do not offer the social aspect that Foursquare has available
  • It is possible to extend Foursquare to offer the functionality of payment apps while solving many of these pain points
user research

Concept Development

Solve Pain Points Identified In Research

  • Long lines and waits
  • Keep track of amount spent
  • Check splitting
  • Need to leave early
  • Forget to close tab
concept map Mind map leading to the dynamic check

Solution: The Dynamic Check

  • Updates in real time whenever an item is ordered
  • Contains list of all items ordered and their cost
  • Allows numerous people to check in on the same bill
  • Allows different people to pay for their own items
  • Can pay and tip remotely
  • Saves credit card (or other payment methods) info
  • Offers promotions
dynamic check Early sketch of the dynamic check screenflow

Personas and User Flows

Persona Considerations

  • A range of economic status
  • A range of social activity
  • A range of eating habits

Userflow Considerations

  • Promotions
  • Check splitting
  • Keep track of amount spent
  • Bar tab
  • Pay quickly

Solution: The Three Personas

  • Edward: A 34 year old fundraiser who needs to take out 2 patrons while keeping track of how much he's spent
  • Daisy: A 22 year old barista who's celebrating her birthday on a budget
  • Sam: A 29 year old graphic artist eating out with a large group at a swanky restaurant
Userflow for Sam's Journey
Userflow for Edward's Journey
Userflow for Daisy's Journey

Prototyping and User Testing

Prototyping Process

  • Collaborate on screen sketches of the user flows
  • A team member designs the next wireframe iteration in Illustrator and Omnigraffle
  • I use parts of the Omnigraffle wireframes to create a prototype
  • Keynote used for prototyping due to ease of creating animations
  • After User Testing, I perform a second iteration of the prototype by adding screens in the Omnigraffle prototype.
Example Prototype Sketch Early sketch of screens for a bar tab with award badge
Example Prototype Sketch Early sketch for splitting an item
Bill split scenario. Click through the screens below for a full explanation of navigating Fourpay.