Mijo DS

1 of 6

The challenge

As it started to grow as a household name for e-commerce in Mexico, we to expand from only having a site to also having a mobile app, but, since the former one was developed by an external agency bit offered a completely different looks and experience to the users than the website. So we needed to unify the image and experience of a platform that would boost the reach and voice of small business during the pandemic.

2 of 6

The basics

The first thing we need to do was unifying our first atoms, colors,text styles and icons.

• For colors, I took every color we were using in both platforms and grouped them in shades.
• For text styles started to create a hierarchy based on the text styles we had on production with some tweaks.
• For icons, we try to use a very rounded style to make the icons more friendly.

3 of 6

The components

Once we have clear the basic building blocks of our UI, we needed to create new components from scratch.
I would often spent some time of my sprint doing so, from simple inputs like buttons, to complex ones like navigation bars, but as time passed and the System grew, other designers and devs started adding their own components to the system.

4 of 6

Unifying our workflow

Once the DS started to gain traction, I optimize the workflow of adding things to the design system vía Sketch plugins like AirBnB's react-sketchapp library for using the same coded component in Sketch, Figma, React and React native. And, once very component was unified, I deployed a Storybook site to work as our single source of truth.

5 of 6

The end result

With a unified workflow, every component that we created was being released on every platform at once. And we could create and redesign features super easy and fast, since Designers and Devs were, in a way, speaking the same language.