Exploring New Boundaries as UI Developer to Deliver a Pragmatic Innovation
Greetings! I am Denny, a product designer at Traveloka, starting my professional career as a UI Developer in late 2018. This was after my previous experience as a Front-End Designer and Full Stack Web Developer at various tech companies.
Disclaimer: The posting on this site is my own and may not represent the Company’s strategies, opinions, or decisions.
And here’s my story of taking a small step towards expanding my boundaries.
Before we go further…
What is UI Developer?
UI Developer is a professional discipline in the field of information technology, focusing on the development and design of user interfaces for web and mobile applications. Its primary responsibility is to ensure that the application interfaces are user-friendly, aesthetically pleasing, and function well across different devices and screen sizes.
UI Developers work closely with Interaction Designers, who primarily handle research and planning regarding user interaction with applications, and Visual Designers, who create high-fidelity design solutions. UI Developers take the research findings and designs from Designers and translate them into code that can be executed by browsers or mobile platforms.
Technologies commonly used by UI Developers include HTML, CSS, JavaScript, and frameworks or libraries such as React, Angular, or Vue.js. Additionally, they must have a solid understanding of design principles, web accessibility, and responsiveness.
Examining the trend of software development, a 2016 GFK Indonesia study reveals smartphone user penetration in mobile app usage at 96%, compared to 76% for mobile web, highlighting the preference for native apps over web platforms.
Narrowing down the perspective on web development, Statcounter’s analysis up to February 2024 reveals a 65% mobile versus 33% desktop market share.
How does this affect my day-to-day tasks?
This trend shifts technical demands for my discipline towards creating pages with laser-focus objectives, like emails or static landing pages, which are generally less interactive than UI implementations in either native apps or web applications.
This isn’t necessarily a negative thing, but personally, I need a creative space to continue creating more interactive experiences between systems and users, rather than a one-way communication. I’m also looking beyond my current scope to understand how the role of a UI Developer is evolving.
Another term that parallels ‘UI Developer’ in terms of technical skills is ‘Creative Technologist.’ Although this term emerged in the mid-2000s, it didn’t become widely recognized until the early 2010s, coinciding with the increasing incorporation of User Experience (UX) into the foundational design principles of many companies. What, then, is the connection between these two terms?
While there is some overlap in the use of technology and design principles, creative technology is broader and more experimental, focusing on creating innovative experiences that may incorporate various digital and physical mediums. In contrast, UI development is more narrowly focused on the specific aspect of designing and developing user interfaces for digital products.
Now I’m deeply committed to the spirit of ‘Creative Tech,’ which merges design creativity and technological implementation to spark innovations. In my role as a product designer, I concentrate on developing tools that progressively enhance work process efficiency.
Thoughts into action plan
Embracing the spirit of a ‘Creative Technologist’, I believe my clients extend beyond the end-consumer to stakeholders involved in continuous design processes. This belief forms the basis of my intention to explore further opportunities for “pragmatic innovation” that combines the practicality and efficiency of a pragmatic approach with the spirit of innovation.
The act of pragmatic innovation
In my one-on-one session with my UI dev peer (Dimas Ackyl), we began by identifying potential playgrounds closely related to a digital product designer area, focusing on Figma tools. In many aspects of the design process at Traveloka, Figma serves as the platform to display design outputs at various stages, from concept and low-fidelity to mid-fidelity designs, which are then handed over to engineers for the development process.
Let’s get a bit more technical…
For those unfamiliar with Figma: Figma is predominantly browser-based software, meaning it operates on all full desktop operating systems, including macOS, Windows, Linux, and Chrome OS. It utilizes WebGL (Web Graphics Library) for rendering (ref).
So, how can a UI developer enhance the experience of Figma? Thankfully, Figma grants developers the opportunity to further innovate through the use of Figma plugins.
The Figma plugin is an additional extension created by third parties, operating on client-side scripting. This means all computations, conditionals, etc. are executed by the user’s computer rather than on a web server. It allows for more dynamic interactions with web pages without the need to reload the page from the server.
Now we can see that developing a plugin for Figma requires web-based client scripting, which theoretically aligns well with the skill set of a UI Developer. → our working hypothesis.
To validate those, we conducted a trial by creating a simple plugin. Essentially, the Figma plugin API allows us to access all instances, components, and elements within Figma, including images, text, and even variables, and manipulate them as needed. The simple plugin created was a search function to find multiple instances by name.
Back to the concept of pragmatic innovation, creating Figma plugins should meet the needs of designers as the target users of these plugins. To streamline the design process, identifying “an issue” (start small..) that Figma plugins could resolve is essential. Following this, the UI Developer team carried out a short survey to grasp the difficulties encountered while utilizing Figma tools.
We received a response that we used as a reference for the creation of our first plugin:
“I have to copy-paste the same text across all screens, and if revisions are needed, I must ensure that the updates are correctly applied everywhere. Ideally, the single source of truth (SSOT) should be the copy document, but somehow, Engineering still uses Figma as the SSOT. So, I need to make sure that all the text in Figma is the final version.”
This problem statement highlights the challenge of integrating copywriting across Figma files and other documents (copy docs), an operational issue we believe can be resolved with a well-integrated solution.
We decided to create a Figma plugin designed to integrate copywriting from copy docs (Google Sheets) into Figma via a single copy & paste process.
3.. 2.. 1.. Action!!
To structure this initiative more effectively and ensure it progresses with a healthy level of commitment, we formed a small team consisting four named Figma Plugin Heroes.
- Project Manager (Denny): Responsible for outlining modules and processes, creating a feasible timeline, and facilitating discussions between the Figma Plugin Heroes and the client designers.
- Visual Designer (Ackyl): Charged with designing the user interface concept for the plugin.
- Front-End Developer (Wikan): Handles the graphical code implementation from the given UI design.
- Back-End Developer (Dhika): Focuses on implementing the logical framework relevant to the plugin’s functions.
The core functionality aimed at integrating values from a spreadsheet into Figma. Below is a diagram illustrating its function
While managing the basic function, we also realized that to integrate values in the reverse direction (from Figma to sheets), we could utilize a similar function. With this insight, we decided it was worthwhile to extend our efforts and successfully enable this additional functionality
In structuring the development process, we divided the above two diagrams into several sub-module functions, which we then developed and tested individually
Following development, we introduced the plugin to our target users — product copywriters and visual designers. During these sessions, we offered training on the plugin’s use and reassessed if its functionality aligned with existing workflows and preferences. After gathering feedback, we finalized the plugin and released it internally. Here’s a sneak peek of our creation.
And then what?
With the development of this Figma plugin, aside from the platform we created, we’ve also established a more uniform collaboration process between Visual Designers and Copywriters across teams. For the plugin to be used effectively, designers need to use a consistent naming system between text components in Figma and the master copywriting document. Indirectly, this standard also facilitates ongoing dialogue between related designers and enhances the accuracy of design outputs by aligning text variable naming when engineers create string variables.
1.5 months post plugin’s release, 30% of designers from related disciplines have adopted it, and we had received six bug reports that currently is being addressed. Clearly, there’s room to improve it’s adoption rate through continuous improvements.
And then what? (2)
From a broader perspective, this project initially served as a proof of concept (POC) to optimize the UI Dev’s competency that can support other designers’ needs (expand the type of user). This project has confirmed that UI developers, as creative technologists, can indeed produce more interactive design solutions within the spirit of pragmatic innovation.
The Figma plugin is just one of many initiatives a UI Developer can undertake to enhance their technical skills, and I firmly believe we won’t stop there. In an era of continuous technological advancement, there are numerous opportunities for us to explore in the future while staying on the path of a UI Developer.
Quick Prototyping, AI implementation, enhancing internal tools, governing technical processes, and much more are on the horizon. Stay tuned for updates on the career development of UI Developers at Traveloka.
I’m excited — are you? Until next time.
If you find this topic interesting and would like to be part of our team to learn and build more exciting initiatives for Southeast Asia’s Leading Travel Platform, join us at Traveloka Design.
