Figma Prototype, includes desktop and mobile
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.
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
Timeline: Mar 2021 – Jun 2021
PROBLEM
High partner attrition to competitors with a full solution including text-to-pay
New partners ask for a text-to-pay solution which we couldn’t fulfill
Customers frustrated about payment options in socially distant situations
Text-to-pay providers charge a hefty fee to both the partner and merchant
SOLUTION
Develop a text-to-pay solution quickly on our API for partners to integrate
Design and release an MVP that provides value to the merchant and end-user to lessen attrition
Make the payment page simple to use and responsive — reduce any potential friction to complete the payment
Build the product on our existing architecture to reduce build time and additional cost to merchants
OUTCOMES
Test-to-Pay launched in June 2021. However, I left Gravity before the final launch. Though I could not finalize quantitative measurements, we saw very positive qualitative reviews.
Stakeholders who tested the prototype were extremely positive and excited about the experience.
Testing of the prototype and early MVP provided thoughtful responses and insights to refine the page and remove friction to complete payments quickly.
Previewed the roadmap and final product to our top partners. The interest has been very exciting. They expressed they will be staying with Gravity as we released the product in June 2021.
Sale teams expressed extremely high interest from merchants that planned to use this feature.
MY LEAN DESIGN APPROACH
Continue reading to see how I applied principles of a lean design approach to bring Gravity Payments Text-to-pay service to our partners, merchants, and customers to market fast.
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.
Merchants need a way to accept payments that is contactless and secure.
POS software developers need a contactless payment method that is secure and keeps them out of PCI scope.
Paying customers need the process to be quick and seamless.
Highlights from our partner explorations
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
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, 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
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.
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.
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
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
Building the MVP
Devs love diagrams
As part of the handoff process, I gather all the screens 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.
The final word
There is still some work to deliver the Text-to-Pay MVP by June before we start making it rain with profits. 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.