Transifex - Design System

Setting the layout foundation

As a Digital Product Designer, at Transifex, I led the initiative of creating a Design System so that we could optimize and scale the delivery process from the concept to the user.

We restructured the layout to support consistency across the platform by defining visual grids, spacing, and sections.

My aim was to create a more tangible interface – one with shadows and z-depth levels instead of being just flat. The result was a 4-level stack of layers that allows for a unified experience across the product and be coherent in terms of how the info on each page is being used.

The full launch has been released globally in April 2016.

Creating a visual source of truth

One thing that was needed the most was a Styleguide. We created a component-based style guide making the visual design process more methodical.

Refining our Design System, even more, we established our principles for our Tone of Voice so that our customers can have a sense of connection with our product. Also, we started to explore our illustration principles so that we can create consistent icons for the platform and illustrations for our empty states.

Rebuilding the CSS frameworks from the ground-up

Whilst building our Design System, we also tackled our technical debt in CSS and HTML. We re-wrote our CSS from scratch using OOSCC (object oriented CSS) and BEM (Block Element Modifier) frameworks.

This helped us create clear, strict relationships between CSS and HTML and create reusable, composable components where we used less nesting and lower specificity, creating a more agnostic and flexible code base. Also, we used scemnatic CSS in order to create a unified understanding between designers and developers.

Pollfish - Design Styleguide

Building the Design Language

When I joined Pollfish as the sole Digital Product Designer, there was no Styleguide or any other form of documentation at that time . It was my first priority to create one so that we could encourage visual consistency and help keep the interface as coherent as possible, resulting to a better user experience.

Whilst building the Styleguide, I collaborated very closely with the 3 front-end developers, so that we all have the same understanding and streamline the transition from design to development by minimising build errors and helping encourage modular development best practices.

The full launch has been released globally in February 2017.

MOO Print - DesignOps

Building A Research Nugget data base

At MOO the main pain point was that research reports are conducted every week by a variety of researchers and designers. These reports pile up quickly resulting in bad research memory - aka organisation amnesia. To tackle that, I started the initiative of the nugget database along with our Head of Research. We went through the findings and started sorting out where they sit.

This is still an ongoing project where I am part of a small team of researchers and designers who share the same vision and want to see this project get completed.

The full launch has been released globally in February 2017.

New Components and Patterns acceptance workflows

When I joined MOO there was already a design system already in place. However, the main challenge was the fact that different multi-disciplinary crews had different needs and sometimes had to come up with new patterns or components that didn't exist in the MOODS (MOO Design System).

Since my crew was the most active at the time, due to huge refactoring, I led the initiative for creating a workflow that would we would later adapt across the organization and follow it everytime we felt the need that a pattern or component had to be added in MOODS.