Oddschecker Design System

Client: Oddschecker
Services: Product Design, Internal Tool

01. Introduction

During my first retro in Oddschecker I remember a developer asking a tool or a way to have an easy access to all the icons and assets for the app.

Till that time the exchange of the assets between the design and the developers team was tackle exporting single elements from the Sketch file and send it via Slack.

Another problem I discovered during my first month in the product team, was the lack of connection in-between the team member. Each designer was working offline on his file and only when the design process was ended, the flow was made it public on Zeplin.

This was mean that there wasn’t any kind of centralised library or assets and any source of true for the design.

02. The Style Guide

My first task as a side project was to bring all the assets from the different files, analyse it and isolate the important components.

After that step I create a Sketch file with all the symbols, Then I shared that file with my team, but the problem of updating was still there.

03. Sharing to make the design live.

The next important step was to make all the components easily shareable and downloadable from the developers.

I start my research for the perfect tool that suits my need, I went to a Skype call with the guys of inVision for their Design System Manager, I tested Notion and Zeroheight.

04. The Right Tool

The right tool for the design system was ZeroHeight. An easy to use and easy to update platform with free plan and a cheap subscription plan for more advanced features.

A small design system

From the initial idea of linking the Product Design team with the Develop Team, it become a source of true of the design for the entire company.

Different export options

Graphic designer, iOS and Android Developers need assets with different file export.

This was an easy step to complete. I created a preset in Sketch with all the export requested by the teams, and once imported into the platform, every components is available in different version.

A well organised platform

Marketing, Deign and Develop Team now can easily access the platform and find all the assets well organised and documented.

05. The big step

My last step was to transform the team from “solo designer” to a real team.

I ran and introduction demo about the pros and cons about Figma, and days after I ran a more in depth workshop on how to use Figma in team and how to access the library for the shared components.

06. My presentations

I made two presentations for my two demo days about a new way of working in team and another one to show the big differences between Sketch and Figma