I designed the MVP for Swypeless - a mobile contactless payment app for small businesses
View Final PrototypeIn the midst of a global pandemic, consumers are increasingly uncomfortable paying with cash, credit cards, or touching point of sale (POS) systems.
Swypeless is a mobile app that allows small businesses to accept contactless payments through QR payment technology.
discover
To learn more about the problem space, I used userinterviews.com to recruit 14 business owners experienced with POS systems such as Square, Shopify, and Vend. Key findings:
🔍 Many interviewees complained of transferring sales data from their POS system to 3rd party software (i.e. accounting, customer management, booking). Merchants described this work as tedious, but necessary.
🔍 Merchants complained of high transaction fees and long wait times of money transfers. This was especially true for businesses with either thin profit margins or lackluster sales due to the pandemic.
🔍 POS hardware devices were another area of frustration. Common complaints were: magstripe reader's unreliability, bluetooth connectivity issues, and dependence on cellphone coverage to take orders.
discover
Alongside user interviews, I analyzed major POS competitors for strengths and weaknesses. Screens of each app's major user flows were also captured.
DEFINE
I constructed three provisional personas, each based around pain points and behavioral patterns found in the discovery phase.
DEFINE
Of the three personas, Connected Cora's pain point was loudest and clearest. Most interviewees simply hated manually entering sales data from a POS app like Square to a third party app like Quickbooks. I made several strong recommendations for Swypeless founder Chris to pivot and solve for Cora's problem.
Unfortunately he did not agree. Chris was months into developing the QR-payment codebase at this point, and wanted to see this technology through completion. I believe commitment bias was strongly at play.
In the end Chris decided to base Swypeless around the general population's fears of touching physical POS systems or paying with cash / credit cards amidst a global pandemic.
DEFINE
User flows were created to clarify how people would accomplish key goals within the app.
DESIGN
Low-fidelity mockups were sketched to define a general direction of the app's core user flows.
DESIGN
Mid-fidelity screens were designed for all screens of the MVP. I created a prototype in preparation for our first round of user testing.
TEST
I recruited 8 people from the original user interview round to take part in a usability study. The goal of the study was to uncover pain points or usability issues within the app. Participants were asked to complete three tasks:
☑️ Create a new sale (from the product catalog view)
☑️ Create a new sale (from the keypad view)
☑️ Add / edit a new product
TEST
01
We quickly realized during our usability study that entering a sale was the primary task users would carry out on this app. Click the right arrow above to learn how I iterated the original design based on this and other insights.
01
To focus user attention to complete a new sale, we decided to make screens related to this core action take up the entire screen.
01
Going full screen also freed up space to move the checkout button to the bottom of the screen. Not only did this help guide users attention to this core action, it was easier to access by the user’s thumb.
02
The keypad was designed for merchants to add custom items to new orders. Usability tests showed the following issues:
🔍 Users didn't understand the purpose of this screen (most thought it was a calculator).
🔍 Users assumed the orange plus was used to add numbers together.
🔍 Users wanted the ability to add a title to the custom item.
02
To clarify the purpose of this screen, I changed the title from ‘keypad’ to ‘custom sale’.
02
I also removed the plus button and replaced it with a clearer ‘Add to Cart’ button at the bottom of the screen. This freed up space to add a delete button, which users also requested.
02
Lastly I added the ability for users to add/edit a title to their custom order (another commonly requested feature).
03
The review order screen was designed for merchants to view items currently added to the basket. Usability tests showed the following issues:
🔍 Many users requested the ability to add/edit item quantity within this screen.
🔍 Users didn’t use the toggle buttons for sales tax, request tip, pass fees.
🔍 Users wanted the ability to add custom notes for both the customer and their internal team
03
In order to include an add/edit quantity button without making the screen feel busy, I added a tap to reveal feature.
03
I removed various toggle buttons (tax, tip, pass fees) that participants in our study didn’t use. This freed up space to add a feature that users did request: customer and merchant facing notes.
DESIGN
I asked Chris to pick three adjectives to describe Swypeless. After a few nights chewing on the question, Chris came up with modern, secure, and fun.
I used those adjectives as a compass to design a style guide for the app.
DESIGN
Once brand guidelines were established, I created a component library to ensure visual consistency and workflow efficiency.
DESIGN
With components at hand, I designed a high fidelity version of each screen and tied them all together with a prototype.
