Shuddle is a fictional transport network created for the course "Scaling Design Systems with Dan Mall" that offers people fast and comfortable cruises and travel from world to world within our galaxy.

Shuddle needed a Design System restructure and re-design that could help save time and resources by eliminating the need to create every design element from scratch.

The Design System should promote accessibility by providing guidelines for creating designs that are inclusive and usable for all users, regardless of their abilities or disabilities. This helps IPTS ensure that its services are accessible to everyone, promoting an inclusive brand identity.

My role

As senior product designer my job was to help Shuddle reach a high level of efficiency in the design process, by leveraging their design system's effectiveness. I was responsible to ensure that the system is intuitive, efficient, and effective for its intended use and lead the design efforts in redesigning the system.

Goals:

• Create a user-friendly Design System that reflects Shuddle’s forward-thinking and innovative spirit, make it scalable in order to accommodate brand, product, component and style guides updates and changes as well as ensure all the teams in the company make an effective usage of it. Help maintain consistency, be effective, scalable and improve collaboration.

• Create a Design System that helps all team members, and stakeholders access libraries and assets in an easy way and contribute to them also.

• Create a documentation and reference website where everyone can find certified, official and foundational resources, principles, accessibility guides, assets and other resources.

• Overall, the design system will help Shuddle establish a more efficient and effective design process, resulting in better user experiences and a stronger brand identity. Given that Shuddle serves people across different planets and galaxies, this is especially critical.

Process

Investigation

The team began by conducting research on the company's target audience, brand values, and industry trends.The investigation, among other methods throughout the process, involved questions made to the individuals that were using the design system. This brought transparency and clarity to the overall process, and helped understand where the product teams and the company were.

Identify the vulnerabilities

After several discovery sessions, based on the the outcome of the investigation, the team identified several different issues with the existing system that involved:

Inconsistency throughout the process making it difficult for users to understand and navigate, which led to frustration and confusion, therefore to a negative user experience;

Poor Usability lead to a state where the system was unintuitive and hard to use, which made it difficult for its user to accomplish their objectives;

Had a limited scalability making it hard to scale effectively as the organisation was growing;

Was a poorly designed system that lead to Increased Costs and this was making developers spend more time working around limitations and inconsistencies;

Decreased brand value that was originated by the bad system in place.

Prioritise vulnerabilities

Conducted a user interface inventory and identify the vulnerabilities. Identify all the UI components that are used in the product. This included all the UI components, their details, categorization, and any issues that were identified during the evaluation.

...

Among other recommendations and actions, and with the help of the Hot Potato method, developers were involved in a lean process that helped create a set of pilot products with the right solutions to help guide the team in the right direction, and that could make possible the extraction, abstraction and absorption of the first set of principles, guides and components to help re-design the system.Heading

*Some assets like some of the brand images, logo, fonts and color schemes below were provided by the Dribbble team for the purpose following the same rules and as a requirement to complete the course.

Set up the new design system

Set up the design system resources and libraries structure

The team opted to create a single document for each of the resource files. For the component library the team got to the conclusion that it would serve the purpose if we base the organisation in the Atomic design principles, and use Figma to do it. We've named the library "Stelar-ipts".

Define the system

Based on the Atomic Design by Brad Frost, defined the small Atoms, Molecules, Organisms that became part of the design system and a set of templates, then determine the standard and document them for all those parts.

Design tokens

Created variables that represent the design elements, like:

Documentation

Planned and build a documentation and reference website.

There are several ways and possible tools that can help on this, but the team ended up using Zeroheight, because it helped a lot with the ability to add code snippets with the design tokens and other features that helped on documenting in a very complete way.

(1) IPTS and Shuddle are fictional entities provided by Dribbble for use in the Dribbble course “Scaling Design Systems” with Dan Mall, with the purpose of creating a capstone project. Any similarities in the real world are pure coincidence.

Thank you!