Toritaro Chain stores
Toritaro is an order ahead and loyalty platform that Active Media created to license to clients. It is meant to be used as a starting point to jump-start both design and development, while also allowing complete customizations specific to each client.
Role:
Product Design
Company:
Active Media, 2018
Website:
1. Define Problem
In 2018 Active Media was planning to build a handful of functionally similar apps in the fast casual and quick service restaurant space. Having recently launched apps for their chain stores SunnyPoint we knew there were a lot of inefficiencies and repetitive problem solving that could be reduced. By addressing these issues we hoped to create a better value for the client and increase the comapny’s margins.
Our goal was to create a base app with proven UX that could be easily themed and demoed to potential clients. From there we could take the themed base app and decide on specific areas of customization.
2. Core features
After client working sessions and competitive analysis, we decided on four primary sections of the app and identififed common features that we deemed should be standard:
3. Checkout flow
Throughout the design of the app, there were many whiteboarding sessions to decide on possible user flows. One particularly important and challenging flow was the “checkout flow”. Although many methodologies had been listed to solve the checkout, PIN number and felica finally picked for several reasons. These method did not present any technical issues, also from the user’s perspective was easy.
The flow is simple: he/she came to Toritaro restaurant and ordered food. At the end, they opened mobile application and tapped on PIN button at the main screen to connect Toritaro restaurant tablet. At this stage, he/she could choose use their points to reduce the bill or just finished the transaction and saved more points. We explored different ways around the flow and ultimately decided it was best to only go through the store and checkout steps for first-time users and to default them for returning users. This would allow us to expose options early on to new users while also streamlining for returning user. Knowing this could prove challenging in design, we then moved to wire-framing and testing.
4. Brainstorming, Ideation and Feedback
Before committing to my initial solution, and creating Hi-Fi mockups, I did sketches to follow the flow
5. High Fidelity Wireframes
Keeping with the proposed checkout flow, we then began designing wireframes. These designs started out as rough whiteboard sketches, as we figured out what information was important, and then evolved into much higher fidelity designs. This allowed us to accurately design for the content and also provide much more valuable user testing.
6. Creating Visual Language
While the visual design most likely depends on each client, we still needed something that could be presented to clients and had realistic demo content. This demo version of the app was never going to be in the App Store, but we were still very much developing it and treating it as if it was a real client app. Various versions were designed and tested. Below are a collection of screens I handed over to development team, Project manager and Toritaro client.
First pass
For the first pass, I used conventional styles and the composition relied on sketches that i draw.In addition, the typography had to be followed Toritaro font .
Second pass
Later, I challenged myself to create ui component follow Toritaro style.
Prototype of Toritaro checkout flow on mobile app and tablet
If you want to experience the concept of our mobile application:
Click here >>> https://marvelapp.com/5bf5g15 <<< Click here