Building a Digital Language

UX/UI Design
System and Processes

Company

Lunchbox

Role

Product Designer

team of 2-4

Lunchbox is a digital one-stop solution for restaurants and food tech. With several projects and big goals, it was important to build a design and coding language. Turn around times for products were still not quick enough due to inaccuracies in coding to design.

Understanding the problem

Source of Truth

The biggest issue we faced was that Lunchbox lacked a source of truth. There was no place where developers or designers could go to build.

Therefore ending up with broken designs and unscalable development. With a new guest experience underway, it was time to break down the library.

What will it do?

After doing some secondary research and talking with developers more in-depth on the idea we concluded the following:
• Standardize development
• Reduce code duplications
• Improve collaboration between teams
• Drive scalability

Who is the User?

Developers and Designers.

Standardizing:
Giving us certain designs that are standard and fit the brand's goals.

Scalability:
‍Allowing us to turn around products quicker and more efficiently. Therefore leading to quicker testing and market fit.

Collaboration:
Giving the ability to collaborate with developers to better understand their language. As well as innovate designs within constraints.

1st attempt

Bare Bones

"Atoms", Molecules", and "Organisms" were used in the 1st iteration. Breaking items down by structure. This was the first very quick iteration of the library as the structure was built previously by another designer for just the OS product. We needed to also add and build out the B2C product we were working on. Quickly we noticed this put too many constraints on the design team and things were breaking left and right as we explored design.

2nd workings

Sweet Spot

With some time given back as our teams built out a big project we dove into better research and figuring out exactly what would work for Lunchbox.
For our second round, we went with inspiration from Shopify's library. Utilizing assets and templates.
Since Lunchbox is a mid-start-up with constant iterations it is important that we do not get stuck in templates and every piece lives as its own component.
This was a roadblock we hit with our first library.

Going Beyond

But scalable design and development don't start and stop with the DLS. As I worked closely with developers it was clear the language barrier would still exist per project. So in conjunction with this, a whole Figma system was built between designer and engineering files. Engineering files being the ultimate source of truth.

Building a Digital Language

UX/UI Design
System and Processes

Understanding the problem

Source of Truth

The biggest issue we faced was that Lunchbox lacked a source of truth. There was no place where developers or designers could go to build.

Therefore ending up with broken designs and unscalable development. With a new guest experience underway, it was time to break down the library.

What will it do?

After doing some secondary research and talking with developers more in-depth on the idea we concluded the following:
• Standardize development
• Reduce code duplications
• Improve collaboration between teams
• Drive scalability

Who is the User?

Developers and Designers.

Standardizing:
Giving us certain designs that are standard and fit the brand's goals.

Scalability:
‍Allowing us to turn around products quicker and more efficiently. Therefore leading to quicker testing and market fit.

Collaboration:
Giving the ability to collaborate with developers to better understand their language. As well as innovate designs within constraints.

1st attempt

Bare Bones

2nd workings

Sweet Spot

Going Beyond

Explore other projects

Live Savings

/

Daily Harvest

/

Lunchbox Ecosystem

Let's Get in Touch

Building a Digital Language

UX/UI DesignSystem and Processes

Understanding the problem

Source of Truth

The biggest issue we faced was that Lunchbox lacked a source of truth. There was no place where developers or designers could go to build. Therefore ending up with broken designs and unscalable development. With a new guest experience underway, it was time to break down the library.

What will it do?

After doing some secondary research and talking with developers more in-depth on the idea we concluded the following: • Standardize development• Reduce code duplications• Improve collaboration between teams• Drive scalability

Who is the User?

Developers and Designers.

Standardizing:Giving us certain designs that are standard and fit the brand's goals.

Scalability:‍Allowing us to turn around products quicker and more efficiently. Therefore leading to quicker testing and market fit.

Collaboration​:Giving the ability to collaborate with developers to better understand their language. As well as innovate designs within constraints.

1st attempt

Bare Bones

2nd workings

Sweet Spot

Going Beyond

Explore other projects

Live Savings

/

Daily Harvest

/

Lunchbox Ecosystem

Let's Get in Touch

UX/UI Design
System and Processes

The biggest issue we faced was that Lunchbox lacked a source of truth. There was no place where developers or designers could go to build.

Therefore ending up with broken designs and unscalable development. With a new guest experience underway, it was time to break down the library.

After doing some secondary research and talking with developers more in-depth on the idea we concluded the following:
• Standardize development
• Reduce code duplications
• Improve collaboration between teams
• Drive scalability

Standardizing:
Giving us certain designs that are standard and fit the brand's goals.

Scalability:
‍Allowing us to turn around products quicker and more efficiently. Therefore leading to quicker testing and market fit.

Collaboration:
Giving the ability to collaborate with developers to better understand their language. As well as innovate designs within constraints.