I discovered how crucial it is to be well-rounded as a software engineer by learning additional skills, such as UI design. I believe every engineer should be able to pick up new skills when facing unique problems, even if they need to ramp up to a new domain. That continuous learning mindset is what can set you apart in our industry.
Having worked on several small projects, I quickly became aware of the need for good UI design. These projects included mobile and customer-facing apps, which required intuitive user interfaces to engage and satisfy users. But my initial experiences at implementing UI design effectively were challenging to say the least.
In late 2018, a small mobile development team contacted me to help with an app for learner drivers. They heard about my proficiency with high-performance graphics APIs such as DirectX and OpenGL.
The team was experiencing vertex buffer issues and badly-implemented vehicle physics. But those were not their only problems — their UI design was a mess!
Discovering a messy and unoptimized UI
Soon after deciding to help the team, I visited their offices to see the troublesome project firsthand. And things were worse than I expected after witnessing a running demo of the app. I was shocked by the constant flickering of the vehicles and frustratingly low frame rates.
The text was blurry, and icons and menu items were inconsistent. Unfortunately, the team consisted entirely of engineers and was underfunded, and couldn't afford to have a dedicated UI/UX designer on board.
The UI didn't only look awful but was causing noticeable performance issues. Every time any UI elements appeared on the screen, all visible objects would lag temporarily. I suspected that the UI elements were making more draw calls to the GPU than necessary.
Implementing UI design best practices
The first order of business was to fix the draw call issues. I rewrote parts of the code so that all the UI elements would be loaded and batched into texture memory as efficiently as possible. Then, we profiled and tested the app and immediately logged a significant performance boost.
But that wasn't enough, as we needed to fix the look and feel of the UI, which was clunky and non-intuitive. Since we were all inexperienced in design, we decided to go with a simple and minimalist UI. We also borrowed several best practices and methodologies used by app and web developers.
The team lead created a UI flow diagram and wireframes to map out user interaction from the welcome page to every screen in the app. This allowed us to create a dynamic and structured UI that surpassed our expectations.
The benefits of learning UI design
These improvements saved the project, and users were happy with the finished product, leading to drastically decreasing user churn, which is a common problem with mobile apps.
Moreover, UI design is becoming increasingly important in many areas. Good UI frameworks target the humble terminal, while visual scripting tools rely on effective UI. And if the Metaverse becomes mainstream within the next five years, UI design will evolve further, impacting a wide variety of tech sectors.