Christoph Foulger
Sr Product Designer

Text-to-Pay

Gravity Payments prepares a new service for partner integration — API-driven text-to-pay contactless payments. Allowing merchants to deliver a seamless payment experience for their customers onsite, in the car, or at home.

Image alt tag
Text-to-Pay

Summary

Due to many factors, and hastened by the events of 2020, the payment market is moving fast to more contactless payments. Some of the most familiar methods include RFID technology and Digital Wallets using mobile terminals like the Clover Flex that Gravity Payments offers. Text-to-pay is also a popular method desired in automotive, healthcare, veterinary, and service-oriented businesses.

Competitors like autotext.me, SwipeSimple, and Weave offer text-to-pay solutions which put Gravity at a disadvantage in the market.

Partners integrate our Text-to-Pay API into their software, website, or POS. The API initiates an SMS message with a link to a payment page hosted by Gravity Payments. Merchants who use Text-to-Pay can upload a logo and set business-specific information in our customer Dashboard.

Text-to-Pay is launching soon. The team is working to complete the MVP. Expected completion June 2021.

MY ROLE

Product design UX, UI: discovery, storyboard, personas, user flow, wireframes, prototype interaction, user testing, UI design

Code: Build CSS style and HTML framework

Tools used: Figma, Miro, Maze, VS Code, Confluence

Team: Myself, Product Manager, 2 Developers

PROBLEM

  1. High partner attrition to competitors with a full solution including text-to-pay

  2. New partners ask for a text-to-pay solution which we couldn’t fulfill

  3. Customers frustrated about payment options in socially distant situations

  4. Text-to-pay providers charge a hefty fee to both the partner and merchant

SOLUTION

  1. Develop a text-to-pay solution quickly on our API for partners to integrate

  2. Design and release an MVP that provides value to the merchant and end-user to lessen attrition

  3. Make the payment page simple to use and responsive — reduce any potential friction to complete the payment

  4. Build the product on our existing architecture to reduce build time and additional cost to merchants

OUTCOMES

Test-to-Pay will launch in June 2021. Though our final outcomes can not be quantitatively measured yet, we have already seen very positive qualitative reviews.

  • Stakeholders who tested the prototype were extremely positive about their experience.

  • Testing of the prototype and early dev MVP are providing us great responses and insights to refine the page and remove friction to complete payments quickly.

  • Partners previewed the roadmap and final product to our top current partners and one new partner. The interest has been very exciting. They've expressed they will be staying with Gravity as we release this product next month. Sale teams have expressed a high interest from merchants that want to use this feature.

Text-to-Pay
MY LEAN DESIGN APPROACH
Text-to-Pay
Define

Understand the problem

Discovery discussions were held with prospective and confirmed partners that will integrate Text-to-Pay, such as Hippo, Vet2Pet, and Instinct Science. During these sessions, the partners gave us great insight into their business needs and the potential merchants and customer users essential to the experience.

  1. Merchants need a way to accept payments that is contactless and secure.

  2. POS software developers need a contactless payment method that is secure and keeps them out of PCI scope.

  3. Paying customers need the process to be quick and seamless.

Some of the highlights from our partner discussions

  • The main benefits they are looking for are convenience, efficiency, easy API, better experience, and security.

  • Text-to-Pay will be the middle wear between the partner's software and the user making the payment.

  • Credit Sale transaction type will be the main feature of MVP, however, more payment types may be explored in the future.

What we think will happen?

  • As an SMS text solution, the majority of our users will be on a mobile phone — however, pages should scale to any size screen

  • Mobile phone payment options will make the check out more seamless for users that are accustomed to modern payment tech

  • Making this feature available quickly will stop further attrition of key partners to services that offer a solution

Project limitations

  • Short timeline — we want to get this product to market fast

  • The current API payment system, emergepay, will need some hefty upgrades to support the new payments page

  • Due to time constraints, payment wallets may not be part of MVP, but will be a fast follow

  • Need to integrate to 3rd party texting solution for delivery of SMS text messages

Text-to-Pay
Text-to-Pay

Selling the value of design methods

This email should have been a meeting

Initially, my Product Manager did not see the value of further discovery. He planned to draft an email with his initial thoughts on requirements and jump straight into the UI and "knock this out." I was able to impart the importance of not skipping valuable exploration steps. The time spent on discovery pays off in the end.

I successfully conducted 3 mini-workshops:

  • Competitive Review and Heuristic Audit — I created a mood board of various payment pages from competitors and leaders in the field. We performed a high-level heuristic audit to help guide our requirements development

  • Personas — gathering information for who we are building it for and review of the users who are going to use it

  • Initial user flow — including page and field requirements

User Empathy
Text-to-Pay

Personas

Who gets value from Text-to-Pay?

As an API-driven service, our users are POS software developers, merchants, and paying customers. Our focus is on the paying customer up-leveling their experience and ease of payment.

Our first integration partners are in the Veterinary space. I defined 3 personas:

  • Partner Developer — need to integrate with our service

  • Merchant — need to run their business and take payments

  • Customer — need payments to be quick, easy, and flexible

I pulled from our core personas groups and gave each user a name, story, and a face to help humanize the experience. This helps me visualize the user as I work through the project.

Text-to-Pay

Storyboard

A picture with a thousand words is priceless...

As part of gaining empathy for the users and understanding the story, I used Miro to create a quick storyboard. Miro's iPad app has simple sketching tools that kept me from trying to make it look pretty and spend the time delivering a story.

The heroes of the story are our identified personas that use VetOfficeManager (not real) software.

This method humanized the user's experience and gave context to daily life routines we are making better.

Design

Wireflow

It all came down to the wire

One of my favorite methods is combining the user flow with a quick wireframe. Especially when the user flow is short and the project has a lean timeline.

When I presented the wireflow to stakeholders and the dev team, I was able to iterate fast using my wireframe components and made remote collaboration a breeze. During this remote collaboration, we were able to identify, as a team, obstacles we would face at implementation and patterns that may slow the user.

There were 2 flows to established for our user groups: Text-to-Pay and Dashboard set-up.

Text-to-Pay

UI Design

In all great collaborations, it's about U & I

There was no need to develop a new design system or pattern library. Using the proven components and styles from our core system saved time in design and development.

The UI design was intentionally simple. The payment page contains the merchant logo so the UI should not distract from the merchants existing visual standards.

Plans are in the roadmap to include further customizations by the merchant.

High Fidelity Prototype

Figma Prototype, includes desktop and mobile

Prototype and test

Guerilla testing for the win

With a tight timeline and simple design, I wanted the testing to be as short and as effective as possible. Using Figma prototypes I engaged our Customer Support, Developers, Product Manager, and random family/friends.

There were no big surprises from the testing. The most valuable learning was validating the iterations made during the wireflow work. The testing revealed the importance of having development involved early during the design process.

The prototype embedded is a sample of both mobile and desktop versions of the prototypes in one. Give it a spin!

MVP
Text-to-Pay

Building the MVP

Devs love diagrams

As part of the handoff process, I gather all the UI's into a UI flow. This helps direct the developer to the UI element they are working on.

I've created a custom arrow & flow component library that can make this process very fast. This method is more effective than delivering a prototype to developers. Within the flow, I annotate screen elements with interaction samples, animation timing, and alternate states.

Using Figma's inspect mode eliminates the need to go into deep redline details.

Is that a unicorn I see?

I hate the description Unicorn to describe a designer that codes. I work directly with the backend developers to deliver the HTML structure and CSS style framework. The experience I've gained through my career and the many hats I've worn make me a versatile member of an agile team.

Text-to-Pay

The final word

There is still some work to deliver the Text-to-Pay MVP by June. Though our final outcomes can not be quantitatively measured yet, I am encouraged that the solution will be well received.

If you made it this far and missed the OUTCOMES above, here they are again...

  • Stakeholders who tested the prototype were extremely positive about their experience.

  • Testing of the prototype and early dev MVP are providing us great responses and insights to refine the page and remove friction to complete payments quickly.

  • Partners previewed the roadmap and final product to our top current partners and one new partner. The interest has been very exciting. They've expressed they will be staying with Gravity as we release this product next month. Sale teams have expressed a high interest from merchants that want to use this feature.

Continual refinement

We built Text-to-pay with analytics to track usage. Using HotJar we will be recording user visits and watching for UX friction and where the product can be improved.