Abdelhamid Younis Portfolio

Explore

Abdelhamid Younis Portfolio

Home

Tubics's Design System & documentation 2021
Tubics's Design System & documentation 2021

Tubics wanted to migrate from the old color palette to the new color palette, while at the same time adobting a new React-material design system.

Company Tubics Gmbh

Duration 2 Months

Role UX/UI Designer

⁠

⁠

Project plan

Step 1: Creating inventory for all components and states

Step 2: Selecting the UI framework

Step 3: Designing the components with the new color palette

Step 4: documenting the components in confluence

Step 5: Mock the 3 main flows with the new component to get approval

Delivery step 1: migrating to the new colors and fonts and resolving inconsistencies

Delivery step 2: building a web page for the components

⁠

Project Team and responsibilities

Product owner: responsible for the whole project rodemap

Agile coach: following up on team progress and alignment.

Developers: lead the migration from the old angular app to the new react library.

UX/UI designer: I was responsible for making the components in Figma, and handing it over to devs, while making sure that the quality is met.

Marketing: She managed the project of redesigning our company website with an external agency, and toke care of updating the imagery and icons to fin to the new branding on our social media channels.

⁠

Step1: Creating inventory for old components

With the help of one of the frontend developers we exported all the colors in the stylesheet, then made an excel sheet with where they were used in the app and and in which context.

Mix and match

I tried to mix and match the text styles or the color styles that are closer together into one text/ color styles. the picture below describes how a group of colors in the old app were replaced by a new color in the the new branding color palette. we did the same for the font color & size.

⁠

Creating a component Inventory

Coming to the components we created a table in excel with all the components and how many instances of this component in the product. and where these components were used in the product.

⁠

Step 2: Selecting the UI framework

We had to choose which react library we will use in the code to import the components from, although tailwind offered greater flexiblity with designing components we had to use the last one because it os a light weight react material library.

⁠

⁠

⁠

⁠

⁠

Step 3: Designing the system (1 week)

Taking the old component inventory, the react material library and making some research on other enterprise application design systems such as (Intergaltic by semrush, Atlassian Design system, polaris by shopify, and more ...) I started creating the design system components in Figma.

Colors and text styles

⁠

⁠

⁠

App bars & buttons

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

Step 4: documenting the components in confluence (2 weeks)

Developers needed guidelines in the future on how to use the design system. I made extensive research on design system guidlines and made this documentation in Figma.

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

Step 4: I mocked the 3 main pages in the app with the new component to get approval

⁠

⁠

⁠

⁠

🚀 How we measured the success and the clarity of the design system documentation.

we made a worksop with the developers where they were instructed to create a page in the app for the top ranking keywords without my assistant, we told them what the page should include and just told them to use the design system to design this page. The developers could manage to do it in 1 day without any design assistance, just using the documentation.

This was the output of the developers.

⁠