Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
Steel Product Design System
Client
Reibus
Role
Senior UX Product Designer
Applied Skills
Systems Design, UX/UI Design, Creative Direction, Communication, Mentorship
Made With
Figma, Photoshop, Illustrator, Miro
Problem
Reibus is a fast growing startup that needed design elements in place quickly to keep pace alongside their skyrocketing growth. To combat this they relied heavily on the pre-established design system “Material” as their base and brought in various design talents to build upon this base over the last few years. This had culminated into a confusing overlapping system that was becoming increasingly hard to navigate or determine which assets were currently being utilized and ultimately causing many blockers for teams as they continue to work on building out the company’s products.
Project Goal
Consolidate existing Reibus branding and build out a new design system in Figma from the ground up. The new system would need to have elements comparable to Material for current development needs but also have updated branding for Reibus. These assets would need to be regimented for consistency but still allow for creative flexibility with usage guidelines for both Design and Development throughout.
Impact
The system gave designers creative freedom while retaining inherent branding requirements to insure a cohesive and consistent user experience moving forward. The new priority list and change log helped streamline feedback to allow for quick corrections and kept everyone on the same page. During this time I was able to help mentor and teach designers on the design team how to use boolean selectors and variants while improving their knowledge with auto layout to create smarter and more dynamic assets. Received constant feedback from development who were relieved to work with a clean and organized system. My guidelines were being utilized right away with developers reporting a significant improvement in their ability to adapt elements into the storybook. Designers saw a significant increase in their workflow and they absolutely loved the flexibility of the new dynamic elements.
I began work on this project familiarizing myself with their current design systems while also meeting with design and development teams to better understand how they’re currently using the system, where their pain points are, and what their needs would be. The development teams would be using Storybook to house design elements they build out along with Infragistics for charts and graphs. With time being a major factor here, I also met with the design director to discuss system needs and to determine a priority list of what elements and modules were needed the most. From there I built out a base structure in Figma separating out pages using principles of atomic design to establish a hierarchy for elements. I then began with the base level elements, or “atoms”, such as colors, fonts, and icons. I expanded out the base colors so that each color had shades and gradients and converted each into organized styles. After agreeing on font families I brought them into figma and created a hierarchy and converted each into styles. After talking with the design team I decided to bring in the chosen icon library as variants of an icon element. This would allow designers to use one element and change it to the icon they needed via dropdown. I continued to build out base elements from here combining components into variants where possible and if more flexibility was needed I even added embedded Boolean selectors for elements like icons in buttons etc that designers could dynamically toggle on and off depending on the needs of their design. Building the system out in this way allowed for designers to have much needed creative liberties while retaining each element’s branding overall.
Designers could now simply drag a base element out into their work spaces, select which variant they wished to use and then click into each element to toggle on or off any additional features they wished to utilize for their design. Once I got to charts and graphs I met with development to understand how they would be building and using these elements and got a login for Infragistics so I could take screenshots of each chart and graph the company intended to use. I then recreated them in Figma making them scalable and completely editable for designers to manipulate as needed. Once the design system elements were all in place, I went back into the pages and created two separate sections that would house the elements and variants on the right with documentation on the left. I then proceeded to build out detailed guides for every element and included links out to storybook and other reference materials that could be useful for both design and development teams.
During this process I discovered that teams were not certain what elements were finished or in progress and I saw a need for a way to relay changes as well as a dedicated list of pages that could show their current status. I ended up creating a change and priority list in figma that detailed out each page with status tags to show teams what elements were safe to use and which were still in progress. I then created a live changelog and set up a weekly meeting where I would detail out all changes and updates made for the week to keep teams aware of any elements that might have changed so they can check their designs and report any issues. We continued to work in this way until the design system was complete with every page having “completed” status with the approval of our design director.
