SUBWAY
THE CALDA
MOBILE

Subway

UX/UI design
iOS dev
Android dev

Our work for Subway includes the UX and UI design of the mobile platform for iOS and Android app.

INDUSTRY
Food and beverage
Date
March 2022
DELIVERABLES
UX Design, UI Design, IOS Development, Android Development
Duration
6 weeks
Changing the way people order their
#subs.

ABOUT PROJECT

UX DESIGN

UI DESIGN

SUPABASE

FLUTTERFLOW

CUSTOM COMPONENTS

01
Meet the client
SUBWAY
Subway, a global leader in the fast-food industry, has been serving fresh, customizable sandwiches to millions of customers for over 50 years. With more than 37,000 restaurants in over 100 countries, Subway’s commitment to offering healthy, flavorful, and convenient meals has made it a household name worldwide.

Online ordering process

On the homepage you can choose between Rivers and Rainforests but to make a selection you will to press and hold the item until the circle is loaded.

Tailored loyalty system

A simple-to-follow loyalty system was an integral part of the solution that the Development agency was looking for. Customers would scan their unique QR code every time they visited one of the Subway restaurants and immediately receive their cookie points to their account. Every 5th cookie meant a new reward that they could claim.

Boosting customer loyalty

There are individuals using the trackers to protect their personal possessions and on the other hand the there are businesses like food-delivering companies whoo need to protect their vehicles. We came up with a solution that would satisfy the needs of both.

Easy to redeem rewards

See full history of your tracker’s movement, filter through it based on date input and can better understand exactly how the tracker has moved during a certain time period.

Moving to online

The company that is responsible for the development of the Subway brand within the CEE region understood that they had to allow their customers a seamless online ordering process. With the rise of the food ordering apps, the leadership wanted to develop an app that would offer the most loyal Subway fans the same experience of building their favourite subs as in the restaurant.

Building
lasting relationships

“We loved working with Calda because of their professional approach and high level of expertise. They made sure that the development process was quick and efficient, which was of utmost importance to us. Overall the app reached our expectations in reaching business performance goals and supported the franchisees.”
- Subway development agent in CEE region

Changing the way people
order their #subs.

+ 21%
Average order value
no.6
Best food apps App Store
+ 1.4x
Recurring orders per customer
31%
Faster ordering process
18%
Regulars using the app
02
Design approach
APP MADE TO CALM YOU DOWN
The app is all about calming the user down, which is why we had to go against your modern UX principles which dictate quick access and techniques to keep people within the app. WildSound does the opposite - it calms the user down. It’s designed for slow use and mindful experience.
1 DISCOVER
User research, analysis of good practices and competitors.
2 USER FLOWS
Deep diving into the app structure, its features, and usability.
3 WIREFRAMES
Early-stage visual representations of a product’s layout.
4 UI DESIGN
We kept the app simple as the main focus is on natural sounds.
5 DESIGN SYSTEM
A comprehensive set of guidelines that encompasses a collection of reusable design elements.
SLACK | GOOGLE MEET COMMUNICATION THROUGHOUT THE PROJECT

Business app to simplify the preparation of the to-go orders.

The challenge was to create an app that improved the experience for Subway fans while streamlining to-go orders for employees and simplifying loyalty system validation. Additionally, the app needed to provide data to support key business decisions.
Business analytics to understand user loyalty.
Fast and secure system to verify the coupons.
Easy to view and follow through for to-go orders.
Quick and efficient QR scanning process.
03
UI Design
DEFINING DESIGN DIRECTION
After the well thought-out wireframes we started by choosing our design direction. We kept the app simple by only adding some of the dark green colour to resemble the feeling of nature. Two versions of app were designed: light mode and dark mode, based on the user phone settings. We strived to achieve a coherent and intuitive visual appearance but also modern and attractive design at the same time.
/ FONT FAMILY
/ Subway Sans LCG
Designed by
Hannes von Döhren
This is a specialised version of Inter with tighter spacing, for display usage. This version also has Roman and Italic styles. The typeface contains 20 files and supports 79 languages.
A B C D E F G
H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u vw x y z
/ COLOUR PALETTE

An app to support the needs of the customers

Now, more than ever, companies have to offer a high-level user experience, extending the brand presence to the palms of their customers. With a mobile app and a supporting business application, Subway in a CEE region could bet on their customers' loyalty by replicating the user experience from the restaurant to the screens.
MAPPING OUT THE CORE STRUCTURE
Wireframes
Wireframes are early-stage visual representations of a product’s layout. Here we designed the first ideas to roughly visualise how the app would work in order to achieve the best user experience possible. The first wireframes are created with minimal detail, using basic shapes and placeholders to represent different elements like text, images, buttons, and navigation menus, later on we add more characteristics to visualise the individual features.
04
Solution
An app to support the needs of the customers
Now, more than ever, companies have to offer a high-level user experience, extending the brand presence to the palms of their customers. With a mobile app and a supporting business application, Subway in a CEE region could bet on their customers' loyalty by replicating the user experience from the restaurant to the screens.
Let’s start building.
Let’s start building.

Jump on a call with our CEO to discuss your idea in more detail 🧡🐙!

Let's get in touch

Step 1/2

How can we reach you?

CancelNext

Tell us about your project!

Back
Thanks for reaching out! We’ve received your submission and will be in touch shortly!
Oops! Something went wrong while submitting the form.