Plusgrade’s Ancillary Revenue Platform is a digital-first ancillary merchandising engine that gives travellers the ability to upgrade their experience by bidding on a white-labeled web app. As the only designer in my company, my main challenge was basically to find a smart and efficient solution that can be easily implemented on every one of our partner's platforms (Airlines).
I knew that building a design system is complicated and as difficult as that can be, sometimes it seems like the hardest thing is just getting the project started; getting everybody on board with the effort, with the investment and the comintment.
The question I had in my head was If you’re a designer, how do you actually convince your peers, or how do you convince your managers that a design system is worth it? the key is to find the value for the person you’re engaging with and to direct your attention to how your design system suits their needs.
I spoke to them about creating robust libraries of components and specifications that will speed up the development process.
I told them about consistent brand elements throughout.
I pointed out that each (expensive) online asset was built from the ground up, most likely by a different designer and implemented by a different developer each time.
The first challenge was to understand the current state of our design and development ecosystem. The experience provided by our product was internally inconsistent and confusing, not to mention the maintenance of code, so creating a systematic, atomic, style guide-driven design was a smart strategy, and an interface inventory was the first step in deconstructing pages down to their atomic level.
In the beginning, I didn't need much. The majority of elements that I will be using are atomic components: buttons, dropdowns, forms, fonts, colours, etc. I knew that the Initial styling of a system didn’t matter too much cause eventually I could change styling afterward with just a couple of clicks and the most important thing to bear in mind is the fact that this is a white label solution which means that elements such as colour palette, the style of the buttons and the typography are different for each partner (airlines), based on the style guide of their brand.
I also knew that I should focus on simple stuff first: colours, typography and essential components. This strategy will allow me to create designs much quicker. For example, if I needed to create an input field, I can begin with a default state and add others at a later stage, or for instance, initially, I wasn't sure about what icon to use inside an input field, so I just created a 16x16 square, fill it with grey colour and make it a component.
It’s always hard to be the only person in a company who is responsible for product design. My day was insanely busy because I was dealing with multiple things at the same time and building a design system was only one of them. So to save time I started building UI and converting all elements into components as I went. By doing this, I saved a lot of time, and it helped me decide what elements were the most crucial in the beginning. So I started creating an element and converted it into a component in my next step, so I didn't need to spend time on component replacement.
Sometimes I had downtime between tasks/projects, and the best way to spend that time was to improve and polish my design system. The time I spent on this did pay off during the creation of new features or assembling. I was constantly trying to reserve a couple of hours in my calendar throughout the week to make sure I could make incremental changes and improvements to my design system.
The idea with Design Tokens was to pair code and visual properties specifically design elements we might use over and over again in our web app in a format that’s deployable across all platforms (platform-agnostic variables). So following best practice, I decided to start simple: I first created tokens for the most common atomic and subatomic properties in my design system—such as colours, and text style properties, however, the visual style was composed of so much more, and so could tokens. While I started with applying colour to background and text, We end up expanding to many other types of decisions such as space, layout, shadows etc
All in all, this is how I started my first design system from scratch. There is still much work to be done, but I found out that slow progress was better than no progress at all. Building a design system is a never-ending challenge as we continue to update and adapt it to better suit our organizational needs. It might seem daunting at first but taking a small step at a time will make it a lot more achievable. crawl - walk - run !