IPTS is a transportation network provides people with fast and comfortable cruises and trips from world to world within our galaxy.

IPTS has a solid brand identity but needed a Design System restructure and re-design that can help save time and resources by eliminating the need to create every design element from scratch. By providing pre-established design elements, the design system can speed up the design process and allow designers to focus on more complex tasks.

The Design System will 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.

Goals:

• Create a user-friendly Design System that reflects IPTS's forward-thinking and innovative spirit, ensure all the teams in the company make an effective usage of it. It must also help maintain consistency, be effective, scalable and improve collaboration.

• The Design System must help 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 foundational resources, principles, accessibility guides, assets and other resources.

Overall, a design system will help IPTS establish a more efficient and effective design process, resulting in better user experiences and a stronger brand identity. Given that IPTS 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

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;

Limited Scalability was 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 and user flows 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 build the design system.

Set up the 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

Defined the small parts that became part of the design system, determine the standard and document them for all those parts.

Documentation

Planned and build a documentation and reference website.
There are several ways and possible tools that can help on this. The team ended up using Zeroheight, which helped with the ability to add code snippets with the design tokens.

(1) IPTS is a fictional entity provided for the Dribbble course “Scaling Design Systems” by Dan Mall, with the purpose of creating a capstone project.

Thank you for going through this case study.

This the a result of the work done in the process of defining what really means a design system for a service, product and a company.