MOB Design System 🎨

OVERVIEW 📌

MOB is a design system I helped create in Adobe XD for N5 Now, designed to serve as a unified source of design elements for all digital products within our organization. The primary goal was to streamline design processes, improve design consistency, and enhance the user experience across all the products.

 

Outcomes 📊

• Increased design efficiency by reducing the time spent on UI creation across all digital products.
• Improved consistency across products, ensuring a cohesive user experience and brand alignment.
• Scalability of the design system allowed for easy updates and adaptations for new features or products.
• Longevity and impact: The company continues to use this design system in 2024, demonstrating its lasting value and effectiveness 3 years later.

 

 

READ FULL PROCESS ⬇️

The Problem 🔍

Delays: Using a basic UI kit made creating new components time consuming and inefficient for both designers and engineers.

Inconsistency: Without a unified system, products lacked cohesive design, leading to a disjointed user experience.

Collaboration Friction: The absence of a streamlined design system created unnecessary friction between teams, with product and engineering needing to align constantly on design updates and requirements.

 

The Opportunity 🎯

• How might we create a unified design system that streamlines component creation and ensures consistency across all digital products?
• How might we enhance collaboration between design and engineering teams to reduce friction and improve efficiency?
• How might we empower the product team to rapidly prototype and implement new features without compromising quality or user experience?
• How might we foster innovation by providing a scalable and flexible design system that accommodates future changes and iterations?

My Role 🙋‍♂️

I collaborated with another designer to create the MOB design system, working closely with our team, including the Product Manager and Engineering, focusing on delivering a user-friendly experience across all digital products.

 

The Team 🧑‍🤝‍🧑

• Lead Designer: Gonzalo Fasce
• Product Designer: Wagner Henriquez  (myself)

 

Responsibilities 🧐

• UX Design: Designing the user experience of the design system, including creating wireframes, prototypes, and user flows. This involves ensuring the system is intuitive, easy to use, and aligns with the needs of various stakeholders.
• UI Design: Developing the visual elements of the design system, including defining the interface, color schemes, typography, and icons. This includes establishing a cohesive design language that is both aesthetically pleasing and functional.
• Collaboration: Working closely with the development team, including engineers and product managers, to confirm that the design system is technically feasible and aligns with project objectives.
• Documentation: Creating comprehensive documentation for the design system, detailing guidelines and best practices to ensure consistent application across all digital products.
• Iteration: Continuously refining the design system based on user feedback and data analysis, incorporating enhancements, optimizing the user experience, and ensuring overall usability and functionality.

 

The Process 🕹️

The design process was broken down into the following stages:

• Define: I defined the structure of the MOB design system using the Atomic Design methodology. This involved breaking down the interface into small, reusable components, which set the foundation for the entire design process.
• Identify Atoms: I identified and defined the atoms, which were the smallest, most basic UI elements in the design system. These included buttons, icons, typography, colors, and form fields. Each atom was documented in a style guide or component library.
• Group into Molecules: I grouped the atoms into molecules, creating functional units. For example, a search bar was formed by combining an input field atom, a button atom, and a label atom, allowing for effective interaction.
• Combine into Organisms: After defining the molecules, I combined them into larger, more complex components called organisms. These reusable patterns enhanced the interface; for instance, a navigation menu organism included multiple molecules like a logo, links, and dropdown menus.
• Create Templates: Once the organisms were defined, I developed templates, which represented specific interface layouts by combining organisms. This step ensured consistency across different pages and sections of the interface.
• Build Interfaces: Finally, I utilized the templates and components to construct full pages and interfaces. This modular and scalable approach facilitated the design and development of new features while maintaining consistency throughout the design system.

 

The SOLUTION 💡

To address the challenges we faced in creating the MOB design system, We chose to implement Material Design as our foundational framework. This decision was influenced by the engineering team’s existing experience with the Material Design library, making it easier for them to adapt and integrate the components into our projects effectively.

While Material Design provided a solid foundation, we also modified and customized several components to better align with our organization’s branding and user needs. This approach ensured that the design system not only met our functional requirements but also reflected our unique identity, resulting in a user-friendly experience across all digital products.

 

Atoms 🧬

molecules 🦠

Organisms 🧫

Templates ⚙️

Documentation 📕

As a designer, I used to think that creating a design system was all about designing components and creating a shared library of visual assets for my team to use. However, I learned the hard way that without proper documentation, the design system becomes difficult to maintain, and the design process can quickly become chaotic.

Documentation is important in a design system because it helps to ensure consistency across different projects and teams. When everyone has access to the same documentation, it becomes easier to communicate ideas and collaborate effectively. This reduces the risk of misinterpretation, misunderstandings, and mistakes in the design process.

Furthermore, documentation helps to onboard new team members quickly and efficiently. When new designers or developers join the team, they can refer to the documentation to get up to speed on the design system, which reduces the amount of time and resources needed for training.

I’ve designed and created a documentation site using Bootstrap (which later we moved to Notion because it was easy to maintain)

 

 

project LEARNINGS

TAKEAWAYS 📋

Creating the MOB design system provided valuable insights that shaped my understanding of effective design practices and collaboration within teams.

• Collaboration is Key: Working closely with developers and stakeholders emphasized the necessity of cross-functional communication, ensuring that the design system was feasible and met the diverse needs of the organization.
• Modularity Enhances Flexibility: Adopting the Atomic Design methodology demonstrated how breaking down interfaces into smaller components fosters scalability and adaptability, making it easier to implement updates and new features.
• Comprehensive Documentation Matters: Developing thorough documentation for the design system proved essential for consistent application and understanding across the team, reinforcing best practices in design and implementation.
• Lasting Impact: The ongoing use of the design system as of 2024 underscores its effectiveness and the value of investing in a strong design foundation that supports future growth and innovation.

 

It’s quite common sign a NDA, or non-disclosure agreements, so I’m limited to show some part of the process or none in most cases. This apply to all my portfolio.