Adorie

1.

Analyzing the current platform

When I joined the team, the platform was still in the MVP phase, so its UI was provisional and not yet fully developed.

Working with the UX/UI design team, I identified the main issues with the interface at that time, such as its lack of alignment with the brand’s vision and its failure to adhere to best practices for hierarchy and visual design.

‍

‍

2.

Developing a Design System

One of the main issues identified in the previous phase was the lack of consistency in the interface’s basic components and design tokens. As a result, there was a need to create a design system that could ensure the screens’ cohesion and facilitate visual changes. Component interactions were planned and documented in the Figma file along with the handoff to the developers.

During this process, all interface elements were rethought and redesigned to better represent the brand and make the interface cleaner and more modern.

‍

‍

3.

Redesigning the interface

With the design system’s atoms and molecules ready, the next step was to apply them to the screens. In addition, while redesigning the old screens, new features essential to the platform were added, such as a categories section for the Home screen and a filter for a store’s products.

‍

‍

4.

Adapting for the web

Finally, the app’s components were adapted for desktop use. In this regard, the design system was essential for streamlining the screen design process, ensuring consistency across both environments, and enabling code reuse.