In-store Sales App
by ChargeAfter
Case study | Tablet app product design | B2B2C | 2022
An in-store tablet version of ChargeAfter’s eComm platform that enables merchants to offer customer financing straight from their stores.
Previous Project
Next Project
Project Background
Buy now, pay later (BNPL) is a type of short-term financing that allows customers to make purchases and pay for them over time. Merchants and retailers offer BNPL applications through their ecommerce websites, in corporation with financial institutions. ChargeAfter’s platform connects between merchants and lenders, creating a worldwide financing network.
My Role
I led the design of this project from concept to launch, defined the user experience and created the user interface. I worked in collaboration with the head of product and the dev team.
There were 360 million BNPL users worldwide in 2022.
The BNPL market is worth over $150 billion.
The average amount customers spent on their last BNPL purchase is ≈$700.
The Challenge
Similar to ecommerce retailers, brick-and-mortar merchants may also be able to capture more revenues if they offer BNPL at the point of sale. However, merchants need a solution that allows them to accept BNPL payments in-store. Therefore, the challenge is:
Create an in-store version of ChargeAfter’s eComm platform that will allow end-customers to apply and get pre-qualified for financing in an associate-led process with no paperwork and a simple user experience.
The in-store app also needs to be suitable for white-label usage, so the merchant can customize it to their branding.
The Design Process
Iterative step-by-step methodology was used to complete this project, which is divided into four main stages:
1. Discovery.
The Current In-store Experience
For the launch of the MVP version of the in-store product, ChargeAfter collaborated with a design partner.
The design partner is a large US merchant with over 270 clinics across the country.
Large merchant pain points
-
Old-fashioned Application process that requires a lot of paperwork
-
Many customers late on their payments
-
The sales rep needs to handle the application process on-top-of their job
Consumer pain points
-
The large merchant offers financing with high interest rates up to 30% APR
-
Old-fashioned Application process that requires a lot of paperwork
-
Can get a financing offer only from the large merchant (no other lenders)
One Product, Two Use Cases
The in-store app will support two use cases by two users, the customer and the sales representative:
The Customer
​For the customer, the store facing side is presented in a strategic location at the store, and allows customers to apply and get prequalified for financing prior to the checkout. This way, the customer knows the amount of pre-qualification (the amount of money they can spend in their shopping experience).
The Sales Rep
The sales representative's side is hidden from the customer facing view, and allows the sales representative to create a cart for a new customer or to select an existing customer from the database, in order to checkout and finalize the purchase.
2. Research & Analysis.
Competitor Landscape
In the competitor research, I focused on indirect competitors, meaning products that offer in-store BNPL from internal or external lending partners, as well as Point of Sale (POS) systems. I explored and analyzed some of the existing products in the market, their in-store application flows, explored cool features and examined their user experience and user interface.
User Flows
As the sales app supports multiple personas, the flow is divergent and consists of 3 main screens: the welcome screen is the customer-facing part of the interface, and the Create cart, Consumers and Pending tabs are accessible only for the sales rep.
The Customer
The Sales Rep
The insights so far:
The financing application step is a pain point in the user journey for both customers and sales representatives.
ChargeAfter’s platform offers low interest rates,
which is a major advantage over other in-store apps.
Support both associate-led application and mobile contactless (customer-led) application processes.
3. Design.
UI Iterations
During the design process, I explored similar POS products. To emphasize the purpose of the product, the PM requested a numeric keyboard to be the primary graphic element.
After understanding all the requirements and functionality, I created multiple iterations for the UI which were reviewed by the team until deciding on the usage of tabs to allow easy navigation and clearly separate the different features in the product.
Visual Styling and Design
The visual styling such as colors, typography and interactive component were designed according to ChargeAfter’s platform, to create a sense of connectivity between the two products combined together. Some add ons include the round buttons and the display title in the typography guidelines. In addition, the system display messages styling was adapted to a tablet format.
The Store Facing View is the initial and the default screen. It serves as a screen saver and allows customers to apply and get prequalify for financing without the sales rep presence, through the tablet app or through their personal mobile device, get a line of credit and continue their shopping until they’re ready to checkout.
Create Cart is the first screen the user sees after the log in as that’s the main action the product enables. The cart creation is made by the sales rep with the customer, and they can select the product or service from database, or manually inputting the product’s description. In this screen, the sales rep can start the application and checkout associate-led processes, send a link to the customers mobile and select a customer from the customer’s list to finalize the purchase.
Consumers Tab is accessible through the tabs menu and through the “select customer” interaction on the Create Cart tab. In this screen, the sales rep can search and select a customer to conduct all the actions enabled in the Create Cart tab, in addition to customer-specific actions such as handling pending charges.
Embedding ChargeAfter’s Platform
To minimize dev efforts and deliver in the shortest time, the team decided to implement ChargeAfter’s platform as is, without any special adaptations other then the styling of the outline of the interface.
White Label-ready
The term "white label" refers to the process of creating products or services under the name of another company, then branding them under that company's name.
Using ChargeAfter's white label in-store sales app, merchants can boost sales and build customer trust.
4. Launch.
Usability Testing
Before handoff to the development team, I ran a usability test with 7 participants from different departments in the company, using Maze. The results indicated a usability issue in the customer selection component. Following this insight, I redesigned the component and the behavior of the action.
After the launch of the app, I created a UX satisfaction survey and shared with the sales reps from Milan Laser. The initial results indicate a high-level of satisfaction from the product, and it’s now widely used by the employees at the large merchant clinics.
Impact and Next Steps
Since the in-store sales app initial launch, it became a significant source of financing transactions done through ChargeAfter’s platform.
The results of this project are positive, and yet, there’s much more to do. In future iterations, I’m planning to modify the interface and experience or ChargeAfter’s platform by creating an in-store app tablet version, with the goal of a flawless and frictionless financing application experience.
Increased approval rates for financing applications for the large merchant customers.
Major increase in financing transactions volumes for ChargeAfter.
All 270 large merchant clinics use the In-store Sales App on a daily basis.
