In 2022, I worked with the team at Universe on a new AI-powered logo builder. Universe, an app that lets anyone build websites right on their phone, made it easy to get published. But many users ended up with brands without logos—tasked with solving this problem, I designed the interface for a brand new feature that lets anyone create unique, meaningful logos.
Research
With traditional tools used to create logos there exists a tradeoff, between straightforwardness and expressiveness. In many ways, emoji keyboards are the simplest form of iconographic communication—with just a simple tap anyone can pick just the right symbol. While it’s certainly easy to pick from a list of glyphs, you can only get true flexibility with more professional vector design software.
To succeed, my design for Logo Builder had to enable the best of both approaches: incredible ease of use while still facilitating varied expression.
I realized that everyone is already familiar with the perfect solution to this problem: sketching. It’s something that we all do, whether it’s doodling in a notebook when you’re bored or making a quick diagram on the back of a napkin. It’s intuitive and approachable, while still offering endless possibilities.
If I could transform a quick sketch into a polished glyph, which could be further styled and aligned with text, the logo creation process could be dramatically simplified. With machine learning models, like Google’s AutoDraw, brush strokes can be instantly converted into clean vector glyphs, enabling this incredible feature.
With my direction clear and technically feasible, I organized the logo creation process into four steps:
Developing this approachable workflow helped me to create a user-centric interface, rather than just present an unfiltered collection of tools.
I sketched out some low-fidelity designs to figure out how the feature should work and feel.
Adopting the Design System
Universe is an app acclaimed for its design—that means any new feature had feel just right—employing existing patterns and components where possible. Through rigorous studies of the existing Universe design system I familiarized myself with the existing visual language of the app.
Typically complex website edits are achieved with palettes, each unique for a given task. I designed a new set of palettes that I’d need to implement Logo Builder, as well as identified the existing palettes that would be appropriate to carry over.
Take 1: Linear Flow
My first full iteration of Logo Builder relied heavily on my four step process.
I designed a new section in settings where the flow could appear as a modal interface via four distinct cards. While staying true to the Universe design system, the interface was made clear through new elements too, like a novel glowing tab bar I designed.
The heart of the flow was the sketchpad. A subtle paper-like texture creates a compelling experience, and simple controls encourage casual interactions. The interface facilitates iteration and creativity, not overt precision. With a simple tap, the users sketches are transformed into crisp vectors.
Once a user’s logo was created in settings, users could use it later on their website’s canvas.
While successful in delivering a compelling sketching experience, this iteration had some critical issues. This interface was too linear—it locked the user into the four steps a bit too strongly, making it cumbersome to move between the four steps. This issue was only compounded by the fact that logo editing was only surfaced in settings—out of context from the website’s canvas. And it didn’t allow for more varied kinds of logos, say ones with two glyphs or just with two text layers.
After reflecting on my own design process, and talking over the problem with another designer at Universe, the solution to this problem became clear: take inspiration from the existing “grid editor” used in the rest of the app.
Final Design
After iterating, I developed a far more flexible interface. I promoted Logo Builder to a top level tile in the canvas. Editing begins with the grid, encouraging experimentation with three tools: text, glyph, or photo. Users can tap and drag to add elements to their logo, and jump between editing and previewing seamlessly.
Each tool summons the appropriate palette when selected. The glyph tool let users sketch and style, just as before.
And when editing is complete, users can return to their website’s canvas, without missing a beat.
Outcomes & Learning
The final design lets anyone create a stunning logo right on their phone. Solving this problem pushed me to work with new machine learning technologies and carefully craft an interface that feels unified with the rest of the Universe app.
Logo Builder feels natural, instinctive when you use it. For a creative tool, that is a bar I am proud to have achieved.
I’m grateful for the experience I had and the things I learned while working with the team at Universe. Discovering how to build a tool that facilitates creativity taught me so much, about design, and my own creative process. With Logo Builder, I had to allow for the same kind of creative freedom I expect from the tools I use for my own work.
