G-Star RAW®
A design system to build an exceptional online presence
The ongoing success of designer clothing company G-Star RAW® meant that the business wanted to re-evaluate how it managed its brand communications. Over the years, some inconsistencies had built up in its design language, and G-Star needed a single source of truth. That’s when Youwe was called in to find a solution.
Design language complexities can be a common challenge for big companies that work with a range of external agencies, freelancers and a large group of their own UX designers and developers.
This had happened to G-Star. Its website had changed gradually over the years, creeping away from its brand identity in tiny, regular increments. And all those small changes had added up to create a big dilemma. G-Star needed clarity on its digital brand rules and design language.
The solution? It was time for Youwe to step in, creating and deploying a digital design system for G-Star.
A design system is a set of standards that manages design at scale.
Our solution
Design system as a solution
A design system is a set of standards that manages design at scale. It does this by reducing unnecessary duplication, while creating a shared language and visual consistency across different pages and channels. This is exactly what G-Star needed.
Reusable components, principles, and guidelines for consistent digital design. These are the building blocks of a successful design system. However, before anything worthwhile can be built, thorough research has to be done.
- A deep-dive into the brand
Together with G-Star we began by investigating, analyzing and creating a brand inventory. With so many different designs, web pages, campaigns and other brand collateral, we needed to find the common visual thread and propose the optimum design language for G-Star’s immediate success. We also needed to make sure it would serve them over the long-term as well.
- G-Star’s single source of truth
Pulling together all the design components in one place provides designers and developers with a single source of truth. It smooths their workflow and improves brand coherence. A design system is a living, breathing repository, easily accessible across all project teams. It provides all the components of the brand, and it is always up to date. That’s why we captured and cataloged all the interface elements and the visual language in a new, consistent and scalable design system using Figma.
- Design success is now baked in
No longer can a freelance designer, by accident, use a slightly incorrect hue, or change the font sizing of a heading or paragraph different from brand guidelines. All information is there, in real time, baked into the design system. It is even component-based, with clickable links, and includes acceptable and unacceptable use scenarios for all elements of the G-Star brand.
What’s more, we even provided a global redesign mechanism, which allows G-Star to batch replace any old design elements with new ones. For example, an old typeface can be replaced with a new typeface, across multiple pages, and in just one click.
The results
A living, breathing ecosystem
With our help, the G-Star team has been able to create consistency across the brand and do away with the constant stress of reactive brand management. All the confusion and noise in their designs and brand expressions has been removed, creating a clear way forward. The G-Star design system is truly a living ecosystem, and will continue to be enriched as G-Star moves forward.
In tangible terms, G-Star has seen a significant decrease in time spent on finding the right brand elements, briefing internal and external design teams, and smoothing design discussions between designers and developers.
In particular, developers now have all the answers, and no longer have to ask what has to happen on button rollovers or clicks, for example. The design system provides them with everything they need. They can even get the exact piece of code that they require for a specific button, ensuring design and coding errors have decreased significantly.
