• curious thing

  • curious thing

  • design system

  • design system

KEY RESPONSIBILTIES

  • Research and understand design system

  • Create a scalable design system

MY ROLE

UX/UI Designer

LENGTH

4 weeks

STAKEHOLDERS

Product Designer

Software Engineer

  • curious thing

  • curious thing

  • design system

  • design system

KEY RESPONSIBILTIES

  • Research and understand design system

  • Create a scalable design system

MY ROLE

UX/UI Designer

LENGTH

4 weeks

STAKEHOLDERS

Product Designer

Software Engineer

  • curious thing

  • curious thing

  • design system

  • design system

KEY RESPONSIBILTIES

  • Research and understand design system

  • Create a scalable design system

MY ROLE

UX/UI Designer

LENGTH

4 weeks

STAKEHOLDERS

Product Designer

Software Engineer

BACKGROUND

BACKGROUND

I joined Curious Thing as a UX/UI Designer a year and a half ago, when the team comprised only two designers. Being part of a small team required me to handle various design tasks, from marketing materials to UI/UX aspects.

A standout project for me was developing a design system for Curious Thing. As the sole designer on the project, I led the entire process with support from other team members. Our aim was to enhance Curious Thing's brand scalability and consistency by creating a cohesive UI system for the platform.

WHY DO WE NEED A DESIGN SYSTEM?

WHY DO WE NEED A DESIGN SYSTEM?

Upon joining Curious Thing as a UX/UI Designer, I noticed we used Sketch for design-to-development, but lacked a crucial component: a unified design system. Our existing system was fragmented, inconsistent, and lacked documentation.

This led to inefficiencies and inconsistencies across teams. By creating a solid design system, we improved workflow and product cohesion.

SOLUTION BREAKDOWN

SOLUTION BREAKDOWN

SOLUTION BREAKDOWN

UNDERSTANDING & RESEARCH

UNDERSTANDING
& RESEARCH

UNDERSTANDING
& RESEARCH

WHAT ARE OUR GOALS?

After getting approval from our senior product designer and CTO for my idea, I set some goals for myself to improve our product development process, including:

Align Making it easier for our teams to work together by providing a clear and structured approach to building products.

Align Making it easier for our teams to work together by providing a clear and structured approach to building products.

Efficiency Speeding up our design and development process by providing pre-made tools and templates that help teams create and test designs faster.

Efficiency Speeding up our design and development process by providing pre-made tools and templates that help teams create and test designs faster.

Scalable Creating a system that new designers can easily understand and use.

Scalable Creating a system that new designers can easily understand and use.

GATHERING INSIGHTS

Before I began working on the design system, I studied design systems such as Material Design, Carbon Design System, and Ant Design. I found that these popular systems share several key features:

Flexibility - These systems are made up of interchangeable parts that can be combined in different ways to meet the needs of users on different platforms.

Detailed documentation - Documentation is critical for a large company like Google to maintain consistency and help new employees understand the design process.

Accessibility - To create inclusive experiences for millions of users, we must consider the needs of people with visual, auditory, and motor disabilities, among others.

GATHERING INSIGHTS

Before I began working on the design system, I studied design systems such as Material Design, Carbon Design System, and Ant Design. I found that these popular systems share several key features:

Flexibility - These systems are made up of interchangeable parts that can be combined in different ways to meet the needs of users on different platforms.

Detailed documentation - Documentation is critical for a large company like Google to maintain consistency and help new employees understand the design process.

Accessibility - To create inclusive experiences for millions of users, we must consider the needs of people with visual, auditory, and motor disabilities, among others.

HOW TO BUILD IT?

HOW TO BUILD IT?

I discovered that the Atomic Design method is the most effective way to organise a design system. This approach emphasises the design elements and how they work together to create interfaces, and it promotes consistency and scalability within the system. We use this method to categorise our components into five groups: Atoms, Molecules, Organisms, Templates, and Pages.

TIME TO BUILD

TIME TO BUILD

As we're following the Atomic Design approach, I began creating the smallest units - atoms - that will serve as the building blocks for our design system. These include typography, colours, and icons.

THE FUTURE

THE FUTURE

Our design system is constantly evolving as we iterate, learn and make changes. At the moment, we have a solid foundation of basic components that have improved our team's efficiency, consistency and standardisation.

Our next steps involve expanding our component library with more advanced components, including brand elements, illustrations, and animations. We're also developing processes and best practices to ensure that our documentation stays up-to-date and remains in sync with both design and code.

TAKEAWAY FOR THIS PROJECT

It's a large project, and we've only just started! Moving forward, constructing pages, testing, and prototyping will be more manageable and efficient. Here are some important insights I've gained throughout this undertaking:

Adapt the Design System to meet your needs

When you have a limited time and budget, be selective about what you include in the design system. Keep your team informed and updated throughout the design process.

Design is an ongoing process

Designing involves making continuous improvements. Keep refining your Design System to make it more efficient and effective.

Take a step back

While working on the components, I got too focused on the details and followed popular design systems, which ended up wasting time creating things that may not even be useful. It's important to zoom out and see the bigger picture to avoid this mistake.

Adapt the Design System to meet your needs

When you have a limited time and budget, be selective about what you include in the design system. Keep your team informed and updated throughout the design process.

Design is an ongoing process

Designing involves making continuous improvements. Keep refining your Design System to make it more efficient and effective.

Take a step back

While working on the components, I got too focused on the details and followed popular design systems, which ended up wasting time creating things that may not even be useful. It's important to zoom out and see the bigger picture to avoid this mistake.

TAKEAWAY FOR THIS PROJECT

It's a large project, and we've only just started! Moving forward, constructing pages, testing, and prototyping will be more manageable and efficient. Here are some important insights I've gained throughout this undertaking:

Adapt the Design System to meet your needs

When you have a limited time and budget, be selective about what you include in the design system. Keep your team informed and updated throughout the design process.

Design is an ongoing process

Designing involves making continuous improvements. Keep refining your Design System to make it more efficient and effective.

Take a step back

While working on the components, I got too focused on the details and followed popular design systems, which ended up wasting time creating things that may not even be useful. It's important to zoom out and see the bigger picture to avoid this mistake.

Adapt the Design System to meet your needs

When you have a limited time and budget, be selective about what you include in the design system. Keep your team informed and updated throughout the design process.

Design is an ongoing process

Designing involves making continuous improvements. Keep refining your Design System to make it more efficient and effective.

Take a step back

While working on the components, I got too focused on the details and followed popular design systems, which ended up wasting time creating things that may not even be useful. It's important to zoom out and see the bigger picture to avoid this mistake.

Adapt the Design System to meet your needs

When you have a limited time and budget, be selective about what you include in the design system. Keep your team informed and updated throughout the design process.

Design is an ongoing process

Designing involves making continuous improvements. Keep refining your Design System to make it more efficient and effective.

Take a step back

While working on the components, I got too focused on the details and followed popular design systems, which ended up wasting time creating things that may not even be useful. It's important to zoom out and see the bigger picture to avoid this mistake.

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM