Design System. Web Design Interaction Design UI/UX

The challenge

Shape the service and brand including every single user flow, from idea to product.

It’s a cloud-based, collaborative solution, with several kinds of users and privileges.

Take the client’s original idea and first versions and shape the solution and ‘personality’ from there.

The solution

Map and layout all the different user-flows needed.

A Design System

Document the solution giving the developer team flexibility and autonomy to interpret and apply the design for future functions.

Concept and create every single element, interaction, animations and micro-interaction needed for the app, end to end: Sign-ups, Sign-in, onboarding, empty states, feedback (warning, errors, alert).

Definition of colors, typography, font sizes, buttons, with clear indications for when and how to use them.

A user journey
A Workarea
The Dashboard
The profiles

Characteristics

Contextual Schemes

Only by giving a fast look the user will understand in what context and on which application the user is located.

We used different color schemes to alert by context the purpose of the current interface, bright, dark and colorful schemes have each one a different meaning.

Use the dark mode to imply the user should be hands-on the task. Excluding black and white, these are the six standard colors in the base palette: Primary, Secondary, Active, Success, Warning, and Error.

Use the light mode to deliver information. Excluding black and white, these are the six standard colors in the base palette: Primary, Secondary, Active, Success, Warning, and Error.

Responsive

The UI system should work on different breakpoints: mobile, tablet and desktop.

Cohesive

Everywhere you go, we kept consistency so the app feels as a part of the same brand.

Scalable

The design patterns are developed in a way it can be scale easily for new functions and content.