Website Design system for SpotDraft

Modular, adaptable and scalable website design system for SpotDraft.

Modular, adaptable and scalable website design system for SpotDraft.

Visual Identity

Visual Identity

Visual Identity

Design System

Design System

Design System

UI Design

UI Design

UI Design

Web Design

Web Design

Web Design

Imagine a website with different font sizes, color pairings, inconsistent components and misaligned with company’s branding. SpotDraft faced a similar situation as multiple teams were developing pages in absence of well-defined guidelines.

Imagine a website with different font sizes, color pairings, inconsistent components and misaligned with company’s branding. SpotDraft faced a similar situation as multiple teams were developing pages in absence of well-defined guidelines.

Module design
Module design
Module design

For a scaling startup as SpotDraft, the brand website and associated marketing campaigns are the building blocks of brand recognition and credibility. Thus, it is imperative that a consistent visual expression is maintained for seamless user experience.

For a scaling startup as SpotDraft, the brand website and associated marketing campaigns are the building blocks of brand recognition and credibility. Thus, it is imperative that a consistent visual expression is maintained for seamless user experience.

Old website patterns
Old website patterns
Old website patterns

With multiple marketing initiatives, the number of asks for campaigns was increasing. But lack of design bandwidth made the teams to incline towards external agencies leading to disjointed components and UI patterns in the final output.

The goal was to manage design at scale, so we needed a set of standards as guiding light for both designers and developers to be consistent with output across all channels. By defining foundational tokens, components and UI patterns, we enabled faster design creation and eliminated unnecessary errors .

With multiple marketing initiatives, the number of asks for campaigns was increasing. But lack of design bandwidth made the teams to incline towards external agencies leading to inconsistent components, UI patterns and visuals in final output.

The goal was to manage design at scale, so we needed a set of standards as guiding light for both designers and developers to be consistent with output across all channels. I enabled faster design creation and eliminated unnecessary errors by defining foundational tokens, components and UI patterns.

Website grid system
Website grid system
Website grid system
Website typescale
Website typescale
Website typescale
Website typescale
Website spacing
Website spacing
Website spacing
Website spacing
Website component guidelines
Website component guidelines
Website component guidelines

We built up a design system with each component designed to solve a specific UI problem and work harmoniously as part of a greater whole.

We built up a design system with each component designed to solve a specific UI problem and work harmoniously as part of a greater whole.

Website component guidelines
Website component guidelines
Website component guidelines
Website component guidelines
Website component guidelines
Website component guidelines
Website component guidelines
Website component guidelines

We also defined a comprehensive set of UI patterns that are customizable—select and simple drag & drop layouts, eliminating the need for intricate design for recurring use cases.

We also defined a comprehensive set of UI patterns that are customizable—select and simple drag & drop layouts, eliminating the need for intricate design for recurring use cases.

Website design system
Website design system
Website design system
Website design system
Website design system
Website design system
Website design system
Website design system
Website design system
Website design system
Website design system

With the implementation of new website system, we enabled stakeholders with faster outputs and eliminated unnecessary errors with pre-defined guidelines for every use-case.

This also improved the performance of revamped product pages with an decrease in bounce rate from 56% to 38% and increase in CTR from 1.24% to 2.11% within the first week of going live.

This also improved the performance of revamped product pages with an decrease in bounce rate from 56% to 38% and increase in CTR from 1.24% to 2.11% within the first week of going live.

With the implementation of new website system, I enabled stakeholders with faster outputs and eliminated unnecessary errors with pre-defined guidelines for every use-case.

Website design system
Website design system
Website design system
Website design system
Website design system
Website design system

CRAFTING STRATEGIC, ELEVATED & USER - CENTRIC DESIGN FOR SCALING BUSINESSES

Have a project in mind? Let's make it happen.

ALL RIGHTS RESERVED 2025 © STUDIO BAUNO

CRAFTING STRATEGIC, ELEVATED & USER - CENTRIC DESIGN FOR SCALING BUSINESSES

Have a project in mind? Let's make it happen.

ALL RIGHTS RESERVED 2025 © STUDIO BAUNO

CRAFTING STRATEGIC, ELEVATED & USER - CENTRIC DESIGN FOR SCALING BUSINESSES

Have a project in mind? Let's make it happen.

ALL RIGHTS RESERVED 2025 © STUDIO BAUNO

CRAFTING STRATEGIC, ELEVATED & USER - CENTRIC DESIGN FOR SCALING BUSINESSES

Have a project in mind? Let's make it happen.

ALL RIGHTS RESERVED 2025 © STUDIO BAUNO