Feature of the month: Theme Builder

Written by Chandra Bergmann, Developer Advocacy

The importance of good design

Blood, sweat, and tears go into the design of everyday things. Everything we build, from tea kettles to houses, must be crafted with both aesthetics and functionality in mind. The best designs interweave the two seamlessly. An object’s appearance, in a hundred subtle ways, should tell users exactly how the object is intended to be interacted with. The shape of a tea kettle lid can lend itself to pulling rather than twisting. The style of the handle on the front door of a house indicates how the door can be opened.

Blending style and utility is even more imperative when crafting the user interface for digital experiences, because digital interfaces do not differ physically. It is difficult to mistake a coffee thermos for a chair when the coffee thermos is not big enough to comfortably sit on. It is far easier to mistake a poorly designed fitness app for a social media website when both might appear on the exact same screen.

Mistaking one application for another, however, is not a frequent occurrence. Most web apps, even ones that are poorly designed in other ways, tend to be branded with distinct color pallets, fonts, and logos. This is an important part of application design: you never want a user to forget what app – or, perhaps more critically, whose app – they’re using. But good branding is only part of designing an application well. Well-designed apps also need to make it clear how users can immediately interact with the interface directly in front of them. 

When designing how an app appears to users you have two major priorities: you want your app to look unique so that users can clearly distinguish its overall purpose and brand, but you don’t want it to look so bonkers that users have no idea how they’re meant to use it. UI components – things like buttons and input boxes – should look distinct from the same UI components associated with other apps, but not so distinct as to be unrecognizable.

Designing in Airkit

It was with these concerns in mind that we made Web Controls in Airkit. Web Controls are the basic building blocks of a web app’s UI; they’re things like buttons, input boxes, and progress bars. The base appearance of each type of Web Control is based on common visual shorthand used universally among prevailing applications, and familiarity with this shorthand makes it easy for users to recognize what each Web Control is and how it’s meant to be interacted with. However, while the functionality of each Web Control dictates its foundational appearance, Airkit also makes it easy to build upon that foundation and create all manner of unique motifs and styles.

In Airkit Studio, critical stylistic components of your web apps, like colors, fonts, and shapes, can be altered with a mere click or two of a button. These changes can be seen in real-time as you make them, allowing Airkit Studio to serve as an experimental playground as well as a pragmatic app-building tool. 

In Airkit’s Activity Builder, one of the many Builders within the Studio, it’s possible to make these sorts of cosmetic customizations to every individual Web Control that appears within a web app. However, just because it’s possible to make every visual component of your web app entirely unique doesn’t necessarily mean that you’ll want to, or even that you should – as we’ve touched on, maintaining some stylistic consistency makes for a more cohesive user experience, allowing you to establish a recognizable brand as users become more familiar with the precise design of your UI. You want your application to look unique in relation to other people’s, but you also want it to look consistently like itself.

This is why we at Airkit created customizable Variants for Web Controls. 

A Variant is a set of styling properties for a specific Web Control, similar to a class in CSS. If you’re not familiar with CSS classes, you might compare Web Controls and Variants to dinnerware. Plates, cups, and forks are all like different web controls: they each have a particular function, and this is reflected in aspects of their appearance. However, not all plates look the same. A square red plate and a round blue plate are both capable of serving as plates and are simply styled differently. If you are deciding whether to set your table with your blue plates or your red plates, this is like choosing between different Variants of plates.

Every web control has associated Variants: cosmetic variations that appear differently but function identically. Variants can be edited in Theme Builder and then used as defaults when adding new web controls. For instance, within a single application, you might create two Variants of a button: a rectangular one in red, and a round one in blue. Any changes made to existing Variants also apply retroactively: existing web controls previously styled according to the old default will immediately take the form specified by the new default. This allows for consistent branding throughout the entirety of each user’s Journey, and it also makes it easy to see how different combinations of colors, fonts, and graphics look together.

​​

Once you’ve finalized a Theme, either by experimentation or by copying an existing style guide, you can apply it to other apps simply by saving it as a JSON and uploading it into another app’s Theme Builder. Not only can you ensure your individual applications provide a consistent visual experience, but you can also apply that exact same experience to every other app you build.

And it’s so easy, you don’t need to be a front-end web developer to do it.

Customer look: using Theme Builder to make a great first impression

Building digital experiences that look and feel like your brand should be a priority. According to the Young & Rubicam Brand Asset Valuator, companies that increase their brand’s differentiation have about a 50% higher operating margin on average compared to companies that allow their brands’ differentiation to decrease. 

For Bench Accounting, America’s largest bookkeeping service for small businesses, making a good first impression on potential customers through branded digital experiences is a top priority. 

That’s why Bench’s Marketing team partnered with Airkit to build a lead generation flow for prospects. Using Airkit Studio’s Theme Builder, Bench created a custom application and form that aligns with the company’s approved look and feel. 

Bench’s two new and improved workflows are as follows.

Experience A: small business deductions consultation signup

1. Prospective customers answer a series of questions about their business to help determine if they are eligible for small business deductions.
2. Following completion of this short form, prospects and/or customers are provided suggestions for eligible expense deductions.
3. Bench is able to intelligently follow up with these prospective customers and register them for a consultation.

Experience B: trial sign up and lead routing

1. Prospects and/or customers visit a select webpage to initiate their trial account. 
2. Airkit integrates with Marketo to validate whether the visitors are new or existing accounts. 
3. Page visitors are prompted to complete a form collecting basic business information in order to qualify the lead for a first call. 
4. Leads are then routed to Sales for further qualification.

The most notable thing about this digital flow is that it was not built solely by Bench’s engineering team but also by the Marketing team. At Airkit, we talk quite a bit about the benefits of low-code in empowering both developers and non-developers to construct great customer experiences, and it’s true. Bench’s engineering team initially owned this trial workflow, but when other high-value projects took priority, Sr. Manager of Inbound Marketing, Dennis Pavlina, turned to Airkit to help him and his team to maintain the existing journey themselves. 

Pavlina was not only able to build the initial customer journey in just a few weeks, but he was also able to iterate upon it quickly based on collected data in order to optimize the experience for future prospects. He explains “We were able to leverage Airkit’s digital experience platform to build out a great customer onboarding experience in less than a month. Airkit’s platform has over 50 building blocks and preconfigured templates which make it easy to build and test workflows in weeks instead of months.”

Trying Theme Builder for yourself

No matter your background, Airkit makes it easy to try your hand at app design. Here’s how to get started:

1. If you don’t already have access to Airkit, sign up for our free trial here. (For more on getting started, check out our Quickstart Guide.)
2. Decide on a web app to make stylistic changes to. If you’ve already built or otherwise have access to web apps in Airkit, feel free to use any one of them. If you haven’t, check out AK101 for a step-by-step walkthrough of how to build your first app in Airkit.
3. Get a feel for the impact different Themes can have on an app’s appearance by applying a pre-built Theme to your own app. This tutorial walks you through how to upload Themes into the Theme Builder, and you can find existing Themes to play around with here as well as on Github.
4. Create a Theme of your own! This document covers what you need to know in order to design your own Variants.
5. Once you’ve made a Theme you like, export it. Now you can apply it to any applications you make in the future, just like you applied pre-existing Themes in step 3!