Mobile POS App
Note: I only created a software design and not the hardware.
Mobile POS
2017.12 - 2018.09
A free point-of-sale app allows small business owners to reduce costs and sell products quickly. I created the mobile POS app's end-to-end experience and checkout design.
Type
Android based payment terminal app
Team (15)
I worked with Stakeholders, the Global Product Manager, the Project Manager, the Engineering Manager, Android Engineers, iOS Engineers, and the QA Team.
Capacity
Full-Time UX/UI Designer
My Role
1. Handled all UX/UI design solo
2. Defined color, typography, and interaction for the company brand.
3. Redesigned the end-to-end experience from merchant to consumer
4. Produced the flow/interaction prototyping, design mockups, design assets, and guidelines
What I accomplished
1. Redesigned all as a company brand product
2. Simplified all experiences
3. Applied accessible design: bolder, larger font size and colors
4. Produced all Android/iOS design mockups and design guidelines
Design Process
1️⃣ Accept & Analyze 2️⃣ Define 3️⃣ Ideate 4️⃣ Select 5️⃣ Prototype 6️⃣ Evaluate
- Accept & Analyze
Engineers had already implemented this project before I joined this project. The product manager wanted to keep the current flows (Engineer Architecture) and wanted me to deliver the visual design and specs only to speed up the implementation.
I analyzed the existing experience, reviewed the entire screen, and researched other competitors' mobile POS. I made a list of problems, discussed with a product manager to find out more concerns/issues on the existing screens, and researched more to have a better understanding of the problem.
2. Problems
Engineers-centered design: Technology-driven first and squeeze design into it. It made complex and poor user experience and design.
The look and feel: One of my most significant challenges for this project was that the product manager and engineers wanted to have the design following Google's guidelines, even fonts, and the product looks like a Google product.
Cluttering Interfaces with too much information on one screen
Unfamiliar layouts to proceed to pay and view a cart
The same gestures in the same place, but for different features: For example, I tried to search inventory items by scrolling up and down, but accidentally, it made the list panel collapse and show the cart list.
3. Ideate
During brainstorming, I came up with different ideas to solve the problems at hand. To better understand the merchant's daily routine, I researched and created user flows and designed a user-focused interface. Google's design guidelines and interactions inspired me to think about how to make content more engaging and relevant to users. To maintain platform consistency, I followed the Material design guidelines and used Google's paper material metaphor. I always kept the merchant experience in mind while working on this project, as it had unique purposes and problems. I optimized the design guidelines to create a stronger brand and better merchant experiences. In addition, I also created alternative designs for different experiences.
4. Select
The team selected the best solution generated in the brainstorming phase and resolved them further with more in-depth planning.
I redesigned the entire home screen to have clear actions and make it clear what merchants can do.
Solution1: User Interface Rearrangement
There were similar functions in different places. I used a 'Tabs' design element to put them together and defined a 'swipe' gesture on the tabs, which would switch the input mode easily.
I used text as a design element. I removed unnecessary icons and menus from the screen. The menu label was good enough to tell users what they needed to do without thinking.
The larger pay button is everywhere, at the same position in the app from the home screen to the cart screen, to provide a better-paying experience.
I applied a 'swipe' gesture to open a cart. Instead of a cart icon button, I added the 'arrow' icon to indicate how to open a cart by sliding up and down the input panel (inventory area). Also, I created an 'Adding item' animation to indicate the item was added to the cart successfully.
Solution2: Cart Screen Redesign
Redefined columns content alignment, Item name (left), QTY and price (right)
I removed dividers between items. The divider made the screen look busy and distractive for the item list, so I removed it and used white space to distinguish between items.
I differentiated the total amount details section from the order list for users to scan.
I removed the 'edit' icon from each list. It was an unnecessary icon to edit because once a user presses the item line, the system takes the user to the edit screen.
I provided input mode to add more items directly to the cart screen.
Solution3: Simplicity and Clarity
I rearranged the total amount to look more visible and clear to inform customers how much they would pay.
I rearranged the cash amount buttons to reduce the number of options.
I combined preset amount options and custom amount options into one screen.
I separated the receipt options screen from the cash payment screen because the receipt screen is also usable for other payments. It made it easier to use and add to or build on when necessary.
5. Prototype
Merchant installs the POS app on their phone. This prototype demonstrates the interaction between the POS and a payment device, from adding items to the cart to checkout.
6. Evaluate
The goal of the evaluation was to compare the usability of two alternative experiences (flows) of each use case and select the optimal flow and screen design for the application. The product team conducted this testing.
Here is a sample of the evaluation.
In this study, the visual prototypes launched on iPhone Participants were asked to perform the Cancel payment using these prototypes. This A/B usability test report describes findings and recommendations learned during the test. Each test session lasted 10-15 minutes.
Result: The testing involved 8 people: 6 women and 2 men.
Concept A won by a large margin - 7:1
Methods: A/B Testing or participant observation
PM and I conducted the user testing. We collected some recommendations from testers as well and requested some features and design changes. Based on the test results, I iterated the design and tested it repeatedly.
Final design
I applied Google’s paper material metaphor in this project.
design guidelines
What I learned
1. The importance of user-centered design to provide a better experience
2. Merchant pain point and customer pain point of the checkout experience
3. The importance of target platform design guidelines for consistency