The Biz Baker redesign was approached with a blend of enthusiasm and respect. We knew we were on the brink of something special by creating the first truly hands-free bakery management app our mission was seamlessly integrate technology into the bakery world, making operations smoother and more efficient without the need for manual intervention.

The next phase of our task introduced an inevitable rebrand. This challenged the effectiveness of our design system, particularly in its effectiveness in handling a rebrand.

In this project, there were 2 partners involved. One focused on AI conversational design, while I handled the product design and Design System creation

I've already shared the link to the Case study. Feel free to explore it at your convenience. Your feedback and insights are greatly appreciated.

Branding

We undertook a comprehensive redesign of the brand, strategically incorporating visual elements that provide immediate insight into the essence of Bizz. This ensures that users and onlookers can swiftly discern the app's intended functionality from the logo itself.

Avatars

I establish a centralized component housing the logo and logomark, streamlining access for diverse teams (Content, Marketing, Engineering). This approach facilitates easy retrieval and automatic updates for potential future adjustments.

Atoms

In the Atoms section, I've established a central "Master Atom" serving as a global reference. Within this, I've defined specific "Atom Sizes" to be utilized locally across various designs.

Icons

All the icons that have been used all over the app are listed below. Every icon has 2px of stroke & I picked up the icons from an icon liberary due to constraint of the time in the project

Buttons

In our app, I've employed a diverse array of buttons, but we've maintained a focus on limiting button variations for each specific component. This approach has helped me to maintain a clean and simple design system, prioritizing a professional aesthetic.

Components

Below you can see the other complimentary components which has been used in the app

Colors & Color Tokens

Here are the semantic token values for the colors we've incorporated into our Design System, carefully chosen to align with our brand identity. We've also curated gradient options for packaging using these colors.

Card Components

Regarding our primary Call to Action (CTA) buttons, we've opted for prominent card-style buttons. We've developed two distinct variants for these card buttons. Additionally, we've extended this card style to our existing cards, streamlining our components and ensuring optimal component performance.

Navigational Components

The majority of our navigation options are instances of a master navigation component. I've meticulously designed various navigation components within the app, all of which stem from this single master component. This approach keeps our Design System organized, clean, and straightforward.

Typography Tokens

In crafting the Design System, I aimed for simplicity and manageability in typography sizes. Keeping them relatively small allows for a coherent system where elements are easy to track and manage.

This approach ensures that developers can effectively utilize the typography without encountering confusion or unnecessary queries, promoting smooth implementation and design consistency.

Other Tokens

In my Design System, I've established a consistent approach for spacing, radius, and shadow tokens. I base these on multiples of 8, denoted by "X" representing 8. For values exceeding 8, I use "x2" to signify double the base value, maintaining a clear and intuitive naming convention.

Documentation

Our team is relatively small, and we prioritize streamlined documentation from the perspective of our Design System. To facilitate this, I've utilized Zeroheight for documentation. Below, you'll find a glimpse of our documentation. I'll also provide the links for you to explore further.

That's a wrap

This Design System case study has been a fulfilling journey, allowing me to fully engage with my passion for Design Systems, a love that ignited a few months ago. I decided to dive into a practical application with one of my recent side projects, Biz Baker. Although I acknowledge there's room for improvement, I'm committed to refining and enhancing my skills. I'm open to any suggestions or critiques you may have that can aid in my growth.

Feel free to connect with me on LinkedIn, where we can further discuss and share insights. Let's keep the conversation and learning going!

I am actively seeking my next career opportunity. Please feel free to reach out if you know of any openings that align with my skillset and experience. I appreciate your support.