Behind the scenes
Our product comparison feature makes shopping simple
by Coya Vallejo Hägi
«Lots of heart and soul» – why our UX designers and developers created a design system
23.12.2022
Translation: Eva Francis
Pictures: Christian Walker
Intuitive buttons, helpful links and coherent colours – our UX designers and software developers make sure our online shops are a breeze to use. A design system has made it easier for them to work together.
In this interview, software developer Christina Heidt and lead UX designer Leonardo Hauschild talk about what a design system is and why it simplifies collaboration for growing teams.
Leonardo, what is it that you do?
Leonardo Hauschild, Lead UX Designer: Websites consist of a frontend and a backend. What customers see when they type in www.galaxus.ch is our frontend. It’s designed by us UX designers. We’re responsible for the appearance, functionality and usability of the site.
And what do you do, Christina?
Christina Heidt, Software Developer: I write the code that implements the designed elements and the envisioned functionalities.
How do you work together?
Leonardo: Every UX designer works in a cross-functional team with several developers and one product owner. In other words, our UX designers are spread across various teams. This requires a lot of coordination. After all, we might work in different teams, but we need to make sure the online shops feel like «Digitec Galaxus» rather than «Team Isotopes» or «Team Endeavour». With our setup, it's easy to fall into this trap.
Christina: The design system is intended to counteract this. We’ve grown to a team of 150 developers. At some point, we realised we need more effective ways to communicate with each other. We wanted to create a place where all information is streamlined, allowing us to design a shop that looks and feels consistent.
This place is the design system?
Christina: Exactly. It’s a web application that combines our design tool «Figma» and the codebase. It allows us to see how certain elements are designed in the design tool – with the corresponding code components right next to them. The application’s search function is also very helpful.
What was the main problem before you introduced the design system?
Christina: Finding the right information. Let’s say I want to code a checkbox. Quite often, the «Checkbox» component would exist in Figma, but the code was missing. I’d wonder why this was the case. It might not exist yet – or it might just be stored under a different name in the codebase. Another issue was consistency.
What do you mean?
Christina: As a developer, if I can’t find the component in the code, I implement it myself. However, this leads to duplicates of the same element. In the past, the design wasn’t always implemented the same way in these duplicate implementations. The result? Inconsistencies. This problem increased as more people joined us and the codebase grew. So, we decided we needed to filter out redundancies and make sure we don’t implement things in «almost the same» way.
Leonardo: «Almost the same» is worse than completely different.
Source: Christian Walker
As an average user, would I even notice such inconsistencies?
Christina: I think most people don’t notice – unless they’re designers themselves. But subconsciously they might, as interacting with the shops doesn’t feel as good as it could. In the worst case, our customers might not recognise certain elements because they look different depending on the page. This might make them leave the shop. Interacting with an inconsistent website is confusing.
Leonardo: Internally, we feel the pain as soon as we’re asked to change something in the user interface.
How come?
Leonardo: Let’s say we’re asked to redesign a checkbox. Developers and UX designers look for the checkbox, find an element and redesign it. Now, if another checkbox exists that looks the same but is coded differently, this checkbox won’t be redesigned but will still appear somewhere on the shop. If there isn’t consistency in how all checkboxes are programmed, there’s pure chaos and we need to search and replace everything manually. That’s the problem with potentially offering dark mode.
What do the design system and dark mode have to do with each other?
Christina: The design system is the foundation for enabling dark mode, as it makes everything less complex. We’ve made certain adjustments in the design system to support dark mode. That’s a first step in the right direction. Now it’s up to all of us together to decide how to proceed.
What difference does the design system make for our customers?
Christina: Our shops are becoming more consistent. In other words, elements that were previously inconsistent will disappear. It’s an ongoing process. The design system will never be finished, as our shops are always growing and changing.
Leonardo: Our main hope is that far-reaching changes won’t be as painful for us anymore. This means, if we decide to colour checkboxes pink, all checkboxes on all pages will actually turn pink – without us having to chase after alternatively programmed checkboxes and manually colour them pink. That's a tedious process.
What did you like most about this project?
Christina: We developed the design system ourselves and put a lot of heart and soul into it. Now, this hard work is paying off – that’s a great feeling. We’ve created a foundation to implement new projects and functionalities more easily. It’s a lot of work, but it’s fun.
Leonardo: That’s exactly what I like about Digitec Galaxus: work never gets boring. We always come up with new ideas on how to improve certain things. Who knows what we’ll tackle next?
Want to see how our checkboxes, buttons or colours are developed and designed? Check out our design system.
Want to work for Digitec Galaxus? Here’s our job portal.
«I want it all! The terrifying lows, the dizzying highs, the creamy middles!» – these words spoken by an iconic American TV celebrity could have been mine. It's a take on life I also apply to my job. What does this mean in concrete terms? That every story has its charm; no matter how small, large, exciting or trivial. The more eclectic the mix, the better.
Tech
Follow topics and stay updated on your areas of interest
23 comments
later