Skip to content

Commit

Permalink
Updated designkit page
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonmelgoza committed Jun 9, 2024
1 parent 3e8af3e commit e0d203c
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 10 deletions.
Binary file added public/images/rs-optima-full.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/rs-optima-thumb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/pages/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ Recently at SecureDocs Inc. as a member of a cross-functional team dedicated to
description="How we boosted our E-Sign adoption by 552%"
/%}
{% item
heading="Building a Design System"
heading="Developing a Design System"
href="projects/building-designkit"
description="How I helped improve velocity and efficiency"
/%}
Expand Down
54 changes: 45 additions & 9 deletions src/pages/projects/building-designkit.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Building a Design System
title: Developing a Design System
---

{% block %}

{% articleHeader subheading="Case Study" title="Building a Design System" /%}
{% articleHeader subheading="Case Study" title="Developing a Design System" /%}

{% gallery className="hero-gallery" caption="The Design Kit landing page." %}
{% galleryItem
Expand All @@ -17,30 +17,66 @@ title: Building a Design System
/%}
{% /gallery %}

While working at RightScale, a rapidly-growing cloud management company, we realized the importance of optimizing our processes and establishing a centralized resource for product design. This was necessary due to the independent project work being carried out by numerous teams.
During my time at RightScale, what was a rapidly-growing cloud management startup out of Santa Barbara California, I encountered the need to streamline our design processes. With numerous independent projects being undertaken by various teams, the absence of a centralized design resource became apparent. It was crucial to optimize our workflows and ensure a consistent user experience across all of our products.

What initially began as a shared color palette in a Sketch file evolved into a comprehensive design system known as "Design Kit." This system encompassed branding assets, color guidelines, an extensive library of icons, and a selection of UX patterns.
{% /block %}
{% block %}

Alongside the style guide, I designed and developed component-specific markup and styling documentation, similar to Storybook. These easily shared pages became invaluable reference tools for front-end developers.
## Solution: The Birth of the "Design Kit”

{% /block %}
What started as a shared color palette in a Sketch file gradually evolved into a robust and comprehensive design system, aptly named "Design Kit." This design system included:

{% block %}
- **Branding Assets**: Ensuring consistency in our brand representation.
- **Color Guidelines**: A cohesive color scheme that was adhered to across all projects.
- **Extensive Icon Library**: A unified collection of icons for consistent use.
- **UX Patterns**: A selection of user experience patterns to maintain uniformity.

{% gallery
caption="The Design Kit color scales page." %}
{% galleryItem
alt="Design Kit color page"
caption="The Design Kit color scales page."
className="designkit-colors"
original="/images/designkit-colors-full.png"
thumbnail="/images/designkit-colors-thumb.png"
width="1752"
height="1023"
/%}
{% /gallery %}

The process of creating and sharing this design system was a valuable learning experience for me, and it ultimately paved the way for my future endeavors. In 2019, RightScale was acquired, bringing my adventure at the company to a close.
{% /block %}
{% block %}

## Implementation and Impact

In addition to the style guide, I designed and developed detailed component-specific markup and styling documentation, similar to Storybook. These documents were crafted to be easily shareable and served as invaluable reference tools for our front-end developers. The documentation facilitated better communication between designers and developers, significantly improving our development efficiency and product quality.

{% /block %}
{% block %}

## Learning and Outcome

The process of creating and sharing "Design Kit" was a significant learning experience. It honed my skills in system thinking, collaboration, and documentation. The success of this project not only enhanced our design consistency at RightScale but also laid a solid foundation for my future endeavors in design systems.

{% gallery
caption="A RightScale dashboard application" %}
{% galleryItem
alt="A RightScale dashboard application"
caption="A RightScale dashboard application."
original="/images/rs-optima-full.png"
thumbnail="/images/rs-optima-thumb.png"
width="1774"
height="1087"
/%}
{% /gallery %}

{% /block %}
{% block %}

## Conclusion

In 2019, RightScale was acquired, marking the end of my journey with the company. The "Design Kit" project stands out as one of my most significant learning experiences and highlights the critical importance of centralized design resources within rapidly growing tech organizations. This project also provided me with the invaluable opportunity to collaborate with colleagues across different teams, fostering relationships and teamwork that I might not have otherwise experienced. The insights and skills I gained through this process have been instrumental in shaping my approach to design and collaboration in future projects.



{% callout %}

Expand Down

0 comments on commit e0d203c

Please sign in to comment.