In the upcoming months, we're going to break down the different elements of Change and walk you through our design considerations. We’ll cover what pain points we targeted, how we attempted to solve those problems, and which final touches we added to make it really shine.
This week, we’d like you to meet our ordering screens. If you’ve ever spent 20 minutes wandering around your house looking for your keys, you know how stressful it can be when things aren’t in their place and easy to find. We really didn't want baristas to feel the same way when taking orders from long lines of groggy coffee drinkers.
Here are the basic elements of the Change ordering screen. The sidebar on the left is your order journal. This is where an order's items, payments, and notes are logged. On the right is the inventory grid. You can add items to an order by navigating these customizable screens. The squares at the bottom represent multiple screens, each containing a different layout. At the top is our toolbar where you can access settings.
Tapping vs. Swiping
The first challenge we faced was whether to use swiping or tapping to navigate screens. Swiping is a common way to navigate mobile apps, but all too often it can be inefficient and misused.
Swiping a screen is imprecise. Sometimes you find yourself waiting for the screen to stop moving before you can tap the item you’re looking for. Magnify that by five screens and the momentum will make your head spin!
We wanted to remedy this issue by capitalizing on muscle memory and the precision of tapping. Instead of swiping to move from one screen to another, you just tap (or tap and slide) the squares at the bottom of the screen. This makes navigation incredibly quick.
Screen and Group Limitations
We spent a lot of time brainstorming on how to make these screens even faster.
In order to keep items from getting buried, which causes delays and more clicks, we prevent you from placing groups within groups. We also limit the number of items or groups on a screen to 20 and the number of items in a group to 19. No matter what item you want to add to an order, you can get to it within two clicks.
To save time, we also allow you to place items and groups on ordering screens. This means your top-selling items can always be visible on your main screens instead of forcing you to dive into groups each and every time.
Photos vs. Text
Listing the names of items provides more screen real estate, but we know visual aids help you find items much more quickly. You can upload images of each item or assign it a color. This helps differentiate items and reduces the amount of reading.
As a bonus, screens look much nicer. With good photos, you'll feel like you’re adding something tangible rather than just another item to a list.
Timing For Adding Multiple Items
We initially designed the screen so when you tap an item more than once, the quantity increases with each tap. This was incredibly quick and worked well, but caused problems when someone wanted to add two of the same item and modify one of them.
We remedied by simply implementing a timeout for those additional clicks. If you tap an item multiple times within a second, the quantity increases. After a second, the item will be added as a second line item for which you can tap and modify if needed.
Though this solution seems like a minor fix, it will greatly improve your flexibility. It’s one of those little things we think will add up over time.
These are just a few of the major considerations we put into the design of our ordering screens. We know there are always more improvements to be made, but we hope our care shows when you use Change.
Stay tuned! Next, we’ll introduce you to the inner workings of our payment screens.