Workplace Forms
Facebook
Also known as the KDS in the food industry, this is a web application located on the HMI display of the makeline that provides users control over orders, ingredients, and general control of the hardware.
The KDS is a crucial tool in any industrial kitchen. Traditionally they solely focus on visualizing orders so that the line worker knows what's being worked on and what needs to be bagged and handed to a customer or courier. At Hyphen, because of the unique automation provided via the robotic makeline, this KDS must provide additional unique capabilities like visibility into ingredient levels for each hopper, flows to "86" or substitute an ingredient, re-fire orders, actuate motors and conveyors in case of a jam, and so on.
Extend the brand identity in the kitchen and create kitchen display system that provides both traditional and automation-oriented functionality while never causing slow-downs during food production.
Product Designer
Including: Creation of design system, information Architecture, User Research, Visual Design, Interaction Design, Prototyping
MVP deployed to first pilot users across the country.
Currently engaging with users for feedback to be leverage in the next iteration.
For the first few months, lots of exploration was done for each part of the KDS. The initial focus was around finding a reasonable way to present orders and ingredient supply levels on the same page. They are both needed by the user at the highest frequency, so navigating away wouldn't work.
Additionally, the unique challenge presented by the robotic hardware is that more information was needed for ingredients than simply how full the hopper was. Each ingredient has a physical location on the makeline, and some make lines are a hundred feet long or more. So the location of the ingredient also needed to me visible, otherwise the operator would make extra trips back and forth between the makeline and storage facility at the restaurant.
To properly vet the various customer journeys associated with the full lifespan of an order, this flow chart became a vital document.
First I wrote out all the customer journeys in Notion. They were all intertwined and complexity grew quickly, so I created this diagram.
I transposed the written text journeys into this enhanced diagram. I maintained the ability to track customer experience while also plotting interaction. Atomic sub-flows remain, and they line up with software engineering integration tests. So they became a second layer of info overlayed.
This visualization also provides a way for hardware engineering to check where they need to capture machine faults, which would also get turned into more journeys. This became a third layer seen in this single diagram.
The final design for the first iteration uses a horizontal composition with ingredients on the left and orders on the right.
Ingredient supply levels and their respective locations the makeline are clearly visible. The list is sorted by supply level, the most in critical of need for refill at the top.
The orders on the right have 3 states (Queue, In Progress, and Machine Complete) which are indicated by the glyphs on the left side of the card. Each card can also be expanded to reveal each item in the order and its ingredients.
Lastly, there's a mult-function CTA on the lower right to Bump or Expedite and order depending on the the order type selected.
This is a dedicated page for more in-depth queries around orders. Here the user can search all orders for the day and reveal more control over their management via the right pane.
On the right, in the order details, the user can reprint chits for items or the entire summarized order, see the item's ingredients, and re-fire an item.
Another dedicated page focused on advanced activity around ingredients. All the ingredients used by the makeline are on the left, mirroring the composition of the Dashboard, and on the right is a details page of the selected ingredient.
In the details, the user is able to get an enhanced visualization of the ingredient's location on the makeline, a few key attributes, and some control over the machinery.
The user can also begin the 86 flow on this page, or dive deeper into machine controls.
As part of the UX work, many flows were created in Figma and linked to the documentation for everyone's benefit. This is an example of what they typically look like.
In this particular flow, an ingredient's supply becomes empty which triggers a modal requiring user input.
While a user can preemptively 86/substitute an ingredient, the more likely scenario is the flow will have to be provided since makeline production is a extremely chaotic experience. They wouldn't necessarily have a calm moment to get ahead.
Once all the mocks and flows are completed, our design/handoff process included documentation as you'd imagine. We used Notion at Hyphen for this work and this an example.
I would create a source of truth living document that the engineers and product managers etc could refer to. It included all high fidelity mockup work, all the flows, sub-component breakdowns with notations, and any logic or policies needed fully implement the design.