Airtable Database
Machine-generated Logos from Airtable
Using Airtable as a database
In partnership with Staples Print Services, Makr launched a white-labeled logo design product in November 2018, where users can select and customize a machine-generated logo based on their unique choices. To gather the information needed to generate these logos, the user first enters their company name, business category, and selects a style. A collection of 18 logo designs are then shown, where the user can either customize the design or download it directly. The product was created and launched in under 4 months. Since launch there have been over 1300 logos created.
The Problem
It was important that we had complete control over the logo design results and the logic for creating them. The assets that were used in the logos (colors, fonts, and icons) needed to be catalogued and tagged, in order to tie them to the user’s earlier inputs. Our Art Director also needed to be able to add, modify, and remove assets quickly so that we could adapt the tool to our user’s behavior. With a small team and limited resources, we didn’t have the time to create a complex admin tool to manage this data.
The Solution
I researched, prototyped, and proposed a solution where we would use Airtable as an interface to manage the data, and the Airtable API in order to compile the data that is needed to create these custom logos. It would provide a reliable, easy to use, and friendly interface for managing the many different design assets that are used. I in tandem worked with our engineering team to augment the API with our own custom logo creation logic which is used to match the filtered results in Airtable API to the user’s choices.
As the product would allow the user to edit the logo in the builder, I also adapted the Makr Logo Builder to be a white-label experience, where it was modified to have Staples branding.
Airtable Database and API
I created an Airtable database to record the different icons, colors, fonts, business categories, and design styles.
HTML Prototype
I created a prototype using HTML and jQuery to test the feasibility of using the Airtable API to filter and match a user’s choices (business category and style) to the design assets that are recorded in Airtable. I then created a modal in order to view the matching icons based on their recorded visual weight as compared to the selected font’s weight (light, regular, or solid). The team used this to preview the different logo combinations and see what the results would be without having to develop any additional code.
The Logo Results
After determining it was feasible we chose to use Airtable to manage the logo design assets. It provided a clean administrator dashboard and reduced the need for Our engineering team then worked to cache the Airtable API results in our database, work with our Art Director to create the different logo template layouts, augment the API results with custom logo rendering logic, and develop the frontend of the Staples branded logo design product. There are 18 logo results displayed at a time, and the results change based on company name length, business category, and style chosen.
The user can then choose to edit the logo in the builder or download it directly.
A Staples Branded Logo Builder
If the user chooses customize their selected logo in the logo builder, the logo opens in a Staples-branded logo builder. In order to reduce the time to launch this product, we decided to white-label our existing Makr Logo Builder for the Staples audience. I adapted the Makr logo builder to have the Staples branding and worked with my Product Manager and Lead Product Designer to finalize the designs.
