Throughout the pandemic, low-code blossomed on the tech scene to support an increased need for application development. These requirements largely arose within traditionally non-IT departments and roles. With the need to rapidly digitally transform, many groups sought new technologies to enable innovative apps and workflow automation. But, not all code generators allow a truly custom look and feel, which could hurt user experience and the company image.
The term “citizen developer” has been used as a blanket term to describe new folks utilizing low-code platforms. We hear a lot of talk about digital-savvy employees in divisions like accounting, marketing, or administrative using visual programming models to generate new apps. But what about design teams? What is the UX designer’s role in the low-code app development process?
I recently met with Jason Beres, Head of Indigo.Design, to see how UI/UX designers typically engage within a low-code/no-code development environment. According to Beres, modern design style guides are more than just colors and typography. These days they must consider interactive UX elements too. Yet, most low-code development platforms are stuck in rigid themes that don’t consider UX elements. In a world of low-code generation, organizations will require greater flexibility over custom styles to sustain their corporate image.
The State of UX in Low-Code
“User experience is really what drives application success,” said Beres, who has been focusing on the UX side of developer tools since the ’90s. Executives care about driving adoption and success, especially as small apps arise out of nowhere to disrupt behemoths.
Beres notices a low-code revolution occurring across the tech landscape. Yet, in too many cases, he’s found that not enough UX forethought is given upfront. “So many applications today fail because the developer just starts building,” he said. Bringing in more stakeholders from Day One and involving iterative user testing throughout the design process is crucial for creating functional, pleasant app experiences.
Historically, low-code has been focused on the application developer, enabling application development through WYSIWYG editors. “The biggest problem with low-code tools is they include features for graphic designers, but they don’t include features for UX designers,” said Beres. Without these instilled abilities, it may be challenging to achieve useful, usable, and desirable results.
The UX Style Guide
The modern design style guide is more than just text and colors. While having a consistent color palette and typography is still necessary for establishing an identity, modern application designers must now consider UX elements as well. Interactive details, such as the state of a div when hovered, the swipe effect, or responsive dimensions, all help mold a 21st-century brand experience.
Standardizing such elements is necessary to bring Atomic Design to fruition. Coined by Brad Frost, Atomic Design reduces design into the smallest of UI elements — buttons, drop-down menus, and text fields are like atoms and combine to form molecules. Defining and standardizing on these atomic parts can bring overall design equilibrium.
“Style guides are very detailed now,” described Beres. “Consider the Tesla brand experience — it goes well beyond just the branding of colors, styles, and themes. It’s very different than the brand experiences of other cars.”
To realize an end-to-end brand experience, organizations require more than standard templates. But, low-code platforms rarely offer such customization, notes Beres — most platforms don’t want you to use custom themes; they would rather you pick from a handful of templates. These templates, akin to Powerpoint skins, could severely limit the UX design control.
Design-to-Code Fulfills the Promise of Low-Code
Code generation platforms will often produce a useful app with poor design, or create beautiful eye candy with bizarre functionality, noted Beres. To avoid these troubles, Beres advocates a design-first methodology. The goal of design-to-code, as he calls it, is to back up design decisions made early on with actual production-ready components.
Design teams often start with local tools for interactive prototypes, such as Sketch, Sigma, or Adobe XD. In a traditional development process, once an app is specked out, the designer exports a mockup and sends it to the developer. The developer will often use an eyedropper tool to find hexadecimal points for colors or download fonts — essentially manually coding the visual elements as an approximation of the designer’s intent.
However, this old-school handoff is cumbersome and could use updating. “The design to develop handoff is where you lose all your profit and time,” said Beres. “If you have a dev team hardcoding HTML and CSS, you’re missing the boat, you’ll get bypassed.”
A design-to-code approach could eliminate tedious trade-offs between design teams and developers. However, for this to be worth it, a design-to-code system must generate usable, production-ready HTML/CSS, TypeScript, and sync with a source control system. It’s only then that it can fulfill the original promise of low-code, said Beres.
It Starts With UX
“There is a process that drives successful apps,” said Beres. “It starts with user experience.” Quality software requires quality UX forethought, whether hardcoded, produced with a low-code platform, or wholly generated without code. Yet, the ability to control UX is still maturing within the low-code/no-code spectrum.
Within low-code/no-code development, the designer has an elevated role. However, one potential downside of low-code development is being stuck in themes, limiting end-to-end brand experience. Plus, many low-code tools don’t offer much for interaction and usability testing, notes Beres. The convenience of low-code shouldn’t come with a UX sacrifice. Thus, when selecting low-code application development utilities, consider if they provide fine-grained control over UI elements and how easy it is to test end apps within production environments.
Design-to-code iterations could streamline development and bring cost savings. In the next 3-5 years, Beres predicts more applications will be developed around design-driven products. “The days of the developer saying ‘I only hand-code my CSS’ are limited,” said Beres. “The pendulum is going to swing.”
