Menu
Menu
B2B Dashboard
B2B API Dashboard with a Design System
B2B API Dashboard with a Design System
B2B API Dashboard with a Design System
Meboka is an advanced B2B platform designed to streamline API lifecycle management, simplifying creation, collaboration, and deployment.
Meboka is an advanced B2B platform designed to streamline API lifecycle management, simplifying creation, collaboration, and deployment.
Industry
Industry
Digital Marketing & AI Solutions
Digital Marketing & AI Solutions
Role
Role
UX/UI Designer
UX/UI Designer
Project Timeline
Project Timeline
2023
2023
Tools
Tools
Figma, Axure, Azure
Figma, Axure, Azure
Introduction
Introduction
Introduction
Designing for consistency and scalability is critical in complex platforms, especially those used by developers to streamline API lifecycles. Meboka is an innovative API platform aimed at making API creation faster and collaboration more efficient. I led the UX design for this dashboard application, creating seamless experiences for desktop and tablet interfaces while solving significant design challenges.
Designing for consistency and scalability is critical in complex platforms, especially those used by developers to streamline API lifecycles. Meboka is an innovative API platform aimed at making API creation faster and collaboration more efficient. I led the UX design for this dashboard application, creating seamless experiences for desktop and tablet interfaces while solving significant design challenges.
Designing for consistency and scalability is critical in complex platforms, especially those used by developers to streamline API lifecycles. Meboka is an innovative API platform aimed at making API creation faster and collaboration more efficient. I led the UX design for this dashboard application, creating seamless experiences for desktop and tablet interfaces while solving significant design challenges.
Who I worked with?
Who I worked with?
Who I worked with?
Product Manager and Product Owner
3 Frontend Developers
Data Analyst and Tester
Product Manager and Product Owner
3 Frontend Developers
Data Analyst and Tester
Product Manager and Product Owner
3 Frontend Developers
Data Analyst and Tester
This project is a real-world project, where I developed and implemented a comprehensive design system to tackle inconsistency issues, reduce development rework, and improve overall product scalability. While business privacy restricts sharing all details, I’ll provide a detailed overview of the design process and outcomes.
This project is a real-world project, where I developed and implemented a comprehensive design system to tackle inconsistency issues, reduce development rework, and improve overall product scalability. While business privacy restricts sharing all details, I’ll provide a detailed overview of the design process and outcomes.
This project is a real-world project, where I developed and implemented a comprehensive design system to tackle inconsistency issues, reduce development rework, and improve overall product scalability. While business privacy restricts sharing all details, I’ll provide a detailed overview of the design process and outcomes.
50%
50%
50%
Improved Consistency
Improved Consistency
35%
35%
Increased Design Efficiency
Increased Design Efficiency
40%
40%
Reduced Development Rework
Reduced Development Rework
Problem Statement
Problem Statement
Problem Statement
Before the design system implementation, Meboka encountered significant challenges that hindered efficiency and consistency
Before the design system implementation, Meboka encountered significant challenges that hindered efficiency and consistency
Before the design system implementation, Meboka encountered significant challenges that hindered efficiency and consistency
Inconsistent UX/UI components
Inconsistent UX/UI components
Inconsistent UX/UI components
The platform lacked a centralized library for UI elements, leading to duplication of components and inconsistencies in layout, typography, spacing, and colors.
The platform lacked a centralized library for UI elements, leading to duplication of components and inconsistencies in layout, typography, spacing, and colors.
The platform lacked a centralized library for UI elements, leading to duplication of components and inconsistencies in layout, typography, spacing, and colors.
Time-consuming manual testing
Time-consuming manual testing
Time-consuming manual testing
After each development phase, I conducted extensive manual testing of components across multiple devices to ensure quality.
After each development phase, I conducted extensive manual testing of components across multiple devices to ensure quality.
After each development phase, I conducted extensive manual testing of components across multiple devices to ensure quality.
Scalability barriers
Scalability barriers
Scalability barriers
The lack of a structured system made it difficult to scale and maintain new features without introducing further inconsistencies.
The lack of a structured system made it difficult to scale and maintain new features without introducing further inconsistencies.
The lack of a structured system made it difficult to scale and maintain new features without introducing further inconsistencies.
Developer inefficiencies
Developer inefficiencies
Developer inefficiencies
Frontend developers faced challenges with redundant code, outdated components, and missing foundational guidelines, increasing development time and effort.
Frontend developers faced challenges with redundant code, outdated components, and missing foundational guidelines, increasing development time and effort.
Frontend developers faced challenges with redundant code, outdated components, and missing foundational guidelines, increasing development time and effort.
Frequent UX issues
Frequent UX issues
Frequent UX issues
Over each UX audit rounds, lots of issues were identified, with 91% stemming from the absence of a unified design system. Many of these were inconsistencies related to UI components, typography, and colors, which repeatedly surfaced across iterations.
Over each UX audit rounds, lots of issues were identified, with 91% stemming from the absence of a unified design system. Many of these were inconsistencies related to UI components, typography, and colors, which repeatedly surfaced across iterations.
Over each UX audit rounds, lots of issues were identified, As a result of unified design system. Many of these were inconsistencies related to UI components, typography, and colors, which repeatedly surfaced across iterations.
Recognizing these issues, I worked closely with the product manager to advocate for the development of a comprehensive design system. One key KPI we set was to improve design and UI consistency by 70%, ensuring a scalable and efficient design workflow moving forward.
Recognizing these issues, I worked closely with the product manager to advocate for the development of a comprehensive design system. One key KPI we set was to improve design and UI consistency by 70%, ensuring a scalable and efficient design workflow moving forward.
Solution
Solution
Solution
As the lead UX designer for this real-world project, I spearheaded the creation of a comprehensive design system to unify Meboka’s dashboard interface across desktop and tablet. The initiative aimed to:
Improve consistency across design and development.
Reduce development rework caused by inconsistencies.
Streamline collaboration between designers and developers, enhancing efficiency.
As the lead UX designer for this real-world project, I spearheaded the creation of a comprehensive design system to unify Meboka’s dashboard interface across desktop and tablet. The initiative aimed to:
Improve consistency across design and development.
Reduce development rework caused by inconsistencies.
Streamline collaboration between designers and developers, enhancing efficiency.
As the lead UX designer for this real-world project, I spearheaded the creation of a comprehensive design system to unify Meboka’s dashboard interface across desktop and tablet. The initiative aimed to:
Improve consistency across design and development.
Reduce development rework caused by inconsistencies.
Streamline collaboration between designers and developers, enhancing efficiency.
Process
Process
Process
Discovery: Insights from Frontend Developers & Design Team
Discovery: Insights from Frontend Developers & Design Team
Discovery: Insights from Frontend Developers & Design Team
To understand the root of the inconsistencies and inefficiencies, I conducted 1:1 interviews with four frontend developers, including the lead developer. Through these discussions, I identified these areas of concern:
To understand the root of the inconsistencies and inefficiencies, I conducted 1:1 interviews with four frontend developers, including the lead developer. Through these discussions, I identified these areas of concern:
To understand the root of the inconsistencies and inefficiencies, I conducted 1:1 interviews with four frontend developers, including the lead developer. Through these discussions, I identified these areas of concern:
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
UX Designer
fmohammadzadeh028@gmail.com
Let’s connect!
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
UX Designer
fmohammadzadeh028@gmail.com
Let’s connect!
© 2024. Designed by Fatemeh Mohammadzadeh
Ideation
Ideation
Ideation
As the sole designer in the team, I had to take a hands-on approach to ideating and planning the design system. Collaboration with stakeholders and developers was critical, so I organized sessions to gather insights and align priorities.
As the sole designer in the team, I had to take a hands-on approach to ideating and planning the design system. Collaboration with stakeholders and developers was critical, so I organized sessions to gather insights and align priorities.
As the sole designer in the team, I had to take a hands-on approach to ideating and planning the design system. Collaboration with stakeholders and developers was critical, so I organized sessions to gather insights and align priorities.
In a workshop with the Product Manager, Owner and Developers, we performed a gap analysis of existing design assets versus those we needed to add. Using an effort vs. impact matrix, we prioritized the elements to include in the design system:
In a workshop with the Product Manager, Owner and Developers, we performed a gap analysis of existing design assets versus those we needed to add. Using an effort vs. impact matrix, we prioritized the elements to include in the design system:
In a workshop with the Product Manager, Owner and Developers, we performed a gap analysis of existing design assets versus those we needed to add. Using an effort vs. impact matrix, we prioritized the elements to include in the design system:
Implementation Plan
Implementation Plan
Implementation Plan
Color tokens & Typography
Color tokens & Typography
Color tokens & Typography
I drew inspiration from the Material Design base system for defining the design system, as its use case closely aligned with ours.
I drew inspiration from the Material Design base system for defining the design system, as its use case closely aligned with ours.
I drew inspiration from the Material Design base system for defining the design system, as its use case closely aligned with ours.
Spacing
Spacing
Spacing
To establish a robust spacing system, I designated 8x as the primary spacing, 4x as the secondary, and 2x as the tertiary.
These configurations ensured scalable, responsive layouts while maintaining visual consistency. Additionally, I provided clear guidelines for inter-component spacing to streamline the design process across devices.
To establish a robust spacing system, I designated 8x as the primary spacing, 4x as the secondary, and 2x as the tertiary.
These configurations ensured scalable, responsive layouts while maintaining visual consistency. Additionally, I provided clear guidelines for inter-component spacing to streamline the design process across devices.
To establish a robust spacing system, I designated 8x as the primary spacing, 4x as the secondary, and 2x as the tertiary.
These configurations ensured scalable, responsive layouts while maintaining visual consistency. Additionally, I provided clear guidelines for inter-component spacing to streamline the design process across devices.
Iconography
Iconography
Iconography
Molecules
Molecules
Molecules
Organisms
Organisms
Organisms
Implementation
Implementation
Implementation
By working ahead of the development team and providing all resources proactively, we were able to work simultaneously without delays. This approach ensured that I was always available to address any questions or provide additional documentation as needed.
By working ahead of the development team and providing all resources proactively, we were able to work simultaneously without delays. This approach ensured that I was always available to address any questions or provide additional documentation as needed.
By working ahead of the development team and providing all resources proactively, we were able to work simultaneously without delays. This approach ensured that I was always available to address any questions or provide additional documentation as needed.
Result
Result
Result
The design system was implemented successfully, significantly improving consistency and reducing development time by streamlining reusable components. Post-implementation, regular feedback sessions ensured the system continued to meet the team’s needs and scaled effectively with new feature releases.
The design system was implemented successfully, significantly improving consistency and reducing development time by streamlining reusable components. Post-implementation, regular feedback sessions ensured the system continued to meet the team’s needs and scaled effectively with new feature releases.
The design system was implemented successfully, significantly improving consistency and reducing development time by streamlining reusable components. Post-implementation, regular feedback sessions ensured the system continued to meet the team’s needs and scaled effectively with new feature releases.
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
fmohammadzadeh028@gmail.com - User Experience Designer
Let’s connect !
© 2024. Designed by Fatemeh Mohammadzadeh
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
fmohammadzadeh028@gmail.com - User Experience Designer
Let’s connect !
© 2024. Designed by Fatemeh Mohammadzadeh
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
Connect to Content
Add layers or components to infinitely loop on your page.
fmohammadzadeh028@gmail.com - User Experience Designer
Let’s connect !
© 2024. Designed by Fatemeh Mohammadzadeh