UI Designer
Munich, Germany
2020
Objective
To achieve consistent branding and components across all websites, apps, and emails, it was necessary to create and develop Westwing's first design system.
MY ROLE
My role involved supporting the team in creating and translating various elements into the new design system library that has been in use until now. Thanks to this participation, I was deeply involved in the process of elaborating elements such as iconography, components, etc., in order to update the design system for web and mobile apps.
Below, you can find the full case study that describes the entire process.
The Course of Actions
The first thing we did was take stock of the previous UI elements, and see where we could simplify it. We reduced the color palette, deleted old elements that were not being used, identified the key text styles…
In order to maintain system simplicity, we diligently documented guidelines and templates for component creation. An integral aspect of this endeavor involved defining a structural framework that would remain effective for our future system developments.
Finally, we conducted a three-day sprint during which all designers dedicated their efforts solely to the task of migrating components from outdated design libraries to Figma. Additionally, they seamlessly integrated new components into the existing framework while adhering to the established structure and guidelines.
The Sections
The biggest part of the Documenting stage was deciding how we wanted to structure our Design System in a way that would work for us, but also for the Developers that were going to replicate the system in their respective platforms. Previously we had been working with atomic design, but we found it had too many limitations for our team.So finally the decision was to split the system into the four following sections:
Foundation
Assets
Components
Standalones
Foundation is where we kept the main guidelines on Westwing’s corporate identity. We devided it into two subcategories:
Principles: Which included the main identity elements like Colors and Text Styles
Guidelines: Which featured all of our Grids, Spacing rules, specifications on aspect ratios, etc.
The assets were for the most part what had been “atoms” in our previous sketch library. They are very simple components, that often need to be exported such as Logos, Icons, Flags, Badges, Payments… It also included guidelines on how to create new assets so they stay within Westwing’s corporate identity.
The Component section was the biggest one in the Design System. It basically included every modular and reusable element used to build user interfaces. Some example of components include buttons, accordions, sliders… or our most complex: the product cell.
Lastly, in our previous experience working with the sketch library, we observed that there were components that we useful for us to have so we could always drag and drop, but that actually from a code perspective, were not considered as components, as they were not being reused.That’s where we saw the need for standalones:complex components that contain several smaller pieces and are rarely reused for other occasions. Examples of standalones include Footer, Header and Menu.
CONCLUSION
The new system was swiftly integrated into Westwing’s design workflow and quickly began to manifest itself within the various platform codes. This enabled everyone to enhance efficiency, uphold uniformity, and accelerate the design and development procedures.
All Rights Reserved - Made in Webflow