An Engineer in a Design Team
How the UX Engineer role put colors in my black and white life.
Hi guys, what’s up! Hopefully, it’s not too late to wish you a happy new year!
Before we start, let me introduce myself. I’m Ventry, a fresh Computer Science degree graduate. As a Computer Science student, code was a big part of everyday life.
They say the world is black and white. I was one of the people who live in the black and white world of code.
Before graduating, I was a Freelance Backend Developer for my campus websites. I was also a Front End Developer Intern in an e-commerce, I even once was a Full Stack Web and Mobile Developer in a company. My real black and white life went along as I study and work.
Writing some code lines, designing database, parsing data from a database, saving data to database, providing and maintaining the security, and building CRUD apps are some of the things that I do almost everyday.
My black and white days may be busy, but I still had time for a professional crisis. Am I in the wrong major? Can I deal with this black and white world for the rest of my life? With programming languages? Frameworks? Databases? Security? It felt like I was about to explode!
Personally, I prefer working on parts that computer science students or developers don’t usually prioritize, namely web design — over UI/UX (colors, themes, interaction, etc.)
After going through various journeys and long thoughts, I finally found a job that fits me. A few months ago, I was thrilled to be officially deemed a UX Engineer at Blibli. In this post, I will share a few of the responsibilities I’ve taken on in my role as UX Engineer, plus some insights for anyone considering a similar career path.
An introduction to UX Engineer
This unfamiliar title attracts many curious questions from my friends. They mostly want to know what a UX Engineer usually does and of course, how to be one.
UX Engineer is an engineer who sits between the design team and the front-end engineer to help facilitate collaboration between design and engineering.
UX Engineers use their skills to focus on the design and interaction of UI components instead of the layer between frontend and backend.
An important element to point out in UX engineering is we have two “hats”. Each hat represents our focus — a design hat and an engineering hat. But regardless of title or hats, we are ultimately the link between design and engineering.
Why did I choose UX Engineer?
That’s simple! I’ve been in a developer position so I know pretty much how a developer’s mind work, I know how to code; and the most important thing, I really like anything colorful, I have a strong visual sense. That’s why I feel like in the UX team I can combine what I can do and what I like together. If you can relate to this, then UX Engineer could be an ideal position for you too.
Here’s a peek of the 7 dragon balls a.k.a the members of UX Engineer team at Blibli.
What does a UX Engineer do?
The job description of a UX Engineer varies greatly from company to company. Here I will talk about my role as a UX Engineer at Blibli. Based on my experience so far, these are the 3 main areas of responsibility:
1. Developing and maintaining design system
We call ours Blue.
Blue (Blibli Unifying Elements) is our design language system (DLS). Besides my other responsibilities as a UX Engineer, I’m also a part of the Blue Team. We make sure to keep Blue as a living and breathing source of component library coded using HTML, CSS, and JS in the VueJS Framework.
As a set of reusable components, standards, and documentation, our Blue DLS holds an essential role in ensuring the consistency of all products, improving visual quality, aligning design, development processes, and increasing productivity.
My fellow UX Engineer recently wrote more details about Blue. Check it out if you want to know more about it!
Journey to deliver consistency and flexibility through Blibli design system (Blue) by Vanessa Ardelia
2. Bridging communication
We have the Blue Design System developed, now how to use it?
Our job as UX Engineers doesn’t stop at developing and maintaining Blue, we also help developers to implement the components available in Blue. We may be a part of the UX team, but being there to help developers solve the difficulties they face when implementing Blue is one of our most important tasks.
With a sense of visuals and advanced knowledge of code, UX Engineers are equipped enough to come up with the best solution by considering design, code effort, and performance. For this reason, UX Engineers are required to establish an effective communication between designers and developers.
Though it may sound like we’re the most practical and technical one in the UX team, “UX” is still in our title, we couldn’t leave the magic spell behind. What’s the magic spell?
It’s EMPATHY.
The most important skill to have in UX is understanding the target users and then designing according to what will truly benefit their life. UX Engineers draw from empathetic observations to communicate with designers as advocates for both the user and the development team. Empathy helps us put ourselves in another team member’s shoes, which can improve collaboration.
3. Slicing
Designer: “I need a component with a click, touch, hold, and swipe design and animation like this.”
Developer: “Hmm… it could be done but looks like it would take up quite a large size because it requires additional libraries so it will affect the performance. We need to relook it first before implementing the component.”
This scene is common in our day-to-day discussions with designers. And this is where a UX Engineer can unleash a superpower to make everything possible, we call it slicing.
What?! What is there to slice?
Slicing is like translating designs into consumable code for custom components/templates outside of Blue DLS.
We slice the designs that the designer wants to deliver so the developers only need to adjust the slicing component by calling the data and synchronizing it to the slicing result.
However, all of the custom components or templates resulting from our slicing are still built by following the Blue rules, and all of the animations are handled by CSS codes, so the consistency and performance will be maintained as well.
This sliced component will also be treated as a reusable component that can be reused not only for developers but also for designers. If a new requirement come up with a similar purpose as the component, the designer can use the similar design component, and when it is handed off to the developers, this won’t be a problem anymore as the developers already have the code for the same component.
In addition to providing custom components, as we sit close by the other team member from a different function, we also take care of the visual details to achieve pixel-perfect results by doing pixel-perfect slicing.
Undeniably, UI plays a very important role in a platform. The first thing user see is not related to functionality, but to the visual elements. When the page is rendered, the first thing they see is how the page looks like, whether the UI is clean, neat, attractive, or chaotic. After they see the page they will interact more with the page. UI bugs are often noticed by the user earlier compared to functional bugs, so we need to pay attention to these UI bugs as well.
That’s pretty much what I can share from my days working as a UX Engineer.
I’m happy to say that I finally found a role that combines design and engineering. Not only it works well to me, but this role can meaningfully improve how the UX team works together. So happy to be part of an amazing team that is always supportive and innovative. I can say that many colorful challenges are solved with joy!
If you’re interested in applying for a full-time position or intern, Blibli is currently hiring! Send your resume to recruitment@blibli.com and get the chance to work with our PM and UX team and create our own unique stories.
