PaySimple Mobile - Point of Sale

 
Artboard.png
 

Role

Experience & interaction design, research, user testing, UI Kit & Sketch Library (with nested symbols)

Tools

Sketch, Wireframes & Design
Great Simple iOS UI Kit, Proof of concept
Craft Plugin (InVision), Prototyping

Overview

Prior to this initiative, the PaySimple iOS and Android apps not only lacked parity with each other but failed bring the necessary features from the web app to the mobile platform. With that in mind, the Product, UX, and Tech team decided it best to start from the ground up - a single code base maintained internally.

To start, we had to seriously consider what our merchants truly needed in a mobile platform. Though we had hypotheses, we knew nothing could replace actually talking with merchants. After 10-15 phone calls with merchants utilizing our legacy apps, we had two primary use cases: the Field Service Provider and the Business Owner.

 Field Service Provider: An employee of a business that needs to collect a payment for services rendered on site (home repair, massage therapy, lessons/tutoring, etc)

Field Service Provider: An employee of a business that needs to collect a payment for services rendered on site (home repair, massage therapy, lessons/tutoring, etc)

 Business Owners: Not necessarily the one collecting payments, but needs a snapshot of his or her business health and incoming revenue on the go.

Business Owners: Not necessarily the one collecting payments, but needs a snapshot of his or her business health and incoming revenue on the go.

Building for the Field Service Provider at the outset meant that not only would we be driving PaySimple’s most important metrics, but that of our merchants as well.

We determined our success metrics as:

  • Total monthly processing volume from Mobile 4.0 (new app)

  • Adoption of Mobile 4.0 by legacy app customers (indicator for both marketing and product)

  • Monthly active users who process a payment

We knew that being service providers, our merchants do a lot of repeat business. This meant that in tandem with building out a mobile Point of Sale solution, we had to include a lightweight customer management component. I validated that our merchants expected orders and transactions to be tied to the customer profile and concluded that an additional Order History or Reporting tab would not be necessary for the minimum viable product.

Final Project Requirements:

  • Easy and fast checkout experience

  • Ability to collect custom one-time and recurring payments

  • Access Catalog items (set up on web app) for quicker check out

  • Itemized digital receipts

  • Ability to attach a customer to an order and access saved credit cards & bank accounts

  • Customer Profile with order history, on-file credit cards & bank accounts, and contact information

Design

In addition to the project requirements, the design requirements I set for myself were as follows:

  • Create an app that captures the PaySimple brand and feels like a holistic experience as a partner app to our web app

  • Intuitive, accessible, and easy to use - obvious intentions but something that needs to be included here

  • Self-explanatory

  • Friendly and appealing UI that doesn’t get in the way of our merchants’ goals

After establishing the project & design requirements, I applied some quick PaySimple brand styles to the Great Simple UI iOS kit and built a prototype using the InVision Craft Plugin in Sketch, screenshots below.

Due to time limitations, I had to validate the concept’s usability internally. I had 10 PaySimple employees perform the following tasks:

  • Complete a recurring order with a saved customer. The customer would like to have their card on file billed on the 15th of each month.

  • Cancel the recurring order

It ain’t pretty, but it’s testable


Dev Handoff

Luckily, the internal testing didn’t uncover any major issues with the initial design. The final step was to update styles across the prototype to better reflect the PaySimple brand. During this phase, I made sure to create a Sketch Library of reusable components to allow faster design for future mobile features. To handoff designs to dev, I uploaded all screens to Zeplin and documented interaction requirements (the initial prototype was really helpful for this as well).

Follow Up

Products are never done. After we launched the app to the public, I utilized UserTesting to re-validate our Point of Sale experience. To make sure the feedback from the UT Panel was applicable, I had each tester answer the following qualifying questions:

  • Are you a business owner that sells services (e.g., offers classes, personal training, massage therapist, home/repair/lawn care, legal, accounting or other professional services, etc.)?

  • Do you currently use or have you evaluated software that lets you accept payments and/or manage invoices and billing (e.g., Square, Shopify, Pay Pal, or other point-of-sale software)?

  • Is taking payments through a phone or tablet app an important part of your business strategy? Or, do you plan on investing in mobile payments in the future?

A panelist had to answer yes to each question to qualify for our usability test. We ran 5 tests for each device: iPhone, iPad, Android Phone, Android Tablet.

Tasks:

  • You just finished a job for John Hanson. You need to charge him $325 for today's labor AND bill him $50 on the first of each month for ongoing routine maintenance moving forward. He would like to use his credit card on file for all charges.

  • John Hanson calls you up and asks you to cancel his recurring routine maintenance.

  • Take a few more minutes to explore the app. Please talk through your experience. What is confusing? What do you like? If something didn't work as expected - please describe what you would expect to happen.

This step was incredibly valuable for us as it did uncover usability issues and bugs that existed in production across different devices and OS versions. Nothing a few JIRA tickets couldn’t fix. We moved these tickets up in priority to minimize future debt and have a much more usable product because of it.

Bug Fixes Uncovered in Testing

I’ll add this when I have a moment…


Results

I’ll add this when I have a moment…