OVERVIEW:
Created a new design system to enhance our digital products and speed up our workflow.
Check out Lunchbox Client Work
ROLE: Product Designer
TOOLS USED: Figma
DURATION: 2 Week Sprint
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.
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.
IMPLEMENTATION
After creating all our libraries for Core, App, and Marketplace components its was time to start recreating our products using this new system.
To be continued... :)