Lunchbox

OVERVIEW:
‍
Created a new design system to enhance our digital products and speed up our workflow.

Check out Lunchbox Client Work

‍

Process Deck

ROLE: Product Designer

TOOLS USED: Figma

DURATION: 2 Week Sprint

INTRODUCTION
‍
My team was tasked with creating the first in-house design system for Lunchbox products. The design system was meant to streamline design workflows, make start-to-end deliverable times faster, to standardize the usage of reusable components and font styles, and to implement standard base spacing units, font hierarchy increments, and more into the design team’s workflows.

PROCESS
‍
As a growing product team, we had a dated way of designing for our clients that didn't use all the tools Figma had to offer. We wanted to start creating a template / design system for all our suite of products (web, catering, app, marketplace, etc.) so that moving forward all products would be cohesive as the platforms are updated and new clients were onboarded.

We leveraged Figma's library, style, and component tools to create and reuse UI components while maintaining the design system.

OLD PROCESS
‍
As you can see below our OLD file structure in Figma was a mess. Our old process had a different file for each product and had components living next to the relevant screens. It made it really difficult to make brands websites cohesive across products.

CREATING OUR DESIGN SYSTEM
‍
This project started with setting up components in a "core" library file. Our companies design system was a unique challenge since we create branded ordering platforms for restaurants. We knew we needed to allow the design system to be flexible with color and logos to allow brands to customize their Lunchbox experience to fit the brands design guidelines.

In our "Core" Library we broke everything down into atoms, molecules, and organisms

TYPEFACES & SPACING
‍‍‍

BUTTONS & TABS‍

VISUAL DESIGN

01
Compete with friends and see who is saving money the smartest. Compare your progress as you save!

When creating a streak it can either be for your rainy day fund or for something big you’ve been wanting to buy. Barclays wants people to have a successful feeling every pay cycle when its time to add to your streaks. And when you finally reach your streak goal all your friends can see your achievement and reward you for your hard work.

02
Assign your savings account balance to your streaks to make progress.

03
Creating a budget of three main accounts that helps you organize and manage all your streaks.

WHAT I LEARNED

To understand what users needed in order to save their money in the easiest way possible. It was very interesting researching the correlation between mental health and money. It was challenging choosing a bank like Barclays that I knew nothing about. Overall, while it wasn't the most straightforward project from start to finish, I learned a lot and had pleasure in discovering new things along the way.