Milano POS App
Overview
Unlike other coffee brands, Milano has a unique retails chain. On one hand, it has these retails that are just plain and simple looking with affordable Vietnamese black coffee. These are franchise retails, utilise the Milano brand. On the other hand, there are less popular, but more good looking retails (that) is actually owned by Milano. The challenge for us is to create a POS that is flexible enough for both types of retails.
Team:
Kenny Ho [Lead Visual]
Phuong Le [Lead Experience]
Hung Tran [Designer]
Duration:
April 2019 - June 2019
The Competition and the Reference
Ocha POS app was the go-to reference from our clients, as we kick start the project. And we are well aware of the versatility and powerful of Ocha could bring to brick-and-mortar stores or retails.
There are features such as reports and dashboards, or admin management that we had planned but had yet developed due to the constraint of the scope and the time of the project. And with the heavy reference from Ocha initially, we did not attempt to make any revolutionarily change to the user flow process. Instead, what we attempted to make order management more thoughtful, less clutter and more pleasant to use.
Iteration
The core of the product boils down to orders management. Initially, it was split into three different status and orders would be categorized accordingly. For the first design, the very first screens was designed for phone first. Hence, the design was started with a bottom tab bar. However, since the release for the tablet version was more urgent, the design started to adapt more towards tablet.
We thought there could be a better way of interaction to utilise the screen estate of a tablet. And the Kanban table hit us like a truck and made us finalize its as the skeleton design for the app.
However, while we constantly designed and iterated, we forgot the true goal for the app’s end users. There are 2 users for the app: the Cashier & the Barista.
​
For the Cashier, their goal is simple: to validate whether an order is paid or not. Initially, the design was split into three categories to organize the orders. However, when we thought of the true goal of the design of our user, we found out our design was irrelevant. While these statuses matter, how this design created clutter for the user’s main goal. Hence, we came up with the final design.
The final design boiled down to whether the order is paid or not. And the progression status for orders becomes tags, which was a design we were initially against.
​
Comparing to Ocha, we improved in a way that we boiled down to two simple status: "Not yet paid", and "Have paid". It helps simplifying the goal of the main user: the cashier.
We declutter of canceled orders by removing it from the main screen. We turned Confirmed Orders, and Orders that’ve been Done to a more auxiliary status.
For Barista, the screen was simple enough with two columns. One contains a list of pending orders, while the larger one contains the details of a order.
Comparing to Ocha, we improved in a way that we boiled down to two simple status: "Not yet paid", and "Have paid". It helps simplifying the goal of the main user: the cashier.
Implementation
For the first time designing visual design experience, getting everything pixel perfect was a nightmare. But I understand the context behind it.
While most of the decisive visual design executions weren’t me doing it, they were mostly fairly basic, since it is a POS app. On the other hand, I get to learn how to not mess up with the design language across the design.
Phone and Tablet
On the other hands, I was given a mini challenge: adapting from the tablet screen size to phone screen size. While it wasn't exactly hard like in the first hand (How to design a better tablet interaction, not just simply adaption from phone to tablet); designing from tablet down is way easier to breathe. You just only have to chop down and find whatever essentials that is enough for single smartphone screen. However, given the nature of Kanban-esque design for the app and how simplified for the final design, it was even easier.
Take Away and Next Steps
Regarding the size and the funding for the project, there are still a lot that left me yearning for more and wondering, First of all, there wasn’t a true process to learn about the users and how they do it. Our ideas are purely based on other apps that exist in the market. While recycle ideas of other apps can be secondary researches, it still left me wondering what the users truly want and need.
​
On the other hand, visual-wise, what I learned so far is to how to keep everything literal pixel perfect, the consistency in style, sizes, languages and arranging a more proper visual hierarchy. Overall, it was a great first learning experience and I am looking forward to future projects that was more thorough, instead of just simply patching throughout the process.