Design Lead · Research · Strategy · Branding · Creative Direction · UX/UI
The way we dine is changing. From a restaurants counter and kitchen to their website and 3rd-party apps. The restaurant industry ended 2020 with total sales that were $240 billion below the Association’s pre-pandemic forecast for the year and more than 110,000 eating and drinking places were closed for business temporarily, or for good. Adding curbside pick-up, inhouse and 3rd party delivery and if possible, drive-thru capacity, were just a few of means they used to sustain business.
The problem is restaurants now have multiple tablets on their counters to accept orders from all of the 3rd-party apps and multiple kitchen printers. It quickly became chaos. Some restaurants are also in areas where 3rd-party apps aren't available. Our goal was to create an order management system that syncs activity across all their channels (online, mobile, and 3rd-party apps) in one place while providing a quick and easy custom online store of their own. With OutDish they can sell more, maximize efficiency and eliminate ordering mistakes caused by disjointed devices.
OutDish was a new startup with no identity, so it was up to me to create an overall identity for the company and product.
OutDish is all about simplicity and quality over quantity. I designed a simple and iconic logo, combining a plate (dish & "O") and the shape of a letter "D". This brand style goes hand in hand with the creative direction for the entire product, focusing on usability with an unassuming design that gets straight to the point.
I added fundamental design principles and tagged each rule throughout the guidelines with the principle(s) it relates to. This included icons, grid templates, and various other assets to help our engineers work within the guidelines.
This helped give context and helped with adoption since people will be more likely to take something seriously if they know the reasoning behind it.
UX & Flow
Wireframes provided a communication tool and validation of our user flows and strategy. In the wireframes, we made sure navigation was intuitive and information was easy to find.
This let us test quickly and provided our developers with the information they needed to start building the back-end. I went for progressive refinement in UI rather than spending a lot of time with wireframes. The groundwork I did already covered much of the ideation, components remove inefficiency concerns, and we could user test better with higher fidelity prototypes.
Since hierarchy and design have a huge impact on usability, I didn't linger in the wireframe step for too long, ironing out all remaining usability decisions within the design phase.
I designed page-by-page for all breakpoints, making sure we built a consistent experience across all devices. This works well with the agile process, allowing me to work closely with our engineers. The designs were meant to be an example of the guidelines themselves - a framework that doesn't stifle creativity and leaves plenty of room for a unique design.