Redesigning the Ship.Cars Design System for а better UX

by: Daniel Mitev, Customer Experience Manager at Ship.Cars

Over the past couple of years, it has been proven that a well-thought design system can have a significant impact on customer experience, market perception, and overall product success. However, in today’s market dynamics, it is crucial to regularly update your design foundation to stay ahead of the curve and maintain market relevance.

At Ship.Cars, we understand the importance of achieving more accurate results and meeting the evolving needs of our users. With this in mind, our team has invested significant time and resources into re-imagining our design system and methods, aiming to place emphasis on usability and on our products’ overall experience.

Through this blog post, we’ll guide you through the steps we took in restructuring our design system, the difficulties we encountered, and the significant improvements we were able to accomplish.

The process:
We are happy to report that our efforts were successful and can now provide our customers with a far more user-friendly and satisfying experience when utilizing our services.
But this took time to happen. We followed several key phases in the redesign process to achieve our goals.
First, we identified the goals and objectives of the redesign, which included enhancing and creating a more modern and cohesive look and feel. We then researched current design trends and best practices and evaluated our existing design system to identify areas for improvement. As a result of our audit, we saw a couple of problems with the components’ mobile and tablet versions. Another challenge was to ensure consistent use of the atom elements across all of the components in the platform. As well as the chaotic use of different font families, the three different types of form fields, and the need for a clear strategy for using CTAs.
We developed our own strategy based on this data, which included a timeframe and critical objectives. This made it easier for us to focus and keep in touch with everyone helping us. Then, using concepts, wireframes, and interactive prototypes, we gathered user input and used what we had discovered to drive the creative process.

Afterward, we put the new design system into practice, ensuring that every design piece was adequately organized and documented. As a result of the effort, our team provided our users with a much more pleasing and user-friendly experience when interacting with our platform. But from a design standpoint, the most significant benefit from the redesign was that our design system was now effortless to maintain and upgrade with new elements.

But let’s dive deep into a few of the exciting initiatives.

For starters, let’s have a look at the backbone of the design system — the building methodology.
We implemented the Atomic Design Methodology to streamline the design system redesign. This methodology incorporates five distinct phases — atoms, molecules, organisms, templates, and pages — working together to create a more organized and systematic approach. This methodology has allowed our team to quickly create a unified visual language and reusable components, saving us time and resources.

The color scheme: It was essential to redesign our color scheme in a way that it meets the accessibility standards of WCAG 2.0. This ensured that our products are usable for people with a wide range of disabilities, including those with visual impairments. The improved color contrast makes it easier for users to read and navigate through our interfaces, making our products more accessible and inclusive of all users.

Iconography Library: The new design system also features a consistent style of icons throughout our products. This makes it easier for users to recognize and understand the different icons and actions assigned to them. Using consistent visual weight and dimension throughout the library was also crucial. Previously, there was too much variation in the icon set, affecting the overall design message and making it look like the icons were mismatched.

Skeleton Screens: We’ve added skeleton screens to indicate the loading state of pages in our design system. They consist of a simplified version of the final layout, allowing users to see the layout structure while the visual content loads. They improve user experience by providing visual continuity, reducing delay perception, and keeping users engaged. They also improve performance by reducing loading time.

AI-generated avatars: We understand the importance of being inclusive and respectful toward everyone’s privacy, which is why we have implemented the use of AI-generated avatars in our design system. This allows us to create UI mockups without worrying about interfering with someone’s privacy.

New Font family: The updated color contrast, in combination with the font family, makes it easier for users to consume information, while the unified components provide a consistent and cohesive look and feel.

The font family we chose for our redesign is Roboto Flex, a new addition to the Roboto family. Roboto Flex has been designed to improve legibility and provide a more natural reading experience. The font family includes various weights, from Thin to Black, to help create a visual hierarchy. Additionally, the family includes alternate characters and ligatures, which help to give the text a more dynamic and exciting appearance.

Efficiency: One of the key benefits of our new design system is the improved efficiency of building new UI screens. With the implementation of the atomic design methodology, reusable components, and consistent design patterns, our team has seen a significant drop in the time required to build new mockups. This is due to the fact that we can quickly and easily reuse existing elements and patterns rather than having to recreate them from scratch each time. As a result, we can increase the speed of building new features and deliver them to our users faster.

As an example, before the redesign, our team was taking on average around 3–7 days to complete a set of UI screens(2–8), and currently, we can accomplish that in 1–3 days, depending on the complexity of the screen, that’s a 60–70% drop in time, which is a considerable increase in productivity and allows us to focus on creating extensive design explorations and respectively to select the optimal design solutions.

Final thoughts:

With new trends, technologies, and user behaviors emerging every day, updating our design system helps to ensure that our products remain up-to-date, user-friendly, and aligned with our identity.

The user experience of our platform has been significantly enhanced due to the revamping of our design system; our designs are now more intuitive, accessible, and visually appealing. In addition, we provided our users with a more modern and delightful experience by adhering to best practices and adding core design features, including enhanced color contrast, uniform iconography, and a unified design structure.

This was all made possible by applying user-centered design concepts throughout the entire process.

A huge thanks to all the designers, project managers, developers, and users who played a role in this journey.