This one was already developed and there was no room for a proper UX this time. My only work was take what it was coded and make some tweeks so the developer had to move the least code possible.

The branding for this project as in many cases only consisted on a Logotype. Begining from this point I built a proposal which was intended to set the basis to a future branding. Although, that was beyond my hands.

The Layout

One of the most common mistakes among backend developers is a lack of visual training. This app was using Material Design elements, but missaligned. Firts step to fix this was an active communication in wich Figma became a great tool to document and show examples of design bad practices.

Showing examples of other interfaces that were using a proper layout helps the developer to be aware and the designer to have a parameter on what can or can’t be done on native interfaces on that matter.

Even when it cannot be determinated with certain if those are or not developed natively, If a variation has occured, then is a sign that there’s room to control it. For a designer perspective, this matters.

Next steps are performed in tendem. Figma allows direct communication through the platform itself. A way to work for small teams is document directly on the file, specially when storybook is not available.

A very simple design (or proto design) system is based on Design tokens and few components. In adition to a one to one close communication we solved the User interface in almost no time.