Product Design - 2019 - Current company

Vita Mojo is an award-winning digital ordering and restaurant management system for QSRs, casual dining, pubs, cafes, virtual brands & more.

Website

Problem

I joined Vita Mojo in it's early stages where it transformed from a restaurant to a tech company, taking on the role as their Product Designer. Vita Mojo was the first totally digital and cashless QSR in the UK, and has since then been able to use that experience to build, measure, learn and redefine our SaaS platform. The key goal is to power the digital transformation behind the best food and drink brands.

Competitor analysis

I wanted to find out if there were any similar solutions already out there and, if so, what type of functionality they provided.

I reviewed as many similar companies as I could find in the food and drinks industry, starting off with primarily self service kiosks as that was the main focused, but also later on branching off to online and mobile apps. There are some below of popular food chains such as McDonald's, Mamago (Wagamama) and KFC:

Product assessment

I reviewed the existing Vita Mojo product (VMOS 1.0) at that time to understand all of the the user journeys, in order to see what could be improved and what was not relevant.

To do this I split my time between desk research - familiarising myself with the existing system and typical user tasks - and catching up with core internal users of the product who could help to guide me through any problematic task flows and share in-depth system knowledge.

After assessing the product, it was clear that it was made primarily for the Vita Mojo restaurants and didn't have the flexibility to work with other brands, from the customisation options for the client branding and to how the meals and ordering flows were built. And most importantly there was no design system in place so there were no reusable components or clear standards to assemble everything together.

User research

I worked closely with restaurants to get a better understand of how their restaurant ordering flow and systems works, including any pain points. As we're a B2B2C company, it was also important that I interviewed lots of potential customers to see what they liked about kiosks, what they struggled with, and what would make them choose using a kiosk rather than going to the counter.

Design System

We decided to rebuild everything from scratch and create the latest version of the Vita Mojo product: VMOS 2.0. I took the lead role on this and built the design system using atomic design, creating everything from the base tokens, components to the page templates.

A challenge was being able to build a design system which would be able to be responsive for all device types, especially different kiosk sizes and orientations. And top of this, we had to give it the ability to be themable where clients would be able to add their own branding to the design system and apps.

Wireframes

After mapping out the user stories and flow, I worked on some initial concepts and then developed some high-fidelity wireframes using the design system that I had built.

Design

When building our design system and theming options, it was important I made it as flexible as possible so that I was able to transform a clients site to match their brand to the best of my ability. This could be assisted by looking at their website and social medias, or having access to their branding guidelines and assets. I have a big input in the direction of the look and feel of their website, but also tend to work with a designer from the client side if they have one. I am able to work closely with the team to suggest ideas for graphics, photography, colours, typography and more. All of the theming options are done in JSON.

Self Service Kiosks

When designing for kiosks, I had to consider the environment that the customers will be in - which is fast paced and busy. I had to make it look and feel easy, this was achieved by making bigger touch targets, adding more visual hierarchy, and making the navigation as easy as possible. As our product grew, so did the selections of kiosk sizes so I had to optimise the better use of space as it ranged from iPad Pro's, to Samsungs, to Large Elo stands - some landscape and some portrait.

Mobile Apps

Our website is responsive so can be browsed on a mobile, whilst maintaining the look and feel of the product. Recently we extended our product and offered an iOS and Android app solution, so I got a chance to create app-specific features such as the landing pages, onboarding pages, navigation bar, and more.

Product Guides

I created guides for each of our product solutions, which are available for our clients and the public, on how to get the most out of our products and how to achieve the best results in transforming their restaurant experience.

Other Apps

Other than the customer facing products for digital ordering, I also work on the client facing products such as the Point of Sale, Kitchen Management Systems and Menu Managements.