An assistant for restaurant back offices
Margin Edge / Restaurant Management App
Margin Edge is a hospitality SAS company that helps restaurant owners and staff run their back office. Their services include processing invoices, managing inventory and food costs, tracking budgets, ordering, accounting, and on and on. Margin Edge no doubt has big capabilities, but felt they were losing customers due to a very limited mobile app experience.
We helped Margin Edge's Product Managers cast a vision for an all-new iOS application, which included lots of new features and functionality that would give folks “Margin Edge power” on the go. The design engagement included a lot of discovery work, roadmapping, wireframing, rapid prototyping...with a smidge of copywriting and illustration thrown in.
Project Type / Agency
Native iOS Mobile App / The Gnar Company
Role
I helped sell the project, led discovery workshops, collaborated with Margin Edge Product Managers and the Lead Mobile Engineer, and designed the application.
Design Activities
- Discovery Workshops
- Requirements Gathering
- Wireframe Prototypes
- Visual Design
- Design System
- Illustration
- Copywriting
Questions & Challenges
How can we modernize the brand and represent it on mobile?
How can we serve up the most valuable information for owners and managers, and keep up with their lightning-fast pace?
How much hand-holding should we do with more complicated, back-office tasks?
Snapping photos saves restaurant managers tons of time.
With a full roadmap of features planned for the new mobile app, Margin Edge and their Product Managers wanted to design and build in a way that allowed them to deliver the app in independent sections. Feature priority number one: allow app users to upload invoices that need to be paid.
We designed a simple flow that helped folks snap a photo of the paper invoice and submit it to the team of Margin Edge for processing. Slashing down the number of steps in this flow not only allowed development to move faster, but it also aligned with the “fast-paced” nature of Margin Edge’s target users.
Stats and graphs give bite-sized performance snapshots to owners on the go.
What do most restaurant owners want to see on the go? The numbers! How's the business stacking up to this time last year? How are beer sales doing this week? Are we still within budget with 10 days left in the month?
We designed a couple of different views for sales reporting: a list and a graph view, with simple ways to filter, jump between weeks, and see your locations' sales and budgets.
The inventory count process keeps up the restaurant pace.
The inventory section of the app allows restaurant managers to perform regular food inventory counts. Again, we condensed down the number of original steps in favor of delivering value quickly. All the setup happens on the desktop application, then the periodic counts are done on the mobile app.
Among the many design considerations, we wanted to make sure that the activities in the Inventory section could be built upon or feed into a future chunk of the product: online ordering. We completely mapped out how that section would flow and even produced some low-fidelity wireframes...all to make sure we didn't paint ourselves into a corner on future work.
Clear illustrations and a warm tone help introduce new features.
Throughout the app, we needed a way to teach folks how to use certain features. We designed a series of tutorial screens that would only appear during the first time in use, then minimize. In essence, “show them how to use it, then get out of the way.”
In the case of uploading invoices, there were a handful photo guidelines that needed explanation, so we quickly illustrated some “Good Photo/Bad Photo” graphics inspired by some iconography Margin Edge had on their site at the time.
The streamlined design system improves speed and consistency.
We also created a small, custom UI Kit for Margin Edge, so new features can leverage components that are already built.
Let's talk.
Copyright 2023 Joshua Hathaway - Handmade in Austin, Texas - Eleventy, Sass, Nunjucks, HTML, and good ol vanilla Javascript