'Tomato Design System' - A new hot selling product at Trader Joes
Trader Joes has done it again! This time they have launched something very unseen and unique. Trader Joes is known for their sustainable and economic physical products. Now, they're officially entering into the digital realm with the launch of their highly anticipated product 'Tomato Design System'.
So, what is Tomato Design System? And how did it come alive. Let's find out!
One fine day, three Pratt students were at this giant store called Trader Joes happily picking up their groceries. They were in awe seeing all the artistic signs and variety of products available at Trader Joes. The students were UX designers and as any UX designer their first instinct was to check the Trader Joes website. After seeing how interesting the website is , they decided to collaborate on proposing a streamlined design system for the Trader joes website. This golden trio started their venture and created a trilogy which resulted in the making of Trader Joe's unofficial design system 'Tomato'.
The golden trio includes Medhaswi - The explorer , Yellin - The Discoverer and Sayali - The Wise. In this case study, Sayali will be telling the story through her perspective. Now, the narrator will pass over the mic to Sayali.
Introducing Our Team
My Contribution
Let's have a walk through on how we cultivated the Tomato Design System. My contributions includes creating and documenting the design system for Typography , Silly Jokes, Section Header and all types of cards. I also assisted and reviewed all parts in our building process.
Tools
Figma , Zero height, Google Workspace
Part 1 - Planting The Right Seeds
Atomic Design Methodology
We referred to Atomic Design by Brad frost to construct the Tomato Design System. This methodology helped us streamline the process for producing an easy to use and fun design system.
Deconstructing the System
To create a solid product , the base needs to be solid as well. To kick off our process, a thorough investigation was conducted on the Trader Joes website. The first step was deconstructing the UI by segregating all the elements into their respective section. As we were dissecting, we noticed some inconsistencies in the existing system. Inconsistent use of typography, randomly used images in a layout, decorative elements used without purpose were some of the noticeable issues. Several Accessibility audits were conducted throughout the process.
Segregated elements into sections such as Color, Images, Typography, Lists Etc.
Brand Identity and Design Principles
While developing design principles, we made sure to stay true to the brand values in order to not lose essence of this unique and fun brand .
Engaging 🎨
Crafting visually appealing interfaces, intuitive interactions, and compelling content to keep users interested and engaged with the platform.
Efficient 🏆
Creating reusable components, clear guidelines, and standardized practices to facilitate rapid iteration and development and save time for designers and developers.
Accessible ⚖
Adhering to WCAG Guidelines to ensure an accessible and inclusive experience for all users.
Sustainable 🌱
Establishing practices that support ongoing maintenance and evolution, ensuring the system remains relevant and effective over time.
Brand Personality
Values
-
Experimental
-
Rewarding
-
Organized
-
Maximal
-
Innovative
-
Discovery
-
Balance
-
Quality
-
Inclusive
Traits
-
Friendly
-
Creative
-
Trust Worthy
-
Honest
-
Playful
Part 2 - Harvesting The Tomato
Creating UI Kit
While harvesting, best tomatoes are graded, sorted and picked before loading on the truck. Similar to that, Tomato Design Systems Figma UI kit was made after careful observations, revamping and making critical design decisions. The UI Kit is published in Figma community and it currently has 40 users.
Typography
"Function Follows Form."
Typography was the most challenging part as it took us weeks to figure out how and where to employ different fonts.
After lots of brainstorming, back and forth discussions and thinking, we decided to sort fonts according to their function and visual hierarchy.
For our headers, 'Freight Text Pro' is used as this font is fun and legible.
For all types of content, 'Cerebri Sans' font is chosen, for it's modern yet elegant look.
'Kalam' is utilized for recipe cards, as this font has a very personal and playful look.
Recipe Cards
Trader Joes has the most distinctive looking recipe cards.
The recipe card design invokes a nostalgic feeling in the user as if they're writing notes in their diary.
Two types of recipe cards exists in our design system viz are 'Primary Recipe Card' and 'Secondary Recipe Card'.
Both cards exists in our design system carrying different use cases but same guidelines.
Primary Recipe Card
Secondary Recipe Card
Section Header
Section header is straightforward and simple yet the most widely used. It preserves the quirkiness of the brand , without losing the formalness.
Image of a Section Header
Anatomy of a Section Header
Part 3 - Delievering The Tomato
Lastly, tomatoes are delivered in order to hand them out in the market for customers. It is made sure that they are fresh and of the finest quality. Tomatoes can be put to use with help of multiple recipes as it has a wide usage worldwide. But to make the best use of it , it should be used according to the regional and seasonal needs. Similarly, there can be multiple ways to use our design system but to get the best results from using our system, it has to be implemented with the help of guidelines. We used the platform ZeroHeight, to provide documentation for the Tomato Design System. The documentation includes detailed guidelines, accessibility matrix and best practices on how to use foundations, elements and components in our design system.
Glimpse at the Documentation of Tomato Design System
Marketing and Pitch
To promote our design system in a creative way, we were ransacking our brains. We wanted to do something playful , fun and memorable. Before the final presentation, our team went to a physical trader Joe's store to shoot a small advertisement type video to pitch at our final presentation.
Along with the video, we also decided to print badges representing Tomato Design System by using resources available at Pratt Institute Manhattan's library. We distributed the badges to our professor and the class on the final presentation day. Everyone was surprised and in awe after receiving the badge. Everyone seemed to love this little token.
Takeaways
Despite having lots of fun while working on this project, I also confronted some dilemmas. At the start of this project, it felt like Trader Joes website already has a streamlined system. But as I started working on creating a design system, I was met with more and more revelations. The need of having an organized design system became more clear and evident. Working on design systems made me realize that they're both complex and simple. And there's no one way of looking at it .
As someone who enjoys working on Figma, this project sharpened my technical skill set
Conducting accessibility, on an atomic and molecular level , takes a very sharp turn. Making sure even the smallest of particle is following the guideline is crucial for the overall system.