Grub Club: Seamless Team Lunches
A case study on designing an effortless UI Library
TASK
Design a User Interface library to provide an effortless experience for the users of an iOS app. The creation of the UI Library allows other development and design team members to create consistency across the ‘Grub Club’ brand. Establishing this consistency is important as it directly impacts and improves a user’s experience with the app.
CLIENT BRIEF
fictional
Grub Club approached our team to develop a UI Library through the use a unique art direction. Grub Club is hoping to build an app that allows teams in busy work environments to organize seamless team lunches orchestrated through your office assistant. The app is therefore focused on a professional target audience between the age of 25–40 who are passionate, creative and dedicated to their work.
PROBLEM
The coordination of the team lunches adds stress for the team members and organizers while being time-consuming. This time could be used for team bonding and enhance the social work environment.
OPPORTUNITY
Grub Club provided wireframes aimed at streamlining ordering, preferences setting and team agreement. The wireframes provide a list of available restaurants, checking menus for food choices/preferences and the collaborative restaurant choice.
RESEARCH
With the brief and wireframes in hand, research was conducted into the different users of the app and how that might influence the UI of the app. Using the information provided in the brief in addition to talking to a variety of team members and office staff at RED Academy, two different users emerged.
The first is the busy and creative professional that longs for an easy-to-use seamless lunch ordering experience that would allow them to spend more time engaging with their fellow team members. The other users would be the individuals tasked with organizing the meals. To elaborate on their personality, I conducted a short interview with the operational and facilities manager, Kevin Kevin at RED Academy, who usually is in charge of ordering team lunches on a weekly basis. Through conversation with him, I was able to gain more insight into the happy, passionate and dedicated personality that exemplifies the ‘office hero.’
“I guess people sometimes describe me as an office hero.”
— Kevin Kevin
However, it also became apparent that this ‘office hero’ was the social glue that would create the environment of a home away from home while you are at work. The interviews and brief allowed me to form a design intent indicative of the exact reason behind creating this app that should be reflected in the visual language. The intent of the visual language should convey a seamless lunch ordering experience orchestrated by your dedicated office hero.
PROCESS
MOOD
The personalities of the users and the everyday lunch dishes consumed in Vancouver certainly influenced the mood board. The mood board highlights a compilation of popular healthy lunch food items and a color palette reflective of fresh and relatable tones. This is paired with a set of patterns visible in the dishes and on the packaging of the meals, creates a sense of healthy, effortless, playful lunches with a dash of professionalism.
STYLE TILE
Using the mood board as a model to establish a coherent visual language the following style tile was established.
The font used for the logo seemed appropriate as it showcases clean but round shapes that portrait both a sense of professionalism and passion. Both the logo/heading font, ‘Trendo,’ and the body font, ‘Edmondsans,’ are designed by the Lost Type Co-op Foundry and therefore reflect the west coast diversity and a business casual feel. ‘Edmondsas’ is a sans-serif with character introduced by well-placed slabs and variations on ascenders.
Further, the complementary color palette of the red and blue is a play on familiar superhero themes to pay a little tribute to the office heroes that make work feel like home. Both colors are paired with a monochromatic partner to ensure that the highlight color remains faithful to the mood. The background colors are derived from food packagings such as noodle boxes and compostable containers.
The style tile features possible UI elements such as the buttons and rating systems. However, as you will see in the style guide, these items have been slightly adapted to ensure increased accessibility and brand identity.
DELIVERABLE
PROTOTYPE
Using the style tile established, I started to craft the screens of the prototype and made adjustments to the UI elements to stay true to the playful, effortless and professional design intent.
One of the primary alteration was adding a sense of depth to the buttons by using their monochromatic partner to create an elevated effect. This effect allowed the buttons to become highly visible call-to-actions.
Another alteration was created by adding a 30º angle to the icons present in the background patterns. Through this angle, I ensured that the background would not compete with the call-to-actions and logo.
Lastly, the rating system was adapted from the traditional use of stars to using a similar icon as the logo features. The use of the empty and full bowls present in the iconography are meant to establish the brand identity as a voice of authority in Vancouver’s food culture.
STYLE GUIDE
The style guide was designed to be a recipe to the brand identity. This house recipe comprised of the colors, typography, logo, iconography, UI elements and possible layouts, ensures that any team members that is creating brand assets can do with little effort and feel satisfied with their creations.
The guide highlights the specific pairings of colors used for the elements but also the background of the application. Further, it also gives a sample of the green that had been used for special instances.
Typography established in the style tiles turned out to be a good fit for the application, and therefore the typography section features an in-depth view of the uses of each font. Besides the use of ‘Trendo’ as headings and ‘Edmondsas’ as body and UI elements, special instances such as the countdown and the logo are also specified as an outlined adaptation of ‘Trendo.
The iconography chosen was an amalgamation of several artists featured on The Noun Project and are therefore cited for their creative commons contribution.
The last two sections of the style guide showcase the UI elements and their application in layouts. Buttons are characterized by an elevated design in their default state and a flat design in the active state. Further, the text field has particular focus and error variations that allow for improved flow and accessibility.
Lastly, the layouts showcase how all the parts of the house recipe combine to provide a consistent and coherent UI identity that is reflective of the seamless team lunches orchestrated by your happy and passionate office hero.
CONCLUSION
The creation of this UI library and identity was a great process as it allowed me to establish a brand identity with the opportunity to test its application and flush out iterations for a consistent final product. Challenges that arose highlight areas of improvement and further learning, such as designing and creating a personalized iconography for future brand identity designs.
