Back to list

#designsystem

#web

#Figma

ZetUI: A Design System for Streamlined SaaS Products

ZetUI: A Design System for Streamlined SaaS Products

ZetUI: A Design System for Streamlined SaaS Products

ZetUI: A Design System for Streamlined SaaS Products

ZetUI: A Design System for Streamlined SaaS Products

ZetUI: A Design System for Streamlined SaaS Products

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

A Design system isn’t a project. It’s a product serving products

ZetUI is a framework of guidelines, components and documents and documentation that ensures consistency and efficiency in creating user experiences.

Component Library

Component Library

Component Library

Pattern Library

Pattern Library

Pattern Library

Timeline

2021 - 2022

My Role

Lead Product Designer

Timeline

2021 - 2022

My Role

Lead Product Designer

Background

Background

The world of Software as a Service (SaaS) products is booming. There's a constant influx of new applications catering to various business needs, including contract lifecycle management, inventory management, and project management. Each SaaS product requires a user interface (UI) that's intuitive, efficient, and consistent across the platform.

The world of Software as a Service (SaaS) products is booming. There's a constant influx of new applications catering to various business needs, including contract lifecycle management, inventory management, and project management. Each SaaS product requires a user interface (UI) that's intuitive, efficient, and consistent across the platform.

Problem Statement

Problem Statement

1

Building a comprehensive design system

Identifying the core UI components, defining design guidelines, and ensuring accessibility across all products requires careful planning and execution.

1

Building a comprehensive design system

Identifying the core UI components, defining design guidelines, and ensuring accessibility across all products requires careful planning and execution.

1

Building a comprehensive design system

Identifying the core UI components, defining design guidelines, and ensuring accessibility across all products requires careful planning and execution.

2

Ensuring adoption by designers and developers

Encouraging all stakeholders to leverage the design system effectively requires clear documentation, training, and ongoing support.

2

Ensuring adoption by designers and developers

Encouraging all stakeholders to leverage the design system effectively requires clear documentation, training, and ongoing support.

2

Ensuring adoption by designers and developers

Encouraging all stakeholders to leverage the design system effectively requires clear documentation, training, and ongoing support.

3

Maintaining and evolving the design system

As Zetwerk's product offerings grow and user needs change, the design system must be adaptable and evolve to maintain its effectiveness.

3

Maintaining and evolving the design system

As Zetwerk's product offerings grow and user needs change, the design system must be adaptable and evolve to maintain its effectiveness.

3

Maintaining and evolving the design system

As Zetwerk's product offerings grow and user needs change, the design system must be adaptable and evolve to maintain its effectiveness.

Solutions

Solutions

1

Effortless Consistency

A unified design language and 45+ reusable UI components ensure a seamless user experience across all products.

1

Effortless Consistency

A unified design language and 45+ reusable UI components ensure a seamless user experience across all products.

1

Effortless Consistency

A unified design language and 45+ reusable UI components ensure a seamless user experience across all products.

2

Streamlined Workflow

Clear style guides, content guidance, and comprehensive documentation minimize development time and ensure brand consistency.

2

Streamlined Workflow

Clear style guides, content guidance, and comprehensive documentation minimize development time and ensure brand consistency.

2

Streamlined Workflow

Clear style guides, content guidance, and comprehensive documentation minimize development time and ensure brand consistency.

3

Future-Proof Scalability

Modular design and version control allow ZetUI to adapt and grow seamlessly as your product offerings expand.

3

Future-Proof Scalability

Modular design and version control allow ZetUI to adapt and grow seamlessly as your product offerings expand.

3

Future-Proof Scalability

Modular design and version control allow ZetUI to adapt and grow seamlessly as your product offerings expand.

Benefits

Benefits

Increased development efficiency

Reduced maintenance costs

Enhanced user experience across products

Scalable foundation for future growth

Key Features

Key Features

Component Library

Style Guide Lines

Content Guide Lines

Comprehensive Documentation

ZetUI Design System

A Journey to Streamlined Development

Building a Better System

Building a Better System

1

Identifying Needs

We began with an in-depth analysis of ZetUI's limitations. A dedicated 7-member team pinpointed pain points and areas for improvement.

1

Identifying Needs

We began with an in-depth analysis of ZetUI's limitations. A dedicated 7-member team pinpointed pain points and areas for improvement.

1

Identifying Needs

We began with an in-depth analysis of ZetUI's limitations. A dedicated 7-member team pinpointed pain points and areas for improvement.

2

Data-Driven Approach

Competitive analysis of industry leaders and a thorough examination of Zetwerk's product suite provided valuable insights into user needs.

2

Data-Driven Approach

Competitive analysis of industry leaders and a thorough examination of Zetwerk's product suite provided valuable insights into user needs.

2

Data-Driven Approach

Competitive analysis of industry leaders and a thorough examination of Zetwerk's product suite provided valuable insights into user needs.

3

Collaborative Innovation

This research fuelled the development of a comprehensive solution, resulting in the new and improved ZetUI.

3

Collaborative Innovation

This research fuelled the development of a comprehensive solution, resulting in the new and improved ZetUI.

3

Collaborative Innovation

This research fuelled the development of a comprehensive solution, resulting in the new and improved ZetUI.

There was two major problem i Figured out in the old system..

Executive Problems | Adoption Difficulties

What exactly they are?

What exactly they are?

1

Limited Adoption

- Immaturity: ZetUI's lack of development led to user frustration and hindered adoption. - Color Confusion: Inconsistent color palettes caused errors and design inconsistencies.

1

Limited Adoption

- Immaturity: ZetUI's lack of development led to user frustration and hindered adoption. - Color Confusion: Inconsistent color palettes caused errors and design inconsistencies.

1

Limited Adoption

- Immaturity: ZetUI's lack of development led to user frustration and hindered adoption. - Color Confusion: Inconsistent color palettes caused errors and design inconsistencies.

2

Inefficient Workflows

- Inflexible Menus: Rigid sidebar menus hampered navigation and user experience. - Tedious Data Tables: Cumbersome configurations for data tables wasted valuable development time. - Manual Labor: Poorly defined workflows led to unnecessary manual work, draining resources.

2

Inefficient Workflows

- Inflexible Menus: Rigid sidebar menus hampered navigation and user experience. - Tedious Data Tables: Cumbersome configurations for data tables wasted valuable development time. - Manual Labor: Poorly defined workflows led to unnecessary manual work, draining resources.

2

Inefficient Workflows

- Inflexible Menus: Rigid sidebar menus hampered navigation and user experience. - Tedious Data Tables: Cumbersome configurations for data tables wasted valuable development time. - Manual Labor: Poorly defined workflows led to unnecessary manual work, draining resources.

3

Handoff was a challenge!

- Disorganization: ZetUI lacked a clear structure, causing handoff challenges between design and development teams.

3

Handoff was a challenge!

- Disorganization: ZetUI lacked a clear structure, causing handoff challenges between design and development teams.

3

Handoff was a challenge!

- Disorganization: ZetUI lacked a clear structure, causing handoff challenges between design and development teams.

ZetUI: Reimagining the Design System

Our Vision

Our Vision

1

Seamless Synergy

Bridge the gap between design and development for a smooth collaboration workflow.

1

Seamless Synergy

Bridge the gap between design and development for a smooth collaboration workflow.

1

Seamless Synergy

Bridge the gap between design and development for a smooth collaboration workflow.

2

Comprehensive Components

Equip developers with a robust library of frequently used UI components.

2

Comprehensive Components

Equip developers with a robust library of frequently used UI components.

2

Comprehensive Components

Equip developers with a robust library of frequently used UI components.

3

Unified Experiences

Deliver consistent and intuitive user interfaces across all Zetwerk products.

3

Unified Experiences

Deliver consistent and intuitive user interfaces across all Zetwerk products.

3

Unified Experiences

Deliver consistent and intuitive user interfaces across all Zetwerk products.

4

Future-Proof Foundation

Build a scalable design system that adapts to evolving needs.

4

Future-Proof Foundation

Build a scalable design system that adapts to evolving needs.

4

Future-Proof Foundation

Build a scalable design system that adapts to evolving needs.

5

Modernized Aesthetics

Elevate the user experience with a refreshingly modern UI.

5

Modernized Aesthetics

Elevate the user experience with a refreshingly modern UI.

5

Modernized Aesthetics

Elevate the user experience with a refreshingly modern UI.

Here’s a few highlights on Patterns

Product Side Menu

View Prototype

View Prototype

View Prototype

Here’s a few highlights on Patterns

Page Header

View Figma File

View Figma File

View Figma File

Iterations

The Quest for Perfection

ZetUI didn’t just appear overnight. We went through countless iterations, sometimes feelings like we were on a design odyssey. Feedback flowed, revisions were made, and with each step, the system become stronger and more aligned with our goals.

Outcomes

ZetUI has transformd our design and development landscape. design-development friction has eased, replaced by streamlined collaboration. Our products now boast unmatched consistency, and we’va saved countless hours perviously lost to rework and misaligned sytles. we achived at least 90% of what we thought initially.

Library Published ✅

Storybook ✅

Documentation ✅

Testing ✅

Accessibility ✅

Consistency ✅

Versioning ✅

Templating ✅

Modern UI ✅

Interactions ✅

Responsiveness ✅

Scalability ✅

Conclusion

Conclusion

Challenge Overcome, System Improved 🥂

1

Convincing

First Challange was to convince the management for a new system. A solid pitch was required and i did that quite effectively ☺️

1

Convincing

First Challange was to convince the management for a new system. A solid pitch was required and i did that quite effectively ☺️

1

Convincing

First Challange was to convince the management for a new system. A solid pitch was required and i did that quite effectively ☺️

2

Clashed Timings

As this was in-house system, there was not external fundings. Our main projects (billable) were running along with it on priority, so getting extra time was a big challenge for us.

2

Clashed Timings

As this was in-house system, there was not external fundings. Our main projects (billable) were running along with it on priority, so getting extra time was a big challenge for us.

2

Clashed Timings

As this was in-house system, there was not external fundings. Our main projects (billable) were running along with it on priority, so getting extra time was a big challenge for us.

3

Decision Making

“A is much better than B” a very common argument amoung a team of team. we faced it a lot, but it was all worth it.

3

Decision Making

“A is much better than B” a very common argument amoung a team of team. we faced it a lot, but it was all worth it.

3

Decision Making

“A is much better than B” a very common argument amoung a team of team. we faced it a lot, but it was all worth it.

4

Responsiveness of system

Our products are accessible on all devises and achieving the same with our new system was a uphill battle, not from design end but from the development side.

4

Responsiveness of system

Our products are accessible on all devises and achieving the same with our new system was a uphill battle, not from design end but from the development side.

4

Responsiveness of system

Our products are accessible on all devises and achieving the same with our new system was a uphill battle, not from design end but from the development side.

We learned a lot ✌️

This journey taught us the importance of meticulous reseach, the power of iterative design, and the undeniable value of clear communication - particularly when explaining to developers why a 4pt system just looks better.

To wrap up, ZetUI is a game-changer for our organization. it empowers us to create consistent, efficient and memorable experiences while saving time and resources in the long term. we sincerely appreciate yours support and investment in this transformative initiative.

What could have been done better?

As a lead designer, I recognize potential areas for optimization:

- Involving developers even earlier: Closer collaboration from the first brainstorming session might have led to even greater efficiency gains downstream.
- Streamlined documentation: while comprehensive, finding specific information within our documentation could be made even easier.

There is always so much scope for improvements and we are no exception!

More projects

Zetsup Streamlines Supplier Onboarding

SaaS Product

Zetsup Streamlines Supplier Onboarding

SaaS Product

Zetsup Streamlines Supplier Onboarding

SaaS Product

Zetsup Streamlines Supplier Onboarding

SaaS Product

Zetsup Streamlines Supplier Onboarding

SaaS Product

Customer Portal for General Fabrication Business

SaaS Product

Customer Portal for General Fabrication Business

SaaS Product

Customer Portal for General Fabrication Business

SaaS Product

Customer Portal for General Fabrication Business

SaaS Product

Customer Portal for General Fabrication Business

SaaS Product

All projects