HOT SCHEDULES
MVP Inventory Enterprise app
for Restaurant Managers and Regional Managers of mid-sized and large restaurant chains.
BACKGROUND
MVP Release of Cloud-based Inventory app for Restaurant sector
HotSchedules Cloud-based Inventory app provided Real-Time Data for On-Hand Inventory, Waste & Costs, Vendor Management, etc. Customers of this app were regional and large restaurant chains. End users primarily Restaurant Managers. App also included a component for Regional Managers.
HotSchedules derived its name from their original Scheduling app for Restaurant Workers. Since then, HotSchedules has strategically grown with the acquisition of various startups that had other enterprise apps serving the Restaurant sector. The strategic goal being to offer a seamless end-to-end suite of enterprise apps for the Restaurant sector, from scheduling workers, to operational tools for restaurant managers, to strategic reporting for regional managers, etc.
MVP (Minimum Viable Product) Release was subsequently restricted Desktop/Tablet only, due to the complexity of the tables and features. Afterwards, certain features/tasks would be available on Mobile, that were conducive to a small mobile screen (i.e., Receiving Orders).
HIGH LEVEL TIMELINE
Condensed timeframe of just 4-months.
MAKE OF THE TEAM
Hands-on UX Manager, plus two UX consultants.
KEY GOAL
MVP Release of Inventory app for Restaurant sector.
MY ROLE
Lead UX Design Consultant on 3-Person Team
I was a Lead UX Design Consultant on a 3-person team (Hands-On UX Manager plus two consultants) for a condensed timeframe of MVP Release Inventory responsive app for the Restaurant sector.
Our UX Team were in San Francisco, whereas Product Management were located in Atlanta, and the Style Guide Owner was located in Austin. Thus, we had plenty of phone & video conferences, plus the chance to meet our colleagues when they came into town.
Whenever we encountered new, complex scenarios during the UX Design process that the UI Style Guide didn't yet have standards for, we would reach out to the Style Guide Owner to let him know, along with insights into possible solutions to address it. He would then get back to us with the new solution added.
Dashboard Design
Concerning the Dashboard Design below. The Today's Tasks column had tiny, solid color dots in red, gray, and green to represent not started, incomplete, and completed, respectively. Not only were the dots difficult to see due to the tiny pinhead size, but the red/green was bound to cause issues for those who are color-blind. Therefore, I recommended that not only should we make the tiny dots into larger circles for ease of legibility, but also switch to symbols instead of red/green.
My late dad was color-blind, so I'm sensitive to the challenges they face. Color-blindness is not uncommon. Honestly, on most projects, I'll notice issues that will pose problems for those who have color-blindness, and make recommendations accordingly. In some way, I'd like to think I'm a voice for the color-blind.
DASHBOARD DESIGN
Important tasks are all at-a-glance through data visualization.
Today’s Tasks & Weekly Tasks - progress meter icons:
-
Complete
-
Incomplete (various states)
-
Not Started
Sizeable progress meter icons offer greater legibility
Symbols (instead of color-coded) means no issues for color-blind users
Notifications - icons denoting type of message
Sales Projections - metrics + data visualization
Worker Shifts Schedule - data visualization timelines
UX DESIGN
Recipes feature
=
Real-time Inventory of on-hand Ingredients
Real-time Inventory of on-hand Ingredients
When barcode scanners were implemented in supermarket checkouts, the immediate Enterprise benefits included: greater flexibility on item pricing (no more tedious price tagging of goods) and real-time integration of inventory! It was now known what quantities of an item were in-stock, sold, on-order, etc. It's easy when goods already have barcodes. But how would something like this work in a restaurant setting?
The way real-time inventory works within the Restaurant sector is by creating "Recipes" within the Inventory system. These aren't recipes the chef is looking at. These are recipes created for the sole purpose of specifying the ingredients their respective amounts that comprise each menu item.
As each menu item is sold, the ingredients inventory is depleted by specified amounts for that menu item.
Real-time Inventory of on-hand ingredients means increased efficiency of that restaurant location. Less chances of having to remove a popular dish from the menu because the kitchen ran-out of particular ingredient(s) at the last minute.
With real-time Inventory, IF any ingredients became low, the system would automatically flag and alert the restaurant manager accordingly. This would allow time for re-ordering, or in instances of a pinch, the possibility of a transfer request of ingredient(s) from another branch within the restaurant chain (IF agreed to by the other restaurant manager).
RECIPES
Recipes integration with Inventory allowed for real-time on-hand ingredients inventory (ingredients depleted accordingly as menu items sold), as well as menu item Cost and Profit (gross profit).
At its core, Inventory is about Accounting (whether it's costs, goods, etc.).
Recipes (left column) allowed for organization within a nested folder structure. Recipes could be Copied & modified (i.e., similar menu items with slight variations) vs. having to create every recipe from scratch.
Ingredients have a Search feature, displayed in the lower right table, and can be dragged & dropped into recipes (but not dragged out of; unwanted ingredients would be Deleted from a recipe).
Above display is the menu item Price, Cost, and (Gross) Profit.
UX STRATEGY
Design Thinking + Business Acumen
User-friendly
+
System Compliant
=
Efficient management
I refer to "information gaps" as missing information that prevents users from making informed decisions.
Count unit categories: Case, Bundles & Each
For example, paper cups--there's a case of 1000, inside are 10 sleeves (bundles) of 100, and then there's individual cups (each).
Another example, cheddar cheese--a 5lb case, inside are 5 1lb blocks (bundles), and those blocks contain "x" slices (each).
The other UX Designer had Actual OnHand column with a mix of Case, Bundles and Each denominations. Product said to make the column Case unit only.
However, what does 1.28 Case mean? Bundles? Each? Some combination thereof? There's no way of determining the breakdown, even with a calculator. For example, there could exist a combination of Bundles + Each that just so happens to = what exists inside a Case...but that doesn't mean an intact Case exists.
By having a units breakdown and discovering specifically what's triggering the recount flag, a restaurant manager would be better positioned to resolve the issue.
Using the paper cups example:
-
Was it Bundles in the back storeroom? Perhaps employee theft before a Holiday weekend?
-
Was it Each at the front counter? Perhaps we ran-out of cardboard sleeves and customers needed to double-up their cups of hot beverages.
Therefore, I suggested a module showing breakdown of Case, Bundles & Each that equals the Case sum.
A solution BOTH user friendly AND system compliant.
Product LOVED IT!!!
Keep in mind, this was an MVP release, so Product wasn't looking to add anything extra that wasn't absolutely necessary. If anything, some features were being removed to meet the MVP launch deadline.
COUNT VARIANCE W/UNIT BREAKDOWN MODULE
Count Variance: Count Values that were System-flagged as being outside-the-norm, requiring recount.
Issue: System Compliant data wasn't User Friendly data.
Solution: Unit Breakdown Module to show what units went into Case Sum Total.
Actual OnHand (column highlighted by yellow outline) is in Case unit values for System Compliance. But not very User Friendly, as what does 0.28 Case mean? Bundles? Each? Some combination thereof? There's no way of knowing!
Unit Breakdown Module (area highlighted by green outline) shows the units breakdown of Case, Bundles & Each, that go into the Case Sum Total in the Actual OnHand column.
A solution BOTH System Compliant AND User Friendly! Win-win!
DESIGN PROCESS
The Design Process
Collaborated with Product Management in Atlanta on MVP Business Requirements + insights about Restaurant sector. Both PMs had a wealth of experience within the Restaurant sector.
User Task Flows helped map out processes for the various components within Inventory.
Visual Design (via UI Style Guide components) was baked-into the wireframes, as they were built. There were no separate visual design comps--the wireframes & visuals were one and the same.
Screens were uploaded to InVision for interactive prototypes to share with Product and other team members.
Initially there was to be a Mobile component (Adaptive) but that was eventually taken out of MVP and moved to a future release.
MVP was Desktop/Tablet only.
System Suggested Ordering
We're all familiar with personalization of online customer experience--Amazon comes to mind, "Since you liked {this} you may like {that}." Predictions based on past preferences.
System Suggested Ordering is somewhat similar to that. Items (and their respective vendors) were programmed into the Inventory system for ordering/reordering, based upon on-hand inventory levels. The system was also intelligent enough to make recommendations based upon forecasting. For example, increased demand for certain appetizers on Superbowl Weekend, or higher demand for brewed iced tea & fresh strawberry lemonade whenever outdoor temperatures exceed 90℉.
In other words, System Suggested Ordering eliminated much of the guesswork for restaurant managers by automating routine tasks. But at the same time, also allowed flexibility by restaurant managers to override system suggestions.
SYSTEM SUGGESTED ORDERING
System Suggested Ordering is where the Inventory system automatically detects what items a Restaurant Manager would need to order--and displays those items in a new Order to be placed.
Blue shaded Quantity fields denote System Orders.
Orange shaded Quantity field denotes User Override. Perhaps System Suggested "2" but user changed to "3".
Row Expansion: Notice how this row has been expanded to show 10 additional columns specific to that item. One sub-column even contains a dropdown expansion. Housing sub-columns inside the expanded sub-rows below, provides convenient access to important information (while avoiding the dilemma of a mile-wide table and infinite horizontal scrolling).
Green checkmark icon denotes manual revision after Order was placed.
This would be a scenario where Manager forgot to add an item after placing the order. In this scenario:
-
User calls Vendor and asks them to make a change to the Order.
-
Then user must manually update the Order, reflecting the recent change, so that the System is aware of the revision.
FINAL THOUGHTS
Wrap-up
Despite the condensed timeframe, colleagues scattered across states and time zones, and new UI Style Guide updates required, we did complete the MVP project on-time.
The hands-on UX Manager remarked to me, "You have a really good eye for details. You notice things no one else sees." I replied, "Well, thank you! It's both a blessing and a curse, as it's a switch I can't turn off." But honestly, that's one of my favorite things about being a UX Designer--uncovering those issues no one else seems to notice--along with proposed solutions that often don't require that much extra effort by Design & Development, but make for a big impact for the user!
Great group of people to work with! Remote Wednesdays & Fridays were a nice perk, as were end-of-Thursday in-office "Happy Hour" to kick-off remote Fridays + the weekend ahead. A nice way to get to know some of the other colleagues that you didn't have time for during the busy workdays.
The nicest perk had to be the incredible nearly top floor view from our SoMa office, spanning from North Bay to the Bay Bridge to the Peninsula and beyond--plus watching the Salesforce Tower being built!