Trucy Phan Plate IQ

Plate IQ

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)

September

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.

Before:

After:

October

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 check run.

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:

November

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:

Reason
Before
After

Shorten copy
Waiting to be digitized
Processing

Make the workflow more clear
Lets register with Plate iQ
Create a Plate IQ Account

Sloppy punctuation
Are you sure you want to delete this user.
Are you sure you want to delete this user?

The field was actually a date, not a date range
Period
Date

December

I designed and built plateiq.com to give the company a better web presence.

It's since been redesigned, but c'est la vie!

January

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.

Before:

After:

Before:

After:

Before:

After:

February

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.

March

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.

Login: Before

Login: After

Password Reset: Before

Password Reset: After

After the UI tweaks, we received almost zero reset password requests from customers. Hooray!

April

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)

Postcard back

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.

May

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.

June

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 Case AND 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 bulb or 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

July

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

August

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