GrubClub: Framing efficiency through Team Lunches.

Cody Rossi
5 min readJul 9, 2018

TASK_
Design an interface to provide effortless and organized team lunch catering. In an already fast-paced work environment, I tried to make Grub Club the easiest, fastest, and most convenient application for organizing lunch hour in the office.

HURDLES_
In a busy workplace, it can be difficult to organize a full team lunch. Lunch break is normally an hour long but time is wasted when people have trouble deciding where to eat, everyone needs to look at the menu options, and the food often has to be ordered days in advance. Grub Club had to provide a voting system and an organized list of individual choices.

TOOLS_
Sketching, Sketch (Mac), Invision, Adobe Illustrator.

OPPORTUNITY_
Grub Club introduces democracy to the lunch hour; a manager can create a group for his/her staff within the app and majority vote of a restaurant will determine that day’s lunch choice. Everyone can then check their Grub Club app to peruse the menu and select their meal choice. For those who don’t like anything, they can opt out and be responsible for themselves. The wire frames included a home page, restaurants details page, restaurants near you page, a countdown timer page, and a select date and time page. Not shown is a menu page but would be a lower tier to a restaurant page.

GrubClub Wireframes

THE PROCESS_
Why Grub Club? This was the question that I began my research
with. What I discovered was that though efficiency is important, the glue holding a workplace together is effective team building, and spending lunch hours together can contribute to that.

RESEARCH_
The demographic for this app would be adult men and women, aged 25–40, working in busy work environments. This age range would be young enough to utilize new technology and apps as well as financially stable enough to afford takeout every now and then. A lot of the questions I posed to this demographic were based around colour theory: When you think of fresh food, what are the first colours that come to mind? What colours come to mind when you think of hunger? And democracy? The answers helped me
build several different colour palette choices and iterations.

VISUAL LANGUAGE_
I wanted a sleek and professional look since the app was meant to be used in a professional setting; that meant edgy, sharp, bold, and
easy-to-read design. The colours were both dark and light, to play
with boldness and contrast. The movement is cascading, open, and scaled to encourage exploring. The space is flowing, squared, and minimalist.

LOGO_
It was important to build a brand first. Again, I played around with the colour theory backed by my research. After a light survey of my peers and several iterations, I finally came up with a logo I was satisfied with (below, with iterations).

Grub Club main logo.

Here are a few of the other logos I tested through survey results,
and they look on-screen.

MOODBOARD_
Moodboards are useful tools for design development so I used one
here. Lunch hours are essentially also times to take breaks so they
can be relaxing and even fun. So despite the app being used in a

professional sense, I also tried to keep it moderately casual. Below
is the mood board for my art direction. Aspects I wanted to convey were:

-Choice
-Time Efficiency
-Professionalism
-Entrepreneurship
- Boldness

STYLE TILE__DESIGN GUIDE
After the mood and art direction was locked down, I concentrated
on screen elements like buttons, sliders, typeface and typeface
sizes, timers, graphics, imagery, and icons. My style tile gives a
sample of the app’s aesthetic and my design guide takes a closer
look at all the design elements within the app. Below is my style
tile, and below that is the full design guide for Grub Club. Every
icon you see was custom made in Sketch or Adobe Illustrator.

Style Tile
Style Guide

PROTOTYPE_
It was time to put the pieces together and create the screens. Below are screens from the iterations I made with different colours, with the final product enlarged on the right.

The colours green and pale yellow conjures feelings of freshness and health. They’re both cool and warm colours that casually invite users in, but still feel professional when set against a darker background. Below is a link to the Invision prototype.

CONCLUSION_
I enjoyed the challenge of adding efficiency to a busy work environment. It was interesting to discover the issues in office settings where it’s hard to please everyone without some sort of democracy and how figuring out what to eat can be a huge time waster. Grub Club reconciles some of these problems by giving people a right to vote, and keeping them organized.

Thanks!

--

--