Simplifying Klakpad Sella's mobile POS
Klakpad Sella is business management software for small and medium sized businesses. It covers sales, inventory, point of sale (POS), and other business operations.
Sella was built web first and also has a desktop app. On mobile, point of sale became the most used feature, and over time the mobile app evolved into a POS app, although users could still manage other parts of their business from their phones.
I redesigned the mobile app across product architecture, interface, and experience, working with product and engineering from research to usability testing. Some of my decisions had to account for retention as well as user needs. Since launch, retention has improved along with customer satisfaction, and new users are adopting the product faster.
Why we redesigned the app
I interviewed customers and reviewed support tickets. I talked with them about where the app was falling short, and we noticed that users were having trouble with some parts of the experience.
Some tasks that should have been easy took more effort, especially for users who relied heavily on their phones to run their businesses. This led to churn, with some users leaving the app for simpler alternatives.
We then audited the existing app. Some screens had too many actions and too much information on them at once. The POS was a clear example, with its cart showing several fields, controls, and features together.
Moreso, next to the desktop product, which had recently been redesigned along with Klakpad's design system, the mobile interface was starting to look dated.
The old Point of Sale and Cart
Showing less on each screen
The POS became the main focus of the redesign. We were designing for people using it in high pressure environments, so one of the things I wanted to fix was how much they had to deal with on a single screen. I moved some actions that had been grouped together into separate screens and interactions, which reduced the cognitive load in the selling flow.
For product selection and the cart, we tested several layouts and compared them with competitors before settling on the final designs.
Several iterations of the Point of Sales screen
The POS was also built for quick operation, so product selection uses a grid. Product images are more visible, which helps users pick out items quickly, and the important product details are available while they select.
Point of Sale
The cart went through one of the biggest changes. Most people selling from their phones are light users who don't need most of the cart's features during a sale, and the cart had to feel less overwhelming. So quantity stays on the item, and everything else opens when they expand it. Discounts, queued orders, and the rest are still there for anyone who needs them.
The cart
I also redesigned the checkout. It's much smoother than the old one, and since launch it has reduced the time users spend getting through a sale. Users can pay with cash, bank, or other available payment methods.
Checkout flow
Closing the gap with desktop
The other half of the problem was what mobile couldn't do. Users who ran their businesses from their phones shouldn't have to work with a limited version of the product, so we decided to add barcode scanning to the mobile POS. Desktop already had it, and on a phone, the camera could do the job of a scanner. For a small business, that's one less piece of hardware to buy.
I worked with the developers to see how we could implement it, especially for products without a barcode. For those, we used OCR to read the product's name. We tested the scanning thoroughly to make sure it gave the best results before it shipped.
Scanning item barcode and name
We brought mobile onto the same design system as desktop. The mobile app shares components with desktop through the UI kit and has its own mobile-specific components. Both products draw from the same foundations, the styles, variables, and tokens I set up when I built the system.
Theming was planned into those foundations from the start, and the developers and I worked closely to make sure the system looked right once it was built. The app has both light and dark mode.
Testing during development
Many of these changes touched workflows existing users already knew well, and that could push them away. Design and development happened at the same time, so while engineers worked on the backend foundations, I ran moderated usability tests with high fidelity prototypes.
I used the tests to try new concepts and catch friction early, and to reduce the risk of backlash before anything shipped.
The final product
The redesign also carried through to the rest of the app, where business owners monitor sales and manage their operations from anywhere.
After launch
Since the redesign, we have seen more adoption and satisfaction among power users and returning users, the existing users we had been careful not to push away. New users are adopting the product faster, and retention and customer satisfaction have both improved.
The redesign is still being expanded as more features are added to the mobile product.