Snacks - Design System (Part 1)
Snacks is a Design System proposal created for Takeaway.com.
In this case study, I will focus on the part that covers consumer-facing applications, particularly the UI concept and all the required changes to become more efficient at product creation.
I will skip the usual due-diligence steps such as UI audit, etc., and will instead go directly to the proposed solution, which I envisioned for the Takeaway.com.
Horror Vacui is Latin for fear of space. Mario Praz, an Italian-born critic of art and literature, coined the term to call out the Victorian era's cluttered art. In those times having more, meant affluence, so every little space was stuffed with details.
In a nutshell, the main problem is the absence of core foundations that define a set of constraints inside which we need to operate and the lack of the basic design principals that help guide the decision-making at the most fundamental level.
Another problem is the absence of protocols and frameworks that will allow Designers to be innovative without venturing outside of defined rules. These rules are essential to maintain consistency and efficiency when the product growth's inevitable complexity starts to creep in; I will cover these "rules” further in the case study.
Snacks Core Values
To make sure that Snacks Design System works for our product, we need to define the set of Core Values that will remind us of our purpose in the grander picture.
We Are Empowering
Snacks allow product designers and owners to spend more time focused on problem-solving, iterating, and evaluating their solutions. We give developers more time to write better code and prevents a snowball effect of technical debt.
We Are All-Inclusive
Snacks are firmly aware of the importance of accessibility and inclusivity in UX. We integrate the power of UX Writing for actionable language and link findings of UX research to its components. We are intuitive and straightforward enough that even the most junior-level person, who just joined the company, can start using us out-of-the-box.
We Are Global
Snacks provide the company with a single source of truth, which also benefits other departments such as Brand, Back-office, and Legal. Our goal is to create a healthy ecosystem that will elevate the quality of culture behind the people who build our products and, in turn, attract new talent. We provide a language that is spoken and understood by everyone in the company.
I firmly believe that a Design System should behave like a product on its own. It should have its value statement, ethos, and general recognition.
For Snacks to become a recognizable part of the company that will feel mature yet approachable and likable, I designed a simple logotype that can be scaled to all three verticals.
Snacks should be instantly recognizable and associated with an organized, systematic, and innovative part of the product creation.
Snacks Visual Language
In order to have a common north star when making design decisions, we need to establish a few basic ground rules. I selected three design principals that I believe will form a strong baseline on which we can grow our UI.
The affordance principle tells users how to use an object. Users will map the possibilities of what an object does according to their conceptual model. One of the practical rules is to only use circles or very round corners on the actionable items.