Plate IQ is enterprise software for restaurants to do back of house operations like accounting, menu costing, and inventory.
As Plate IQ's first and sole product designer, I designed for print, web, and mobile, and built all my designs in Angular. (Sept. 2015 - Aug. 2016)
When I joined, the front end was a frankenstein of Material Design and Bootstrap.
To make the overall Plate IQ UX more consistent, I created a color system, then applied it to components.
Design challenge: create a UI for restaurants to pay their bills.
Most restaurants cut one check with the total due for multiple invoices. In accounting terms, this is called a
Sometimes, restaurants don't want to pay everything at once, so we showed them all invoices due per vendor, and allowed them to uncheck the ones they didn't want to pay.
Wireframes for creating a new check run:
Later on, we realized that customers needed to know the address where checks were getting mailed to, so each vendor group header started looking like this, with an editable address field on the right:
Problem: Bad copy.
At best, it made us look unprofessional; at worst, it made users confused and cluttered up the interface. Here are some examples of the bad copy I fixed:
I designed and built plateiq.com to give the company a better web presence.
It's since been redesigned, but c'est la vie!
I created a modular, panel-like component to clean up information that didn't make sense in a table. Here are a few examples of its flexibility.
I began work on a new feature: Inventory, which would allow restaurants to count items via an iOS app.
Onboarding was a bit complicated, so it could only be done on the web. It's worth mentioning that the styles here for onboarding (like Google Material Design "Steppers") were designed for Inventory but general enough to be reusable.
Customers would often ask our support team to reset their password. Since this shouldn’t have been a complicated workflow, I took a look at the existing UI.
It turned out, you first had to click "Forgot ?", then fill in an email address, then click "Forgot ?" for a second time to submit the form.
Password Reset: Before
Password Reset: After
After the UI tweaks, we received almost zero reset password requests from customers. Hooray!
Every year in Chicago, the National Restaurant Association holds a gathering for the restaurant, foodservice and hospitality industry. Plate IQ attended for the first time, so I made some stuff.
Photo of the space for reference (L), and a booth banner I designed (R)
Customer "card" styles (part of a PowerPoint that looped on a monitor at the booth)
At one point I had an idea for visualizing the cost breakdown a cheeseburger per ingredient (something our app did) and also recommended that Plate IQ partner with Priceonomics to do blog posts with its data. Not long after I left, they did.
I worked on a UI for restaurants to review the information for the thousands of items they order per month.
Most of the time, Plate IQ's OCR correctly populated the fields, but sometimes users had to manually edit fields like category, unit, and pack size.
Item Review Card
Letting users review and change an item's pack size was important, because this price per unit would later be used to calculate an item's value in both recipes and inventory.
Let's say you have a recipe for mashed potatoes that uses potatoes by the
Pound. However, you order potatoes for $21.20 by the
Case. To determine the cost of potatoes per pound used in the recipe, we need to know how many pounds are in a case.
In the example below, potatoes were ordered by the
Bag, so the question is asked twice.
Unit Conversion: Before
Problem: users were confused for numerous items like fennel and cilantro, which come by non-standard units like
bunch. If a recipe used 1 bulb of fennel, the popup would ask: "How many Each of FENNEL equals 1 Bulb?" but we basically wanted to know "1 Each = ____ Bulb". The answer for this case is 1.
When confused users converted the item unit incorrectly or left it blank, all of their recipe prices using that item were incorrect or incomplete.
After gathering feedback from users, our CTO, and a data entry team member I made the following changes:
Unit Conversion: After
One way to send Plate IQ paper invoices was by scanning them and uploading them via our drag and drop interface in the browser.
However, users couldn’t see all the invoices they’d uploaded, or closed the window before uploads were complete.
I set out to improve this, but because it wasn't a critical bug, I didn't get to spend as much time on it as I would have liked.
Invoice Upload Modal: Before
Invoice Upload Modal: After
Product cleanup continues.
Invoice List: Before
Invoice List: After
Invoice View: Before
Invoice List: After
Recipe List: Before
Recipe List: After
Recipe Editor: Before
Recipe Editor: After