This project was designed and developed during Ode2Code 2.0 hackathon by Xiaomi during September 3-18. My role in this project was of designing the experience and developing the frontend part of this product. I teamed up with Manas Gupta who worked as the backend and cloud engineer for the project. Let us unveil the design side of the story of how we won this hackathon.
Problem Statement
Design and develop a billing app integrated across all devices (mobiles and PCs) and outlets to be used by the vendor/operator at the Point of Sale (POS)

Objective

To ease the billing process across all Mi outlets by allowing the store operators to process customer orders in real-time through various devices thereby increasing speed and efficiency and ultimately increasing customer satisfaction.
As a vendor

My Role

Background

Why?

The global Point of Sale (PoS) market size was valued at USD 22.08 billion in 2021. The market is projected to grow from USD 25.24 billion in 2022 to USD 70.75 billion by 2029. This will only happen if we make the PoS software more useful and usable.
A quality POS system can enhance your brand image and the in-store customer experience. In addition to improving the checkout performance and other retail processes, POS captures valuable data about customers' shopping habits and provides real-time reports
With a better POS Software a business owner can run his/her business more efficiently by automating tasks and providing detailed reports on sales, inventory, and operations with POS software. This data can be used to make educated decisions about how to improve your business.
By providing detailed reports on your sales and operations, POS software can help you increase your profitability. This data can be used to identify areas where you can save money or make more money.
You don't want an outdated traditional POS that can't keep up with the demands of the online ordering world and the various methods used by the customer to make payments.  the business owner must look for a POS that was recently built and has features that meet the needs of a modern-day retail store.

About Xiaomi and the hackathon

Xiaomi India is one of the leading electronic companies in India. It manufactures a wide range of products such as mobiles, laptops, and tablets. The company has a strong presence in the Indian market and offers products that are technologically advanced and feature-rich, yet cost-effective. Xiaomi India also caters to a variety of customers with its wide range of products and services. Additionally, the company provides value-added services such as after-sales support and customer service.
This hackathon made us all to focus on the problems which current POS solutions had and asked us to solve them.
we started from with a blank slate for almost everything [from branding to tech stack to final pitch] and a problem statement that would guide our approach.

Process overview

Research

Research Goals

Primary Research

"To acquire knowledge, one must study; but to acquire wisdom, one must observe." — Marilyn vos Savant
There weren't many people in my vicinity who were using a POS software on a daily basis. But I could observe and perform contextual inquiry on 2 vendors who used a POS software, one in my night mess and the other was an in-campus café store vendor.
I observed them in their natural context for about 10 minutes each, and found out the user's goals, frustrations and the way they use their current POS software solution.

Observations

  1. Both users complained that their software had a dated look and operated slowly, as if it were from the early 2000s and lacked modern aesthetic appeal.
  2. They want to make orders quickly → they attend more customers → they want to increase revenue & satisfy customer needs and patience.
  3. Almost all customers ( they are quite young and order value is < â‚ą1000 ) have shifted to UPI based payment method
  4. POS software is not available on any other device or mobile phones, so if there is some technical issue with the PC or power loss → order loss follows
POS software in a Quick service restaurant
Large lines due to slow & inefficient POS Software
Customer taking receipts ( generated by POS software ) after  paying for their order

Secondary Research

I began by googling and discovering previous user research, statistics about POS software, and market trends so that I could validate my assumptions based on reading blogs, articles, and reliable statistics that were already available on the Internet.

Upcoming trends in POS software

Source: financesonline.com

Competitive Analysis

We understood that plenty of solutions are already available in the market, so I wanted to leverage that and see what others offer and what is missing in them.

Final Observations

Define

Meet the user

After taking all the observations & patterns into consideration, I made a user persona for the Vendor which we are targeting.

User Journey Mapping

Based on the information given by Xiaomi and the contextual inquiry which I did earlier, I mapped out a journey of the vendor who have to attend customers and create a bill & payments.

Assumptions

Our Idea

Features

User flows

Here I created the user flow for the main features which are Authorization, Creating a bill, Check sales history.
Userflow for Authorization
Userflow for creating a bill
Userflow for Invoice details

Sitemap

Using the userflows, research analysis and understanding of user needs, I started heading towards the biggest part of UX design which is working on UI Designs, I started out by making the sitemap and planned all the pages which would be required.
Visual Design

Wireframes

Low - Fidelity Wireframes

Show below are some Low fidelity wireframes which I made, I made it in excalidraw and made it in a very rough manner to focus on the big picture without getting bogged down in the details.

Mid - Fidelity Wireframes

We also made a mid fidelity version of those wireframes to understand how the UI would look in dark mode and progressing more closer towards Hi-Fi UI designs. I used a wireframing kit called Bloo by @realvjy to make these as fast as possible.

Moodboard

The Mood Board which I created became was an invaluable tool for inspiration and visual direction.

Branding

Because of time constraints, I did not put much effort in creating a complete brand identity and other branding elements for this project as this project is linked with Xiaomi (another huge brand) and I had to focus on development later, so putting effort into branding at that point of time did not make sense.

Style Guide

A style guide is a critical component of any design system as it establishes the visual language for the product. It outlines the color palette, typography, iconography, and other design elements that define the brand identity and ensures consistency across all touchpoints. A comprehensive style guide can save time, reduce errors, and improve the overall user experience.

Interface Design

To build the interface design, I paid close attention to the visual hierarchy, typography, and colour scheme to ensure a consistent and intuitive user experience. Additionally, I made sure to follow best practices for accessibility, usability, and responsive design to ensure the interface was accessible and functional across a range of devices and platforms. The end result was an interface that met the project goals and requirements while providing an engaging and enjoyable user experience.

Authentication pages

These were kept simple, if you are the store owner, you would get the admin credentials from Xiaomi-India, if you are just a vendor, the credentials can be acquired from the admin (store owner).

Product (Home) page

The home page of the POS interface was designed to be the central hub for all primary tasks related to managing sales, inventory, and Analytics. It acts as a huge Navigation panel for all the tasks, from here the user can access other tasks with just a click of a button, I didn't allow metrics or billing on the home page, instead put them on a separate page which will be shown after its request. (using progressive disclosure).

Billing pages

Billing is the primary task of our target user, so making it was quite tricky and took many iterations to finalize this.

Invoice template

This invoice goes to the user via Email and and to his WhatsApp.

Sales History Page

The Sales History page was designed to provide users with a detailed overview of all sales transactions that have been made by them. The page included a search function that allowed users to filter transactions by date, customer, or product name. Each transaction was displayed in a clear and concise format, providing information such as the item(s) sold, price, and payment method & customer name. when the user clicks on a particular transaction, the details page opens showing all the details of the transactions.

Analytics Page

The Analytics Page is a crucial feature within the POS system, this page provides vendors with a detailed overview of their business operations, allowing them to analyze and interpret data in real-time.
From this page they can calso print the monthly reports and save it for future use.

Settings Page

The Settings Page is a crucial part of any software application, allowing users to customize their experience according to their preferences. Settings Page with its sub-pages provides users with the flexibility to manage their profile, vendors, and access help and support. This makes the application more user-friendly, improving the overall user experience.

Companion mobile application

The design of the POS system should be consistent across all elements and all devices, including the interface, buttons, icons, and color schemes. This consistency ensures that users can quickly and easily navigate the system, reducing the learning curve and increasing efficiency. The companion app's design is optimized for mobile devices, with responsive design elements that ensure the app looks and performs well on a range of devices, including smartphones and tablets.
Development

Github Repository

Final Pitch

The final pitch was nerve-wracking but exhilarating! We spent weeks preparing and rehearsing our presentation. We showcased our solution's unique features, user benefits, and how exactly the software works with enthusiasm and conviction.
Our final pitch which had to be submitted along with code and software
Conclusion

We won the Hackathon!

Winning the hackathon was such an awesome experience! Our team (Me and Manas) worked really hard, brainstorming, designing, and coding our way to a solution that tackled the challenge prompt head-on. We had a blast collaborating and bouncing ideas off each other. And when we found out we won, we were over the moon with excitement! It was such a great feeling to see our hard work pay off and be recognized for our skills. We can't wait to take on more challenges like this in the future and see where it takes us!

What I could have done better?

I would work on improving my visuals further and do more iterations based on user feedback. Do extensive user testing. If I had more time, I would have added more extensive features like gathering customer feedback using WhatsApp, studying & integrating barcode scanners and other sales related hardware.

The End

It was an amazing experience to design and develop a unique solution to this problem statement during the hack. Through this project I was able to gain an in-depth understanding of the POS software market and the latest developments in the industry. I feel confident that I can use the skills I've learned from this project to provide successful solutions to other problems I may face in the future.
Up next

SkillTally - Product Landing page design case study