MiGo

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

• 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 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

There weren't many people in my vicinity who were using POS software on a daily basis. But I could observe and perform a contextual inquiry on 2 vendors who used POS software, one in my night mess and the other 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 to 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 phone, so if there is some technical issue with the PC or power loss → order loss follows

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

• Cashless Transactions Via Mobile POS Systems

• Adoption of Cloud-Hosted POS Systems

• Multichannel Commerce

• Customer Loyalty Programs

• AI Integration in POS Solutions

• Use of POS Data Analytics

• Using UPI as a method of payment in India

• Simple POS Hardware

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 I did earlier, I mapped out the journey of the vendor who has to attend to 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 the 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 the 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 and also suggesting user choices.

• Improve the user experience of the software and make the software intuitive and allow frictionless sales

• Integrate Customer feedback into POS using Whatsapp API and/or Twillo API

• Analyze the feedback in real-time and will suggest to the Mi team regarding 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 including credit-based setup to buy products.

• 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, and Check sales history.

Sitemap

Using the user flows, 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 that I made, I made them in excalidraw and made them 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 progress closer toward 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 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 color 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 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 also print the monthly reports and save them 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.

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.