When Design meets Engineering at Traveloka
This is not an ordinary love story.
Note: This is just one of the interactions between Design and Engineering. I am speaking from one small spectrum of all of the interactions between Design and Engineering in Traveloka. And this is my story.
As time goes by, Traveloka has been around for 6 years. In this journey, we admit that we have a lot of visual bugs that have been there for quite a while, like different shades of orange for buttons or inconsistent margin between cards.
Design team initiated the effort to standardize our visual language by building our own design kit to prevent any new visual anomalies that deviated from our standard. We tried, but somehow this problem never solved. Even after we have our own design kit, we still see those visual inconsistencies on our products.
On the other hand, our engineers need to work more efficiently. They prefer to build similar components from scratch instead of looking up to find that same component for reuse. Because searching for these components is a friction in their current workflow.
All these times, the Design team and the Engineering team were trying to solve their own problem without communicating to each other. It popped the question on the possibility of Design and Engineering working together to solve the problem that we both encounter every day. Who knew that Design and Engineering can walk hand-in-hand and grow love in the process? ❤️
When did they first met?
The talks started at the beginning of 2018 when the Engineering team did some research on React Native and React Native Web (React Native is a framework to build mobile apps using JavaScript). When this research started, Web UI Developers from Design team got involved.
During the process, Engineering team had the idea to use React Native as the base for cross-platform development. This includes the development of Mobile Web in which Web UI Developer can involve to create components on it.
When this initiative began, we were so excited to learn React Native and make the best out of it as we can make a more significant impact and create components for all available platform from a single source of code. And this is where we first getting to know each other.
How the love grew?
We met each other a few times after then, but nothing sparked in our heart. But then, the spark emerge when we have this intern. It all started as simple as an intern project.
This intern is a React Native engineer and assigned to build anything that can smoothen the collaboration between Design and Engineering. He started to build a component library, some mind-blowing sketch plugins for designers, and research other collaboration possibilities between Design and Engineering.
Aside from that, Design team also had the initiative to make a code-based single source of truth (SSOT) for design tokens and components. These two movements inspired us to collaborate on this mission. This is where love sparks, and we believe that we are running into a brighter future together.
Where the love led us?
After several times dating (read: meeting), we finally agree to take our relationship to the next level. It was not an easy to road to walk on, but we believed that this is the right one for us. Understanding each other is the essential key to a good relationship, right? And that’s what we did when we decided to collaborate.
We started by understanding how each other works. And after these nights full of nightmares and roads full of obstacles, we are finally heading towards the better collaboration. Here are our commitments to achieve the better collaboration between Design and Engineering:
1. Code-based design system.
Collaboration between Design and Engineering has been quite challenging. The bridge between design and code is not strong enough and it made the work became hard between us.
We then got the idea to create a code-based design system. We put our design token in JavaScript, which is the easiest way for engineer to utilize, yet still simple enough for designer to manage.
We are collaborating to build our own handcrafted components that meet Design’s and Engineering’s standard. Those components will be used on all platforms to establish consistency on our design.
2. Sketch plugins.
This Sketch plugins work like the bridge between design and codes. On the Design side, this makes the collaboration easier because designers don’t need to generate the same components over and over again. This will also help designer to build their user interface based on the standardized components.
On the Engineering side, this plugin will translate the user interface into codes that can be easily implemented by the engineer. This will cut down the engineer’s working time because they don’t need to look up for existing components from the previous design.
3. Design linter and integrated visual testing.
After working with the user interface and the code, the next step is to make sure that both of them are standardized. This is where design linter and integrated visual testing took part. We are currently researching the possibility to develop design linter and integrated visual testing to work like as a safety net to both of our user interface and codes. From the design side, design linter will encourage UI Designer to use standardized components. Meanwhile from the engineering side, visual testing will decrease the possibility of visual anomalies when the product is released. This will make the life of both designer and engineer become easier in the future.
4. Design system documentation.
When collaborate with different team, it’s nice to have a guideline that you both can refer to. Design system documentation works as the design bible that accessible by all stakeholders, including Product Managers, engineer and fellow designers. This is important to make sure that everyone is on the same board on why a design decision is made. This will also help to avoid any design disagreement between the team because every design is thoughtfully made with careful consideration.
With all these baby steps, we believe that we can make better future collaboration and integration between each other. The collaboration will also open possibilities to create better products.
In the end, designing a product is not just how to make it look pretty and interesting. There are also lots of engineering efforts to make the design works flawlessly. This illustrates the importance of collaboration between Design and Engineering; as we can’t live without each other in building a good product. As Steve Jobs said,
“Design is not just what it looks like and feels like. Design is how it works.”
