The project / FandyPOS
Domain / B2B, Fintech
Year / 2023
Responsibilities / UX Research, App UI, Design system, Website, Interaction Design, Prototyping
“Crafting POS android soft from scratch
OVERVIEW
While the trend of white-label POS is growing, our client aimed to enter this market to enhance their payment ecosystem and get a new source of transaction revenue. While major players target large, experienced businesses, we focused on an affordable, user-friendly option for small and medium-sized businesses in emerging markets—entrepreneurs with limited budgets and technical expertise. We prioritized developing a scalable MVP with future enhancements in mind.
CHALLENGE
Our team's goal was to enter the growing market of small and medium-sized businesses, offering entrepreneurs a competitive and easy-to-use software solution. We needed to create a system that empowers clients with different types of payments: cards, QR codes, payment links, and cash.
Initially, the task was to develop POS software for Android-based devices. However, understanding that our audience consisted of new entrepreneurs who might not be familiar with new technologies or ready to invest in expensive equipment, the task expanded to include offering a simple solution: Soft POS, which turns a phone (both Android and iOS) into a payment terminal.
DISCOVERY
The discovery phase aimed to find the right balance between a basic MVP and complexity. This was challenging, as the system could be used in various contexts, environments, and scenarios. Users could be store owners, cashiers, drivers, or even customers interacting with the system. By focusing on potential pain points and needs, we were able to identify key scenarios and direct our work toward the most relevant solutions.
Personas
Due to time constraints, our team couldn't conduct detailed user research, and I wasn't provided with data on potential user personas. To narrow down the broad range of scenarios and focus on the most relevant ones, I created a few personas based on open-source information and used ai (based on real data).
Once reviewed and approved by the team, these personas provided a clear starting point for our work.
Creating personas helped narrow down the range of use cases and provided a clear starting point for the project. Although we did not conduct in-depth user interviews or observational studies, I enthusiastically took the opportunity to have short conversation with baristas in my city to hear about their firsthand experience with POS terminals. What I learned emphasized the importance of designing some flows as short and subtle as possible, as users interact with the terminal multiple times a day for repetitive tasks.
"I work with the terminal all day, performing the same repetitive actions, and it really frustrates me when I have to go through steps that could be simplified. For example, the confirmation step after entering each product feels unnecessary and slows down the process."
One of my local baristas
For competitor research, we focused both on market leaders (e.g., Square) and smaller players in emerging markets (such as PayMaya in the Philippines), targeting the same audience as ours. A detailed study of competitors' UI solutions was conducted alongside an analysis of the various contexts in which the product could be used. This helped identify common design patterns, such as large buttons, clearly visible numbers, and easy access to the checkout process.
Another insight from the UI analysis was that most competitors had a basic visual design, which led us to hypothesize that our product could stand out by incorporating bold and attractive visual accents
Context of usage
Competitor UI Analysis
DEFINE
Information architecture
The competitor research revealed two main approaches to structuring the information architecture for this product. The most common option was to use a dashboard as the main screen, but we chose a different approach. Since the checkout process is the most frequent action, we made the checkout keyboard the default screen, following the example of Square.
Detailed user flow
Wireframe iterations
A detailed UI analysis helped me gather best practices and combine them into a fully fitting solution. For instance, iterations on the Keyboard page were crucial for improving usability, as it served as the primary tool for the user.
DESIGN
Checkout flow
While building the checkout flow, I focused on balancing flexibility with a streamlined, simple process. Users can complete the checkout either by manually entering items through the keyboard or by selecting items from the library. The library flow was based on common, familiar patterns from e-commerce, ensuring ease of use.
SoftPOS and Tap to pay
To meet the needs of our target audience, we aimed to provide a solution for accepting payments without requiring additional hardware. To achieve this, we integrated SoftPOS (Tap to Pay), a growing trend that allows users to turn their smartphones into payment terminals.
Transactions
When designing the transaction page, my vision was to provide users with access to valuable data insights. This raised important questions about the type of information they would find most useful: Would it be the best-selling item? Or perhaps the busiest days of the week?.
Item management
The main challenge in designing the process for creating and managing items was to give users the ability to set different prices for various product options (like sizes). By analyzing competitors, we found popular approaches, such as using product variations and modifiers. To make things simpler, we created Option Sets, which allow users to create product variations easily.
Product variations are combinations of options from the set. Each variation can have its own price or be turned off if not needed.
Edit order
The process of editing order has 2 variation depended on which method (Keyboard or Library) was used
Tipping
We introduced a tipping system that allows sellers to configure tips as either a percentage or a custom amount entered by the customer, depending on the cultural context.
DESIGN SYTEM
The challenge in creating the design system was accommodating the software's use on very small-screen devices. Taking the smallest screen size among the company’s planned white-label devices as a reference, I designed a scalable system with two main element sizes.
OUTCOMES
My work on this project paused at the stage where developers began coding the MVP with core functionalities. The product's current state includes the following key components: Checkout, Library, Transactions, Reports, Statistics, Tipping, Customer List, Refund, My Hardware, Sign Up/Sign In, Onboarding, Profile Info, Locations, Payment Integration, and a landing page for the client's website.
The general outcome:
-
Developing an optimal MVP with scalability and future enhancements in mind
-
Designing a cross-platform design system compatible with various devices
-
Seamless flows for multiple payment methods
-
Prototipes
KEY LEARNINGS
-
Researching device usage across diverse physical contexts and scenarios
-
Building scalable cross-platform design systems that should be adopted for a variety of screen sizes
-
Developed an MVP and gradually enhanced it with new features
-
Colaboration and art-direction with the illustrator
What I would propose to consider for future iterations:
-
I would test the hypothesis of adding an additional checkout method—a units calculator—allowing users to select a product and apply measurements in kilograms, pounds, liters, etc.
-
I would design tutorial onboarding flow and mesure the Onboarding Completion Rate before and after
-
I would consider unifying the order display for both manually entered orders and those created from the item library, aiming to combine them for a more consistent experience
-
Design a discount program feature so customer can scan QR for getting loalty program
-
Provide merchant a presets for checkout so they can set as defauld the one which is the most relevant for their business (curently keyboard is default)
