Grub Club — A team lunch App
A case study for Grub Club
Task: Designing a mobile application interface for Grub Club
Team: Winnie Dai, Cody Rossi
Tools: Adobe Illustration, Sketch
Design Brief
Grub Club is a team focused, communicative lunch app which everyone gets their way that brings democracy to your lunch hour.
The Problem
Many companies have regular team lunches, where the entire team will either go out for lunch in the proximity of the office or will order food for delivery. The persistent problem is for the person who organizes these lunches: he or she has to track down everybody’s food preference and pre-order. This process has been very time-consuming — with everybody having a busy schedule, it’s hard to get everybody’s order in on time.
The Opportunity
Grub Club provided the wireframe for our team to design the UI for Grub Club app that would allow the entire team to select their restaurant and dish preference, and for the responsible person to be able to place the order seamlessly.
Target audience
Our target audiences are male and female age 25 to 40 years old that are professional employed / entrepreneur working in a startup or agency environment. Basically, anyone that works in a team environment.
Persona
Outgoing, extraverted, likes to laugh, passionate, dedicated, social, creative, stylish
Key functionality
- Users can look at a list of available restaurant options
- Users can look at the menu and daily specials and place their preference
- Users can come to an agreement on the restaurant choice
- Team members can place their dish/food preferences prior to ordering
Research and Brainstorming
We started of our research by asking RED staff and students what does team lunch means to them. From the feedback we received, though most people value the quality of the food, the part they enjoy the most is the conversations and bonding that happens through these lunches. Also, people all love to organized lunches to show appreciation to their team members if the process were made easy. So, for our core inception, we decided to focus more on the social factor of the team lunches. This leads to our why: Team bonding, through creating more efficient lunches
Team bonding, through creating more efficient lunches
Art Direction
In order to present more variety to our client Grub Club. Cody and I decide to present two different art directions. While Cody aim to create a more professional and sophisticated design, I took a more casual approach. I wanted to create a more playful mood that emphasis on the team bonding in a relax office environment.
Mood
With our why in mind, the mood I intend to create is
- Airy & Breezy
- Cheerful
- Fresh
- Open
- Casual and fun but still professional
I decided on this mood because I am trying to depict the perfect offices environment for creative individual. I view lunch breaks as a way to re-boost oneself during a work day, so one can temporarily step away from their desk and work for a breath of fresh air. Lunchtime is always great when there is tasty food that is catered to your liking.
Moodboard
Initially I gathered lots of food photography (mainly fruits) in my moodboard. Upon consulting with my instructor, the beautifual trust Brianna at Red Academy, I felt that the moodboard wasn’t clearly representing the mood I wanted to create. The primary version focused too much on gourmet. Our team’s why wasn’t focused on food, but focused on team bonding, food was merely a tool to bond.
So I revised my moodboard to the second picture on the left. Adding more elements of team bonding and more photography of office lunch environment.
Mood again: joyful, casual, breezy, refreshing, open, fun but professional.
Inception Sheet and Visual Language
After finalizing my moodboard, the following visual elements were carefully selected to depict the mood.
Colours
The feedbacks I got for my first colour palette was it lack resonance with food. So, I tweaked the original colour palette to make it more visually appetizing. According to the colour theory, I found that blue suppress people’s appetite. As an result, I replaced blue with turquoise.
Orange
- increases mental activity and often stirs up a sensation of hunger
- makes people feel welcome and when someone is comfortable, eating sounds like a great idea.
Turquoise
- different hue than the standard blue.Turquoise is actually an appetite stimulant.
- often connected to happiness and the feeling of being carefree
Red
- raises blood pressure, heart rate, and causes hunger to be more prevalent
- red is used to added attention
Space
I decided to keep the space in my design clean and simple for two reasons. First, I wanted to balance out my colourful colour palette. Secondly, I didn’t want to cluttered the minds of users. I wanted everything to remain fresh, like a breath of fresh air when you are busy at work. No fuss, no clutter.
Movement
Movement wise, I wanted to remain organized, to maximized the simplicity in using the app to increase efficiency for users
Style Tile
With my visual languages and my mood in mind, I created a style tile depicting the possible UI elements and icons I may use.
Brand Style Guide
The brand style guide was made as a guideline to maintain the consistency of the brand throughout the app. The elements of a style guide are very much similar to a style tile, but with more finalized details.
Colour: Orange(#FF9D5C) and turquoise(#27B2A5) are the main colours used. Yellow (#FFC951) was used for rating icon. Red(#C03334) is used in buttons. The two hue of brown(#B99B90, #B99B90) is used for paragraph text.
Logo: The logo for Grub Club is two text (fill and border)layered on top of each other, with one positioned 4pt above the other. ! is used instead of the l to create an exciting effect.
Iconography: The timer was created by me from scratch. The other two is from sketchappresouces.com and was twerked to portray Grub Club brand.
Prototype
Click here for the Invision Prototype.