Design System, The first action

When I joined the team, there was no established design system in place. I took the initiative to create three complete design systems from scratch, tailored to the needs of ongoing projects. These images are just part of each DS.

Mr. Marketing DS

HDI Global DS

Bright IT DS

Design process at Bright IT

In this two years, in addition to my daily UX design work, I have also worked on creating design libraries from scratch for various clients. When I joined the team, there was no defined design system in place, and designers were using different tools such as Adobe XD and Sketch for individual projects. Upon joining, I prepared a roadmap and thanks to an open-minded supervisor and their trust, we were able to migrate the entire team to Figma and establish proper design libraries for all of our projects.
In order I listed here screens from libraries, Mister Marketing project, HDI Global SE project and Swarovski optik.

My current approach to any design project is mostly oriented towards systematic design.

Requirement assigned

Receiving tasks from PO/PM and prioritise them by my timeline.

Task flow

If the Flow is not clear yet with team we are having different meetings to prepare the task flow.

Understanding users and their needs

No action should be taken before defining who the users are and what problem needs to be solved. I typically begin by defining the personas, analyzing their problems and needs, and then defining the user journey.

First visual step in Miro

To better understand the requirements and prepare for the design process, the first step is to visualize and share the idea with the team to receive feedback and objections.

Brainstorming define plans

This is one of the very beginning boards I prepare to brainstorm, gather ideas, defining differences between user needs and user problems with team.

Tis is in Miro/Figjam because I want the entire team add directly their feedbacks. We also interviewd users in this step to have idea from user side.

Low-fidelity single page

After receiving feedback from users, developers and product owners, I start working on the low-fidelity design.

Low-fidelity initial user flow

This step is just an initial idea about the flow, and as time goes on and all aspects of the project are taken into account, it will likely become much more elaborate.

Idea board

Then import all the previous design steps into the Figma file and begin the actual design work. Once I have completed the design, I share it with the team for approval. Here I detach components from the main library to quickly edit and iterate during the next team meeting.

Idea board

Idea board can become a big file as it allows all scenarios to be defined and approved in advance, which helps to avoid wasting time and misunderstandings for designers and developers in later steps.

Final Design- Ecommerece Free plan

After receiving approval for the initial design, I begin working on the details and all possible scenarios for the design. It's important to consider all edge cases and ensure the responsive views are delivered.

Final Design- Ecommerece Standard plan

Design details

All actions are defined and in some places, emphasis is placed on the behavior if it is not completely clear or if there is a chance it might be missed by developers.

Connection with other design pages

In here the "positioning" behaviour has impact on "dashboard widget" which designed already. But to be clear for developers is going to be explained here as well.

Delivered design is not the end

After delivering design I stay in touch with developers if there is anything needed from my side. Once implementation is done I do the UX review. If everything is fine hand it over to the testers. In many case we do user interview to receive the direct feedback to improve the experience.