This was a 1 month-long project where we build a web-based POS for restaurants with a built-in stock market pricing mechanism to encourage sales. The team consisted of myself and other 3 full-stack developers. We shipped the product back in 2018 summer. This case study focuses on the end-to-end deliver methodology from ideation to delivery.
I was the design lead and of the project.
Here are some amazing things that our team achieved:
- End-to-end delivery → Turned an idea into a product within 1 month
- Pitched to investors and headhunters
- Featuring on Medium → The case study was published on UX Collectives
Understanding our limits
We had a month to demonstration our full-stack programming knowledge in front of a crowd of investors and headhunters. We started the project by coming up with a few ideas that we consider feasible. Web app, mobile app, native app, maybe an Electron wrapped desktop application.
However, when time is of the essence, we lack the luxury of doing any kind of extensive marketing research to validate the idea and performing user research to fuel our design.
- Time — only 1 month to go live
- Lack of development experience — 0 to none development experience prior to this project
Defining the problem
With the experiences we learned from Hackathons, teams and ideas are the best when they are grounded and focus. Here's how we came up with the idea.
- Relatable topic — Lifestyle and F&B are approachable because of how relatable it is to anyone
- Industry knowledge — 2 members of the team used to work in the F&B industry with an extensive amount of period
- No need to reinvent the wheel — there are other similar cases online, the only missing thing was user-friendly experience and product marketing
With constraints and challenges in mind, we conclude that the objective of our team is to:
Encourage the purchase of slow-moving goods
“Slow-moving goods” is the bane of retails and F&B. For most restaurants and bars, the responsibility of determining the stock intake usually lies on the shoulder of the chef/manager. However, tracing the reason of fluctuation can be daunting, and sometimes beyond comprehension, not to mention where top sales and marketing skills are difficult to come by.
To mitigate the impact of overstocking, rather than building a blockchain-powered AI training model with a self-adjusting algorithm, improving the decision-making process of our consumer seems rather feasible. Offering external influences that are relatively unbiased towards the restaurant, encourage crowd decision making through users’ micro-transactions.
We decided to embed the stock-market pricing mechanism into the restaurant menu, where the price of food and drink items fluctuates depending on the level of stock. The more customer orders the item, the pricier it gets.
Research and discovery
Our team decided to talk to a few restaurant owners and managers to help conceptualize the idea before we committing to the design, and here is what we have discovered.
We targeted the age group of 21 ~ 35, looking for excitement while enjoying a good time with acquaintances, have a higher tolerance against price fluctuation. Prioritizing experience over justifying the value of their spending.
Short interviews were conducted over the phone and Whatsapp, we were able to receive instant feedback to keep the research short.
- Brief, short, straight to the point interactions; it's just a food and drink menu
- Don't build a native app: The application should only act as a dining experience enhancer
- Dark mode: operates better in a dim environment
- Enjoy the moment: Users are mostly seeking gratification instead of information processing
Knowing this, we set out to find how we could encourage purchase at the fingertips of the users, one whose focus was to have a good time instead of making the one and only perfect order for the table.
Before we conclude that the interface is the problem, we wanted to make sure we cover the basic grounds of what restaurant staff would expect from a POS, and what can we do better within the given time frame.
- Want some sound suggestion when making the order
Bar/restaurant owners and managers:
- Left with pushy/traditional/biased promotion method to influence sales
- E.g. discounts, group buys, today’s special, etc
The idea of combining the stock market with a restaurant menu is not groundbreaking, however, the idea of group peer micro-transactions seems to be the answer to our question.
Since this business model is still relatively unpopular, which means solid improvements are relatively easy and less expensive to achieve, comparing to other highly competitive fields like social media and blockchains.
We mapped out the critical path (necessary steps required to complete the goal of the application) of the users and use it to help determine the layout of the design.
To be more specific, we rank each node with a score, where the score is a combination score of the importance and the rate of exposure of the node. In our case, “Pick and choose items from the menu”, “confirming order”, “Pay for order” are the necessary nodes, we ranked them the highest. The result of that is those three nodes now have become pages that are accessible directly from our bottom menu. The lowers ranks are nested under pages and layouts that are relevant to the flow.
After a half-day Sprint session, our team collected features that intrigue us, and condense them into a Post-it matrix. The matrix was inspired by the Google Venture — Design Sprint, and the job tree of the beloved tactic game “Final Fantasy Tactic, where the matrix is consist of the following elements:
- Short (<8 words) description of the idea
- Prerequisite of the feature (What needs to be done to acquire this feature)
- The consequence of the feature (What does this feature give birth to)
- Level of difficulty (How hard is it to add a button… says the clients)
- Estimate of time (How long is it going to take to complete the feature)
The goal of this matrix is to balance the cost of development and the satisfaction of the solution, even the best idea on the world requires on-point execution to make things happen.
We want the features to be relevant to the applications’ vision and goal, yet suffice to demonstrate our skills as a full-stack developer without drowning our audiences with geeky tech-specific details.
Even it’s merely a simple guideline, it still plays a critical part of product development. The guideline unifies the style of expressions at telling a story, which in our case is the web application that we were building.
We picked the logo with only two criteria in mind, where we tried to avoid spending too much time on things that does not make an impact:
- A symbolical reminder of what your business is really about
- A subliminal injection of the impression of your business
With keywords like “drinks”, “bar”, “stock market”, “ups-and-downs” as the seed idea, we finalized the design where one side of a Martini glass is replaced with the spark line of the stock market.
Colour and Impression
Considering the place where the application will most likely be used, the image of the brand should be a mixture of subtle, classy, interesting, with a hint of excitement. A slightly off-black and off-white makes a great contrast to make the menu and text pop, especially when the users will be using the application in dimmer rooms.
We took Orange, Gold, Puce and a fade Almond to recreate the impression of a classy whisky bar, with a well-mannered bartender serving you a glass of Glenfiddich 15-yr old single malt Whisky on rock, while the band on the corner is dancing your mood with their smoothest blue-jazz. The green and the red are also part of the identity is because the stock market is also a major part of the application, where red and green indicates the bear and bull market.
In the project, we used three different typefaces: Cormorant being the accent, Proza Libre being the main body text and IBM Plex Mono for tooltips and instructions.
We opted for Proza Libre as our body text, because of the distinctive difference between uppercase and lowercase. Also, a stroke style that is heavily influenced by broad-nib pen, calls for a better fit under a harsh reading environment where there are insufficient light source.
The development phase was less than 3 weeks in total, in order to allow the team to work around their own schedule without falling off from other team members’ progress, Trello served as our single source of truth for progress checking and updating. Especially when you and your team don’t want to waste 2hrs on reporting progresses every day, task management system like Trello, Notion or even Monday is definitely the way to go.
Hi-fi prototyping and rationale
UX design is a combination of research, understanding the audiences and use case, sympathetic thinking and effective information hierarchy.
When an infinite amount of options are presented, usually the process of decision making is paralyzed by the overwhelming amount of possibilities, making it an unpleasant process. Human makes their decisions based on the urgency and the severity of consequences, this is one of the reasons why marketing campaign with a “branded” time limit usually generates more sales than a regular-season discount.
To avoid biased personal preference, we label our information cluster and call-to-actions with three priorities: “high”, “medium”, and “low”. The rule of thumb is to only have one or two labels with “high” to avoid tangents.
We design that the “medium” as a trigger/access key to connect to our “low”. The detail of the item on the menu and the performance is an information cluster that does not get access as much. Imagine this, when was the last time you went into a restaurant, and the first thing is to start reading their recipes and their sales performance. However, the existence of the performance of each item shall become a key decision factor along with the price fluctuation when the same information cluster has made available to the users.
Final delivery and some afterthoughts
Understand that the product is not a standalone creation, but it should be a harmonious marriage between the needs and desires, the resource and expectation management, and the execution of message expression. In business terms, a holy trio, if you will, between product management, development and marketing.
Thanks to our team of Power Rangers: Andrew, Harrison and Judith, the presentation were amazing, and great rounds of feedback were received. One of the investors who were happened to be the owner of a local bar approached our idea as well. We couldn't be more happier with the result after burning the midnight oil for the entire month.
Despite the success, there are a few things that I wish to do better next time,
- Use UI framework — use UI framework to prove the concept
- On-boarding is important — users were confused with what the application does
- Use only one typography — it is easier to handle one font with more variants rather than multiple topographies