Primitive colors

Introduction:

Designed Minds is a design community created and maintained by five designers-volunteers. Designers work asynchronously to design and maintain a website, and marketing materials to promote a design community. The designers also create and lead skill-building programs for community members.

PROBLEM:

SOLUTION:

The absence of a style guide and reusable components led to low team productivity and quick team burnout, as the designers worked after regular job hours. There was also confusion about where to look for design assets created by other members.

The team often had to recreate assets from scratch when creating content which led to inconsistent use of fonts and colors across multiple communication channels, such as website, LinkedIn, and email newsletter.

Foundations

Foundations is the visual language in its most simple form, representing the brand through color and typography. Foundations also define other aspects of the visual language, such as spacing, breakpoints and layout grids. I worked closely with the design team to craft a comprehensive visual design language, represented as tokens and Figma as styles.

COLOR

Crafted and documented the DM’s Design System, developing a detailed style guide and UI patterns using Figma enabling the team to design faster by utilizing premade UI components and elements. The design system streamlined design teamwork and created consistency across user interfaces while working asynchronously on the projects. It also decreased the time to ship by improving designers’ efficiency and allowed them to redesign a website in 3 days.

Surface colors

On-surface colors

Semantic colors

TYPOGRAPHY

Grid and Spacing

BRAND ASSETS

Logo

Icons

Illustrations

Tools: Figma, Illustrator, Miro

Accessibility table

Components

Components are a reflection of the brand, created using careful attention to visual balance and usability All attention was given to following accessibility factors during the design of each component.

Atoms

Atons are the smallest reduction of components, and can be used individually or mixed to build more complex components and patterns.

Buttons

Templates

Templates are the culmination of all elements of the Design System, foundations, brand, and components, coming together to allow design teams to kickstart projects. I worked collaboratively with the platform team to build website page templates.

Pages

Usability Testing

Users:

Volunteer designers working full-time jobs.

  • Pain points:

    • design after work and don't have a lot of time

    • creating new products requires multiple mocks to present different ideas but building mocks without pre-build components or style is time-consuming

    • creating marketing materials for community outreach without templates takes a lot of time

  • Needs:

    • automation and efficiency wherever possible

    • a streamlined process for creating marketing materials and style guide for website redesign

Method:

  • To test the design system, I asked designers to apply variables and styles in Figma to the products they were building and then scheduled a Q&A session to gather feedback.

Findings:

  • The naming of the variables was not intuitive and designers struggled to apply the correct style. I changed the names of the variables and added a description with an example.

  • Example: I used the names “on-surface” and “surface” for color variables. Additionally, I added screenshots of the style application to the website on the Squarespace platform for more clarity.

Design Decisions and Lessons Learned

Reflecting on this project, I was reminded of the invaluable role of user feedback in shaping successful designs. Initially, I struggled with naming the variables, especially creating components. Finding the language that speaks to the users of the design system (designers in this case) can be tricky. After several attempts and checking the best practices, I found a way to name and organize the components simply and effectively.

Additionally, I realized that simplicity is the key. I limited the typographic choices, created a clear type hierarchy, and changed the font to a more legible one aligned with the company’s brand identity. The result of these decisions was an elegant and effective website that followed the company’s branding guidelines.

Finally, I learned how important it is to understand the existing limitations. Knowing the platforms that products and services would utilize helped me document how the design system should be applied to those platforms that will empower designers to make changes to the website quickly and efficiently.

View More

  • User Admin App

    View

  • Onboarding Experience Redesign (Archived)

    View

  • Donation Experience Enhancement (Archived)

    View