SMC's Design System
The challenge
Stagwell Marketing Cloud is an umbrella brand for a lot of products, most of them include AI. The brand acquired these products by buying startups and merging with other enterprises which brought their own Design Systems and staff aboard. The challenge is creating a Design System to bring them all together under the same design base. One to rule them all!
My role and dutties - Part 1
As the second UX UI Designer entering the project my dutties are to coordinate with the PO and the other UX UI Designer working on the project, prioritize components to be done, create those components, brainstorm ideas and present the work to the stakeholders.
Components
Skeleton
The skeleton is the animation that appears when a screen is loading.
Uploader
The space in which users can either drag and drop a file to upload it or click a button to browse and select files to upload.
AI Chatbot side Panel
Since most if not all products under the SMC umbrella have AI, a side panel to converse with the AIs is necessary.
Accordion
A list of collapsible items.
Items on the list
Accordions
Small
But suddenly, everything changed
The designer in charge of this Design System stopped showing up and I was left with the task of making it grow and evolve, as well as checking thew work of other designers that were using it.
With this new acquired freedom I decided to take risks and chances and propose new ideas with the objectives in mind of making components that are:
More scalable and fully customizable
With that in mind I started mapping patterns and creating the following components.
Pattern mapping to create fully customazable Layout
The space in which users can either drag and drop a file to upload it or click a button to browse and select files to upload.
Architecture of the component
This component is in the making.
Fully customizable modal component
I mapped out all the patterns in the web's modal components and created a fully customizable component that can turn into any of them, hence, if the company wants ot make a change in the design, the change will affect every modal and that will save months of work.
How to customize
