Foodtrux Apps

Discover food trucks near you

Some yummy designing "On the go"

Foodtrux is a clever startup app that matches hungry users with food trucks available in a given area. Our design had to be simple, fresh and well thought out, easily usable on a daily basis and delivered in a ready-to-develop state. With two operating systems and a user-vendor combo of apps in the mix, there was a lot of Foodtrux on our plates for three months. We joined the discovery phase, designed, delivered and we provided support throughout development. Like the trucks, it was yummy and mobile. Pun intended.

What we did here

Discovery
Product Design
User Experience Design
User Interface Design
Project Management
Handoff
Screens designed
+100
Project length
6 mo.
Platforms
iOS, Android, Web

Design Approach

We needed simple, user friendly apps that will look familiar and offer ease of use. Design was intentionally aimed at a younger audience with a modern, colorful design. Disclaimer: senior adults will appreciate the atmosphere as well.
Research
PRODUCT DESIGN
UX/UI
  • UX
  • UI
  • Handoff

USER
INTERFACE

COLORS

Vibrant combination of official Foodtrux orange and blue

TYPOGRAPHY

We've utilized Apple’s (San Francisco) and Android’s (Roboto) system font families. Balanced hierarchy and scale sizes provide the same feel on both platforms

VISUAL LANGUAGE

Playful atmosphere that emphasizes a food related theme

EMPHASIZED ELEMENTS

Large buttons make app navigation easier for the user

A lot of apps

Foodtrux project needed two versions of a single app; one for customers, the other for vendors. And it needed to be done for both iOS and Android. Two times two equals four, equals a lot of UX/UI work.

iOS

01

Android

02

CONSUMER APP

Native apps for Foodtrux customers, with a fresh design and a smart, modern user interface. Made for discovering food trucks near your location and more.

03

04

VENDOR APP

Simple and intuitive apps made for food truck owners. Used for creating truck profiles, tuning the location schedule and editing menus.

iOS

CONSUMER APP

Native apps for Foodtrux customers, with a fresh design and a smart, modern user interface. Made for discovering food trucks near your location and more.

01

Android

CONSUMER APP

Native apps for Foodtrux customers, with a fresh design and a smart, modern user interface. Made for discovering food trucks near your location and more.

02

iOS

VENDOR APP

Simple and intuitive apps made for food truck owners. Used for creating truck profiles, tuning the location schedule and editing menus.

03

Android

VENDOR APP

Simple and intuitive apps made for food truck owners. Used for creating truck profiles, tuning the location schedule and editing menus.

04

Production timeline

There was some multitasking involved, but overall it was one pretty smooth truck ride. We were involved in the discovery phase on the premises, and made sure requirements and scope were well defined. In the end, we've handed it all off to the Foodtrux team with time to spare. Did a couple of tweaks and a bit of QA. All well, hooray.
PRODUCT DESIGN & UX
UI CONSUMER
UI TRUCKER
WEBSITE UI
DEVELOPMENT iOS & ANDROID
Design QA

Show Time!

We've kicked it off with a clientcentric design sprint and that of course was super useful. Then we tackled both consumer apps. After defining our product, next came UX design. Got approval for that and then switched to the vendor app. Finally, we've polished up the user interface of the whole thing. Btw we first did the iOS and then ported the design to Android versions since iOS has just under 60% market share in the US. Data. It's awesome.

TIME PERIOD

01

Starting up the startup

In order to understand the idea behind the project and fulfill our mission, we dissected the business propositions and did a fair bit of market research. Competition in the food truck app turned out to be sparse and we practically had to define the niche. Collaboration with our client resulted in product design and project plans for both apps. Next came user experience design and prototyping. Finally it was time to create a youthful and fresh user interface.

FINAL PRODUCT JOURNEY 02

Analizing client’s input and requirements

Design sprint

Defining the feature set (product design)

Information architecture

User experience

User inferface

Tools used

From idea to completion, here is the procession of tools and apps we've used. These provided workflow speed, easy collaboration, efficient prototyping and a seamless developer handoff. Hanging on to them for dear life.

Figma

prototyping, user interface design

Our mainstay for user interface design. Figma is great for handling large projects with multipe cases and screens. When in need of quick updates and a fast workflow, look no further.

Adobe Photoshop

MOCKUPS & PHOTO MANIPULATION

There are now many like it, but there is only one real Coca Cola. And there is only one real photo editing tool. It's in our nature.

Framer

ANIMATIONS

A very smart and useful tool that magically turns designs into working websites, silently solving just about a million development problems along the way. Good for prototyping and great for saving time and money.

Trello

PROJECT MANAGMENT

Our guide through the dark forest. Boards, lists, cards and tasks, all customizeable and expandable. This is how project management tools need to be built.

User Experience Design

Hungry users are on the go. Trucks with food are on the go. We needed to get this one right, so we really went for it. User experience is key, no one cares about fonts and paddings if the way to basic need fulfillment is a mess. So we made it as clean as a whistle. Proud of this one.
Research
USER EXPERIENCE
PROTOTYPING
Explore
live prototype
Key components
Additional items

UX Process

We've made the trip across the pond and did the discovery phase with the Foodtrux crew. It was an intense design sprint where we literally went out there and interviewed both vendors and foodies, mapped out the user journey, detected pain points and listened intently to future users of this app. It was a proper deep dive. Finally we defined it all with our client, checked it against the original business vision and wrapped up the information architecture before doing the wireframes.

Backbone of the app

03

User Interface Design

The challenge was to craft out native apps for both iOS and Android. We carefully designed common elements in order to minimize environment specifics and make the interface eyepleasing, likeable and lively throughout different screens. Very happy how it turned out, check out the OS specifics below.
iOS
DESIGN

iOS App Foodtrux

Meticulously designed in both vendor and consumer versions, this native iOS design took the common denominator of colorful elements and spread them evenly in both versions. It's all very eyecatching and appealing, and it works. The simplicity of it all should stand the test of time nicely.

CONSUMER APP

Register

Registration is the first step but we chose to keep it optional. No point in restricting exploration to users right away.

Explore

User location is the center of Food Truck search. One can use both map and list view as closest trucks get listed on top. Some pretty nifty map zoom and free search modes are applied at this stage

Truck details

This screen is a chest of wonders, with numerous truck details available: current truck location, schedule, menus, specials, adding to favorites, the works. If we don't got it, you don't want it.

Food Menu

This is where the menu of each truck is displayed, prices and discounts included. Clear, cleanly visible, dinamicly refreshed and easy to scroll through.

Favorite Trucks

Only for registered users, a personal stash of favorited food trucks. Know when that special delicacy of yours is around the corner and make the intercept with precision.

Events

Food trucks reign the food festival scene. This little smart feature let's you know in advance (or in real time) what's on the menu at any given event. It's also map searchable and really useful.

Vendor APP

Truck Profile

This is basically the "home" section of the vendor app. Here is where Food truck owners switch between their various trucks. The most important info also gets toggled in here: if the vendors mark themselves as "offline", they don't get displayed in user searches

Schedule

Quite straightforward, this one. Vendors can present their future plans here, well in advance. Doing so with precision plays into their hand.

Menu

A complete list od everything a truck offers, this section is fully vendor editable.

Gallery

It is nice when users can get a glimpse of the look and feel of a truck. Yes, it's all about the food, but showcasing a few pictures of interesting stops or foodies they've met along the way can work wonders.

Today’s special

It's a piece of info most customers care about and therefore it got a place of it's own. Vendor takes a pic of the menu board and voila. Get's the juices going.

Switch Trucks

More than one truck can be operated through the same app. Here is the place to switch between trucks. A lifesaver for the multitasking truck owner.

ANDROID
DESIGN

Android App Foodtrux

The Android challenge lies in multitude of devices that have to run any native app out there. We have taken the common UI elemets and polished them up for this platform while trying to maintain the link with the corresponding iOS option. Looks good, works good. Hopefully it will taste good too once you track down your favourite food truck.

CONSUMER APP

Exploration

Actually the best part, short of eating that tasty food truck taco. You can browse, zoom and swipe through the map, or just get a list on "what's near me now?". This screen is a joy to use.

Filtering

Change the radius of your search, or even better, get a list of only pizza trucks in your region. Or only mexican food. Or any other kind. The screen that will get the juices flowing.

Illustrations

We wanted the common actions like registration and login to get some extra umph. And we did that by using really lavish illustrations. Not what one would expect here, but it was a cool new approach. It just entices certain emotions, you know.

Vendor APP

Add Schedule

Utilizing native Android calendar and clock not only looks familiar to the user, but also minimizes the chances of inadvertedly producing bugs during development by having to use external libraries for this to function. Keeping things simple.

Menu editing

Predefined categories and easy to understand steps. Add, edit or delete a meal. Unfrustrated vendors make for "happy to work with foodtrux in future" vendors. That's all that matters.

Settings

This is where a vendor can apply for truck details edits, logo swap and any other alteration to their business appearance. A screen for summoning admin help. Beats writing emails.

Website
DESIGN

Foodtrux Website

The focus of the foodtrux startup might be on the apps, but there has to be a promotional website. We've designed it in accordance with the whole foodtrux look and set it up in a way that explains what the apps are about and how they help you catch that runaway sandwich.
Neatly structured, clean as a whistle and gets all important points across. Bingo.

Information

foodtrux in a nutshell. The ideas, the vision, benefits, explainers, vendor and investor call to actions and anything else we thought could help with understanding what this business is about. Links to Appstore and Play store are included as well. Those two might come in handy.

Visuals

The visuals are a combo of distinct, modern 3D illustrations and photos disguised as organic, "edible" shapes. Contrasting colours complement each other in a hot and cold harmony. And although this description sounds like a modern art masterpiece review, these visuals really work well.

Branding

While playing around with the orange Foodtrux logo, we decided to add some striking blue into the mix and have these two complementary colors wrestle a bit. It turned out youthfull, lively and a great foundation for building the whole look of the app. We softened the lines a bit, played with some shapes and made good use of photos and custom illustrations. Cheerful surroundings embraced the logo and made it sort of delicious. Finally we gave it a sprinkle of the "trucker" vibe with the IBM Plex Mono font. The whole thing is called foodtrux after all.

Client’s Story

Foodtrux - an app for accessing food trucks near you. Find out where your favorite food trucks are and discover the ones you don't know about yet.

If you are a foodie and like to eat outdoors with your friends and family, Foodtrux can help you. Consumers are in pursuit and vendors are updating their location and destination, their menus and schedules.

Foodtrux is a dynamic, real-time, GPS powered food truck locator app connecting food truck foodies with food truck vendors. It provides food truck locations, turn-by-turn directions, menu selections, daily specials and promotions to those in search of mobile culinary delights on wheels. As a company, we are committed to the quality of our application and the overall user experience. Foodtrux is on a nationwide tour to expand the app throughout the United States.

2019

Founded

4

Cities

Next Project ↘

Dobartek Apps

Food delivery service