Portfolio

2023

01 Nov, 2023

Creating Comprehensive Documentation

We identified the need to restructure and redefine our documentation to support new tokens and component documentation within our expanding design systems. 🌐

🔍 Research Methodology

To understand the documentation needs, we conducted:

Surveys and Interviews: Engaged with designers, developers, and stakeholders to gather insights on documentation requirements and pain points.
Workflow Analysis: Evaluated existing processes to identify areas where documentation could improve efficiency.
Benchmarking: Reviewed documentation practices from leading companies to identify best practices. 📊

📃 Pain Points Identification

The key challenges identified were:

Inconsistent Design Implementations: Lack of clear guidelines led to variations in design implementation across projects.
Collaboration Barriers: Miscommunication between designers and developers due to the absence of standardized documentation.
Onboarding Difficulties: New team members faced a steep learning curve due to insufficient documentation.
Maintenance Challenges: Keeping design systems up-to-date was time-consuming without a centralized documentation hub. 🛠️

🧩 Solution Implementation

Tools and Technologies:

Figma: Used for creating and managing design assets and components. 🎨
Markdown and GitHub: Utilized for writing and versioning the documentation. 📄
Storybook: Integrated for interactive component documentation. 📘
Documentation website: A centralized knowledge base for organizing and accessing documentation. 📋

🔄 Process Overview:

Establish Documentation Structure: Defined a clear and intuitive structure for the documentation, including sections for design principles, component guidelines, usage examples, and code snippets. 🗂️
Collaborative Writing: Engaged cross-functional teams to contribute to the documentation, ensuring comprehensive coverage of all aspects of the design system. ✍️
Interactive Examples: Incorporated interactive examples and live code snippets using Storybook to make the documentation more engaging and practical. 🖥️
Regular Updates: Established a process for regular reviews and updates to keep the documentation current and relevant. 🔄
Accessibility and Searchability: Ensured the documentation was easily accessible and searchable, enabling quick reference and usage. 🔍

🎯Results and Impact

The implementation of comprehensive documentation resulted in the following:

Enhanced Consistency: Improved consistency in design implementation across projects and platforms. 🎯
Streamlined Collaboration: Better communication and collaboration between designers and developers, reducing misunderstandings and rework. 🤝
Efficient Onboarding: Reduced onboarding time for new team members by providing clear and structured documentation. 🚀
Easier Maintenance: Simplified the process of updating design systems and components, ensuring they remain up-to-date. 🛠️

📊 Conclusion and Recommendations

Creating comprehensive documentation for our design systems improved design consistency, collaboration, and efficiency. It is recommended for organizations facing similar challenges to invest in detailed and accessible documentation to support their design and development teams. 📊

04 Jul, 2023

Streamlining Figma Libraries

Experiencing rapid team growth, we recognize the importance of efficiently managing Figma Libraries. These libraries form the core of the daily operations for our design team, which includes 15+ Product Designers. The team's extensive weekly use of thousands of components underscores the need for meticulous organization and maintenance of these libraries.

🚀 Challenge

The primary challenge was keeping the Figma Libraries clean, well-organized, and accessible. Initially, all components were housed in a single file, leading to accidental deletions, overrides, and misalignments. Additionally, the team grappled with decisions on component usage and sharing and managing components not intended for development.

🔑 Solution

Our strategy involved a bifurcated approach:

1. Splitting Components into Base and Pattern:

Base Components: Generic components developed and used in production, including UI kit elements and workflow-enhancing tools 🧰.
Pattern Components: Figma-specific templates and organisms designed to optimize Product Designers' workflows. Design teams individually manage these components 🛠️.

2. Structured File Organization:

Our Figma Design System files were reorganized into three categories:

Foundations 🎨
Base Components 📂
Pattern Components 🗄️

🏆 Outcome

This revamped structure led to significant enhancements in managing and utilizing Figma Libraries, evidenced by:

Clearer component ownership and responsibility 🛂.
Improved efficiency in locating and using components 🔍.
Facilitation of modular component creation, reducing design and technical debts 💡.
Continuous innovation and updates in the Playground file 🎨.

📚 Key Learnings

Key insights from this project include:

Clear Guidelines and Ownership: Establishing explicit permissions and ownership from the outset is essential, particularly for teams expecting growth 📋.
Library, Goal: Keeping separate libraries for distinct objectives helps maintain workflow efficiency and clarity 🎯.
Inclusive Collaboration: Engaging all relevant teams in synchronization efforts ensures smooth updates and uniformity 🤝.
Strategic Deprecation of Components: A thoughtful approach to component deprecation, based on usage frequency, helps maintain design integrity and user trust 🔄.

19 Mar, 2023

Shipping iOS and Android Color Tokens: A Seamless Cross-Platform Experience

In today's fragmented digital landscape, ensuring consistency across different platforms is more crucial than ever. Recognizing this, our team took on the challenge of shipping color tokens for iOS and Android platforms. 🚀

🎨 What Are Color Tokens?

For those unfamiliar, color tokens are named entities that store color values. Rather than using direct color codes in design and code, these tokens act as references, ensuring consistency and easing future updates. 🔗

🔄 The Process:

Here's how we went about it:

Defining the Palette 🌈: Our journey began with meticulously selecting a color palette that resonated with our brand's identity and values.

Integration with Tokens Studio for Figma 🎨: Using Tokens Studio, we were able to efficiently define, name, and categorize our color choices. The robust naming convention based on categories, properties, variants, and modifiers made it a breeze to manage these tokens.

Export & Integration 📤📥: With our color tokens defined, they were exported as JSON files. These files were then pushed to our mono repo, ensuring that developers, irrespective of platform, had access to the same color values.

Implementation 🔧: On the development end, these JSON files were used to generate platform-specific resources. For iOS, this meant generating color sets for use in Xcode, while for Android, XML color resources were created.

🌟 The Outcome:

Shipping color tokens for both platforms had multiple benefits:

Consistency Across Platforms 🌍: With iOS and Android utilizing the same color tokens, we ensured a uniform visual experience for our users, irrespective of their device.

Efficient Updates ⚙️: Any future changes to our color palette would now require an update in just one place - the token. This change would cascade to both platforms, saving time and eliminating discrepancies.

Empowered Developers 💪: With a centralized color system, developers could focus on building functionalities without being bogged down by design inconsistencies.

Shipping color tokens for iOS and Android has laid a strong foundation for a harmonious cross-platform user experience. It's a testament to our commitment to delivering the best to our users, irrespective of the platform they're on. 🎉🌐

01 Mar, 2023

Implementing Design Tokens in Components for Microfrontend Architecture

In the evolving web development landscape, Microfrontends bring modularity and scalability to the forefront. Merging this with the power of design tokens, we've crafted a systematic approach that ensures consistency, efficiency, and reliability. Here's how we seamlessly integrated design tokens into our components:

1. Design in Figma 🎨:

Every good component begins as a design. We crafted the visuals using Figma, ensuring they align with our brand and user experience guidelines.

2. Extraction of Tokens ➡️📄:

Once designs were solidified, we extracted design tokens as JSON files. This step is vital, as these tokens are the single source of truth for our design values across platforms.

3. Generate CSS Variables with Style Dictionaries 📚:

We used style dictionaries to generate CSS variable outputs when transitioning from design to code. These outputs were specifically tailored for React components, ensuring that our design values were faithfully represented in code.

4. Test & Render in Storybook UI 📖:

Before deployment, it's crucial to see components in action. Using Storybook UI, we tested and rendered our components, ensuring they looked and functioned as intended. This environment provided a sandbox to visualize components in isolation, helping us quickly catch and rectify any discrepancies.

The Outcome 🌟:

By integrating design tokens in our Microfrontend components, we've reaped several benefits:

Time Efficiency ⏳: No more back-and-forth between design and development teams, as both have a clear reference point.

Error Reduction ✅: A centralized system minimizes inconsistencies and discrepancies.

Rapid Testing 🔍: Storybook UI allows us to visualize and test our components in real-time.

Consistent Branding 💡: Design tokens ensure our brand's visual identity remains consistent across all components and platforms.

In conclusion, by combining the modular nature of Microfrontends with the consistency of design tokens, we've fortified our web development process, ensuring a cohesive and efficient workflow.

24 Feb, 2023

Streamlining Icon Management

We faced challenges maintaining a consistent and efficient workflow for its icon designs across multiple platforms. The traditional process was manual, error-prone, and time-consuming. To address these challenges, We explored a solution that leverages Figma for design, GitHub for version control and collaboration, and SVGO for optimization.

Demo: https://github.com/shahcbs/figma-icon-sync

🔍 Research Methodology

We conducted internal interviews and workflow analyses to identify inefficiencies in the current process. They focused on the lifecycle of an icon from design to deployment and identified critical areas for improvement.

📃 Pain Points Identification

Challenges identified in our workflow included:

Inconsistency Across Platforms: Difficulty in ensuring icons looked consistent across Web, iOS, and Android.
Manual Processes: Time-consuming manual steps in preparing and deploying icons.
Performance Issues: Unoptimized icons contribute to slower load times.
Collaboration Bottlenecks: Inefficient collaboration between designers, developers, and operations teams.

🧩 Solution Implementation

Tools and Technologies We used:

Figma: Used for icon design and to ensure a consistent design language.
GitHub: Served as the central repository for storing and versioning icons.
SVGO: Used to optimize SVG icons for performance improvements.

🔄 Process Overview

Icon Design in Figma: Designers create and update icons in Figma.
Automated Fetch to GitHub: A script automatically fetches new or updated icons from Figma and syncs them to a designated GitHub repository.
Optimization with SVGO: Icons in the repository are automatically optimized using SVGO to reduce file sizes without compromising quality.
Deployment to Platforms: Optimized icons are made available for web, iOS, and Android through automated scripts that format them according to platform-specific requirements.

🎯 Results and Impact

After implementing this integrated workflow, Iconify observed:

Reduced Manual Effort: ~50% reduction in time spent on manual tasks related to icon management.
Improved Performance: average ~40% reduction in icon file sizes, leading to faster loading times.
Enhanced Consistency: Achieved near-perfect consistency of icons across all platforms.
Better Collaboration: Streamlined processes improved collaboration across design, development, and operations teams.

📊 Conclusion and Recommendations

Figma, GitHub, and SVGO integration into their icon design and deployment workflow has proven highly effective. This approach is recommended for organizations looking to improve efficiency, consistency, and Performance in managing digital assets across multiple platforms.

2022

16 Dec, 2022

Crafted a Design Token System

This case study explores the implementation of design tokens to tackle challenges in design consistency across multiple platforms. Key findings show significant improvements in design efficiency, cross-platform consistency, and team collaboration.

We faced challenges in maintaining a coherent design language across web, tvOS, iOS, Android, GoogleTV, FireTV, and Roku platforms, so we initiated a project to explore the effectiveness of design tokens in streamlining their design and development processes.

Demo: https://github.com/shahcbs/ds-tokens-banana

🔎 Research Methodology

We conducted internal surveys and interviews with designers and developers, focusing on pain points in the existing workflow. We analyzed feedback and collected data on time spent on design-related tasks and the frequency of design-related bugs.

📃 Pain Points Identification

Key challenges identified were:

Inconsistency Across Platforms: Maintaining a unified look and feel across different platforms is difficult.
Scalability Issues: Challenges in scaling the design system with the growing product.
Collaboration Hurdles: Frequent miscommunications between designers and developers.
Hard-Coded Design Elements: Inefficiencies due to the use of hard-coded design values.

Consistency is the key to creating products that resonate with users. Yet, maintaining that consistency, especially across multiple platforms, can be challenging. To address this, we embarked on a journey to establish a design token system that would define the visual style of our products through decision values. Design tokens were introduced as a scalable set of variables (like colors, typography, spacing etc.) stored in a JSON format, facilitating consistency and easier management of design systems.

1. Colors 🌈:

Colors play a pivotal role in setting the mood and tone of any design. Our token system ensures that every shade, tint, and hue aligns with our brand's ethos and vision.

2. Typography✏️:

Typography, more than just the choice of fonts, influences how content is perceived. By standardizing this, we've ensured uniformity in message delivery, regardless of the medium.

3. Spacing📐:

Adequate spacing can make or break a design. We achieved a balanced, harmonious layout throughout our interfaces by defining specific spacing values.

4. Sizing🏗️:

Whether it's the size of buttons, icons, or other elements, getting it right is crucial for user experience. Our token system ensures that every element is sized proportionally, enhancing usability.

💡 The Solution

Tools and Technologies

We used Figma for design creation, with a Figma Token Plugin to extract design tokens in JSON. These tokens were then converted into platform-specific styles using Style Dictionary.

1. Intentional Style Crafting 🖌️:

With the assistance of the Figma token plugin, we didn't just create styles; we sculpted them. Every design choice was made intentionally and precisely, ensuring alignment with our brand's ethos.

2. Systematic Token Naming 🏷️:

Our token naming strategy was logical and structured (C=Category, T=Type, I=Item), relying on clear categories, properties, variants, and modifiers. This systematic approach made tokens easily identifiable, usable, and modifiable, streamlining the design-to-development handoff.

3. Seamless Export and Integration 🔄:

After refining our styles to perfection, the export process was a breeze. Styles were effortlessly converted into JSON files, then integrated into our mono repo. This ensured that our design values were readily available for developers, bridging the gap between design ideation and code implementation.

🧑‍💻 Implementation of Design Tokens

The implementation involved:

Integration: Transforming design tokens to web, iOS, and Android native styles.
Overcoming Challenges: Addressing initial resistance and learning curve.
Improved Collaboration: Enhanced designer-developer collaboration due to clearer communication.

🎯 Results

The results speak for themselves:

Implementing design tokens led to improved design consistency and team collaboration.
Our workflow has seen a marked improvement in efficiency. No more second-guessing design choices or discrepancies across platforms.
We've established a consistent and reusable system, ensuring our products look and feel top-notch, regardless of where they're accessed.

By embracing a design token system, we've refined our design process and taken a giant leap toward creating products that truly resonate with our audience.

30 Nov, 2022

Streamlining a Design System

Automation is the key to efficiency and consistency in scalable and modular design. Recognizing the potential of streamlining our design-to-development workflow, our team, alongside our talented front-end developer, embarked on building a comprehensive Design System (DS) repository on GitHub with integrated automation.

🔄 The Process

1. Figma Design Creation 🎨:

Our journey started in Figma, where design components were meticulously crafted, ensuring they captured our brand's essence while being functional.

2. Token Extraction & Style Asset Generation 🗂️:

Once the designs were finalized, the magic of automation began. Using the power of Style Dictionary, we extracted design tokens and generated essential

style assets seamlessly.

3. React Component Creation ⚛️:

With style assets in hand, the focus shifted to development. React components were created, encapsulating the design principles and ensuring reusability across projects.

4. Storybook Rendering & Mono Repo Integration 📚:

Before being merged into the main codebase, every component was rendered using Storybook. This step ensured visual consistency and functionality. Additionally, integrating with a mono repo setup allowed for streamlined management of our components, enhancing collaboration.

5. Unit and Regression Testing 🔍:

They underwent rigorous unit and regression tests to ensure our components' robustness and reliability. This pivotal step ensured that new additions or modifications did not inadvertently break existing functionalities.

6. Automated NPM Publishing 📦:

The final step involved automation tools pushing our components as packages to NPM, ensuring that other teams and projects could easily incorporate and benefit from our design system.

🌟 The Advantages

Consistency Across Boards 🔄: With design tokens and automated pipelines, we've eliminated manual errors and ensured uniformity in design and code.

Simplified Management 📋: The mono repo structure, combined with automation, means less manual oversight and more efficient component management.

Efficient Updates 🔧: Changes or updates can be rolled out swiftly, ensuring that every application or website using our DS is always up-to-date.

Enhanced Testing Process 🔍: With Storybook integration, real-time visualization and testing became a breeze, ensuring quality at every step.

In conclusion, Our automated DS GitHub repository is a beacon for efficiency, consistency, and collaboration in the modern design and development landscape.

05 Oct, 2022

Introducing a New Jira Process for Streamlined DS Management

In the ever-evolving design world, it's crucial to have a structured and efficient system for managing the intake of new component designs. Recognizing the need for a more streamlined and comprehensive approach, we embarked on the journey to overhaul our Design System (DS) management strategy.

The New Strategy Model: A Holistic Approach 🌐

We aimed to create a framework to ensure clarity, consistency, and efficient decision-making. To achieve this, we rolled out a new strategy model encompassing the following key aspects:

1. Process-Driven Intake 📝:

We've established a process-driven intake system. This ensures that every new component design follows a standardized path, from submission to review, ensuring consistency and traceability.

2. Clear Protocols for Designers ✏️:

Our new model establishes clear protocols for feature designers. We've eliminated ambiguities by setting specific guidelines and expectations, ensuring that designers clearly understand the intake criteria, quality standards, and submission process.

3. Decision-Making Framework 🧭:

One of the most critical aspects of our new strategy is the robust decision-making framework. This provides a structured approach for evaluating, approving, or rejecting new component designs. It ensures that every decision aligns with our brand's vision, the DS's objectives, and usability standards.

4. Collaboration and Feedback Loop 🔁:

Our new process encourages feedback at every stage to foster collaboration and continuous improvement. Designers can receive constructive feedback, allowing them to refine and improve their submissions, leading to a more cohesive and high-quality DS.

5. Comprehensive Documentation 📚:

Every process, protocol, and decision-making criterion is meticulously documented. This serves as a reference for current team members and eases the onboarding process for new designers, ensuring everyone is on the same page.

The Outcome 🌟

Our new Jira process has revolutionized DS management. By providing clarity, structure, and a collaborative environment, we've seen a significant improvement in the quality of component designs, the efficiency of the intake process, and overall team synergy.

In conclusion, by marrying structured processes with the power of Jira, we've laid down a robust foundation for DS management that promises consistent quality, efficiency, and collaborative growth.

03 Aug, 2022

Establishing a Design Systems Team: Laying the Foundation for Success

A robust team that brings together many skills, expertise, and perspectives is the cornerstone of any successful project. Recognizing the critical role a cohesive team plays in developing a design system, I collaborated with my lead product designer to establish a dedicated Design Systems team.

Team Composition: Synergy in Diversity 🌐

Manager 🖌️: The visionary who sets the direction, ensures alignment with brand values and drives the overall aesthetic and functional design choices.
Design Systems Designer 🎨: Specializing in design systems, this role ensures the consistency, scalability, and repeatability of design components and patterns across the ecosystem. They focus on creating a cohesive user experience, bridging the gap between individual product designs and a unified design language.
Engineering 🛠️: The backbone that transforms design concepts into tangible and functional components, ensuring scalability, performance, and seamless integration.
Product Management (PM) 📋: The strategist who ensures the design system aligns with business goals, user needs, and market demands. They also play a pivotal role in setting priorities and managing resources.

The Collaborative Approach: Mapping the Journey 🗺️

With the team in place, our next step was to chart out our course of action. This involved:

Project Planning 📆: Working hand in hand, we crafted a comprehensive project plan. This served as our roadmap, detailing our journey from ideation to implementation.
Setting Milestones ⏳: We established clear milestones by breaking down the development process into manageable chunks. These acted as checkpoints, ensuring we remained on track and achieved our objectives promptly.
Defining Deliverables for Each Phase 📦: Specific deliverables were outlined for every phase of the design system development. This clarity ensured that every team member was aligned regarding expectations and outcomes.
Continuous Review and Feedback 🔍: Integral to our process was a continuous feedback loop. Regular reviews ensured we aligned with our goals, made necessary adjustments, and consistently delivered top-notch results.

The Outcome 🌟

By establishing a dedicated Design Systems team, we laid a solid foundation for the successful development of our design system. The synergy between design, engineering, and product management ensured a holistic approach, balancing aesthetics with functionality and business objectives.

In essence, this collaborative endeavor promises a design system that resonates with our brand's ethos and is scalable, user-centric, and aligned with market needs. It stands as a testament to the power of teamwork and shared vision.