A little under two years ago we realised that we wanted to build the next-generation Point of sale software. We saw the need for restaurateurs to be able to manage their products and menus in a centralised and efficient way, with an ever-updated cash register. If the restaurateur figured out at 7:55 AM they wanted to have a new offer in all stores, they should be able to enter our back-office (Leeroy Cloud), create the offer and have it available in all stores point-of-sales at 8:00 AM with just a click on a button. 

We also knew that we wanted to enable fast rollouts in combination with a stable system that ensured that each store was running on the latest version of the software. These identified needs led us to go with a plan to build an iOS based point-of-sale connected to various online services, with its foundation kept in Leeroy Cloud. In this post, I’m going to take you through the user experience design process we chose when creating this product!

Figuring out what

As a UX designer getting the mission to create a next-generation point-of-sale, you immediately start by looking at the potential user. Even though we wanted the new cash register to enable restaurateurs to manage their content in a more efficient way, the actual day-to-day usage of the point-of-sale system would be by the staff in the restaurant. One of the most important factors for this type of product is that it’s a work tool. Every detail from how the user should navigate and interact with the interface throughout a full working day, to what level of contrast a button needs to have to be comfortable to look at had to be investigated. 

First of all, we started investigating the overall needs of a point-of-sale product by talking to the restaurant staff of how their current point-of-sale system was used, our internal co-workers that have several years of domain knowledge as well as looking at the restaurant market to find gaps and potentials. The findings generated our key values for the product that were extracted from the combination of early investigation.

The key values for the new product

Reliability: A crucial product that needs to be able to perform throughout the day
Ergonomics: Design for hours of usage
Flexibility: Understandable for first timers, valuable for power users
Purpose: Create meaningful interactions with the expected outcome
Speed: Efficient navigation in a time-pressured environment

Let’s get graphical

After having defined the key values that the point-of-sale should bring, it was time to get that to reflect in an interface. As a start we spent a few hours a week out in the restaurant and cafés talking and watching the staff at work. We looked at their movements and documented the flow at the cash register as well as around the floor. These observations created user journeys for us to take into consideration when structuring up the parts for the interface. 

With the user journeys in front of us it was time to grab some pens and start sketching. In this phase, a vast amount of sketches were created. We wanted to capture it all, from how to quickly modify a product to the micro-information in the cart. But of course, not all sketches make the cut for what we believed would generate good outcomes. From these a carefully selected group were chosen and made into clickable prototypes to be brought out to the staff to test.

We had so much fun testing out the prototypes due to the high level of engagement we were met with from the staff. They had so much they wanted to say regarding a cash register. When reaching the end of the initial user testing phase, it was time to gather the feedback and narrow it down. Which parts provided a solution to real-life problems? Which prototype delivered best upon our key values? What had turned out to not work at all?

A fundamental part of a design process is to solve problems. Good design is not just something that looks nice, it should bring value to the one who’s using it. That’s why performing user research and validating interfaces is such a crucial part of gaining understanding of what the product should be. From these sessions, we picked out the cherries to design a final draft that became the base of our new point-of-sale.

The base design we went with included
Structured and color-coded menu by product categories
Use of popovers for deeper levels of modifications and information
An order flow from left to right to match natural movements
Touch screen interactions such as long press and swipe on selected parts to reduce the amount of buttons

Collaborative design

At this point we had the overall interactions and larger graphical parts set. But to be able to work with a cash register there are much more details needed. We had to find suitable placements for a long list of functionality such as discounts, dining options, transaction data, daily reports etc. We used the base structure as a stepping stone and tweaked the functionality as we went. In this phase we had a great collaboration with several cafés who provided us with valuable input. 

One of the features we saw the need for when visiting was to have the product information easily accessible directly in the interface. For this example, the staff mentioned that they get a lot of questions from their guests regarding the content of the products. To be able to meet the guests’ requests, they had a big folder with product information printed out under the counter which was both tedious to navigate through and contained products which they no longer sold. This made us add a view for full product information with highlighted allergens underneath each product button in the menu, to have it near when selling and always up to date by managing the information from Leeroy Cloud. Like so, we iterated through the system part by part.

Finally, after a few months of designing and developing we had a new point-of-sale system that we and the staff felt confident about and the first store got to run it live! The time had come, it was time for the prototype to become a product performing in a real-life situation. The launch was successful and the mission of building a next-generation point-of-sale had reached a milestone. The product became to be named MPOS, short for Mobile Point-of-Sale, and now was a product in Leeroy’s portfolio. 

An ongoing process

From this point onwards we have been working on extending the functionality within the new point-of-sale system to fit a broader part of the market. We’re continuing to work in a user centric way feature by feature, by starting out with understanding the user’s needs and what value it will bring. 

We’re proud to say that the point of sale has been designed together with staff working in restaurants since that’s how we believe we will ensure that the product is easy to learn, understand, fast and enjoyable to use. 

Finally, I want to share some love to all the amazing people who have been involved in creating the point of sale and are today continuing helping us to improve it!