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 Guptawho 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
I want an easier way to make bills
I want to help customers get what they want
I want to see my progress and use that for my promotion
My Role
Sole UX Designer 🎨
Flutter Developer đź’»
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
Pain points of operator faced during billing at POS?
What features are good to have in the current billing system?
what are all the possible ways a customer can agree to pay?
In what other ways can a customer explore a product?
Primary Research
"To acquire knowledge, one must study; but to acquire wisdom, one must observe." — Marilyn vos Savant
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.
They want to make orders quickly → they attend more customers → they want to increase revenue & satisfy customer needs and patience.
Almost all customers ( they are quite young and order value is < â‚ą1000 ) have shifted to UPI based payment method
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.
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
We are assuming that the POSÂ software which Xiaomi uses is similar to what we observed.
Assuming that the app is designed only to be used in Indian market
Assuming that the registration of store and store admins is handled by Xiaomi
Our Idea
Features
Authorization- A robust role based access control
The invoice generation form progress will be saved in cloud in real time so that if the user changes the device, the details will be stored. and the invoice will not have to be made from scratch.
We will provide sales analytics which will be powered by AI to give out richer results which will help in optimizing sales also suggesting the user choices.
Improve the user experience of the software and making the software intuitive and allowing frictionless sales
Integrate Customer feedback into POS using Whatsapp API and/or Twillo API
Analyse the feedback in realtime and will suggest the Mi team regrading the customer expectation.
Completely responsive software so that sales can happen on the move on any device.
Real time inventory management with innovative UI.
Allowing multiple ways for payments and to include credit based setup to buy product.
Allowing cash payments when the software is offline
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.