Research & Discovery
Wireframes
Prototyping
User Testing
Product Design
Interaction Design
Dev Support
Let's Dive In!
Meet the Original Builder
The Tiled Builder is the workhorse that enables our customers to create engaging pitch decks that win over customers and generate hundreds of thousands of dollars in business. Now…let’s address the elephant in the room – it’s not winning any beauty contests. And, if we’re being completely honest with ourselves, It’s not the most user friendly interface out there either.
Let's take a look at a few of its shortcomings…
Limited page background styling options
If you want to style the background of your microapp you can really only apply a background image. Want to choose a background color, gradient instead? Tough luck.
Inconvenient properties flyouts
When a tile is selected, a flyout containing all of its properties appears. These flyouts tend to be finicky and can get in the way. Not to mention the properties within them aren’t that robust.
(Almost) non-existant layer management
When creating a page with a lot of layers, the users only tool to mange those layers is to right click and send the layer to the back, or bring it to the front.
Tile icons that are kind of a snooze fest
The driving force behind our product are the tiles you use to create your microapps – and the icons that represent those tiles aren’t pretty.
Uninspiring editing capabilities
The properties available for each tile can be a little underwhelming. For example, these are the only options available for modifying an image tile. Not very inspiring is it?
Confusingly inconsistent UI components
Both of these toggles exist in the 1.0 Builder and both are visible at the same time. There is no functional reason why they look different from one another.
Theres much more to gripe about but, lets get to solutioning.
Wireframes
How do we add layer management to the UI? Where does the page panel go? Is there any value in exploring different placements for these elements to try and find a better home for them? Do we try to do a big departure from typical canvas-based editor UI’s to differentiate ourselves? How do we handle the tile properties? How can we improve existing features? I didn’t have these answers so I sought to find them by rapidly throwing stuff on the wall to see what stuck.
I emerged from this wireframe exercise with two compelling concepts. One is a more conventional approach, while the other strays from the standard "builder interfaces" we typically encounter. Although I have a preference, the decision ultimately rests with our users. It's time to get their feedback.
Prototypes & User Testing
To test which layout would best suit our users, we created two dynamic prototypes with different layouts, but identical workflows. We then gathered 6 test subjects and lead each one through a user testing session. Starting with Prototype A, to gauge their understanding of the layout, each test subject was asked to locate core UI elements without hovering or clicking on anything. Then they attempted to complete a series of six tasks while we observed. Once finished, they were asked to do the same with Prototype B. We concluded the each tests with a series of questions for our test subjects to learn about their experience with each prototype.
Prototype A
The safe choice. This layout closely aligns with standard UI conventions found in numerous creative applications and builders out there today. While it retains some elements from the original builder, we've intentionally left a few things out and embraced creative liberties to introduce a fresh perspective.
Prototype B
The radical departure. Designed with the intention of putting the spotlight on the microapp design and minimizing all other UI elements to create a non-cluttered, focused UI that is easily digestible at a glance. The goal is to enable users to quickly scan the interface and grasp it's core functionalities in just a few seconds.
Prototype A
It didn’t win any innovation awards but, it's familiar UI layout seemed to strike a chord with most users. They had an effortless time navigating through this UI and were easily able to identify and understand the purpose of each part of the interface.
Prototype B
While Prototype B received a lot of compliments, it was viewed as a revolution of the current builder rather than an evolution. The experimental UI conventions prompted a lot of questions instead of seeming intuitive to the average Tiled user.
High-Fidelity Explorations
Fueled by burgeoning excitement and armed with newfound knowledge I wasted no time getting to the fun part of this adventure. I had the general layout figured out. The next step is to nail down a visual style and define how all the core pieces of the UI were going to look and behave. Like the wireframe explorations, I started rapidly iterating on ideas. Below are a few of the iterations I did regarding page & subpage management, tile iconography, UI colors, and advanced feature definition.
The Final Product
Theres a certain point in every design project where the vision becomes clear. Months of wireframing, experimenting, iterating, and testing had all lead to the moment where the pieces finally fell into place and we caught the first glimpse of the future of our company.
The New Aesthetic
The word I tried to keep in mind while designing the new builder was “simplistic”. Daily, I tried to remind myself that the goal for this was to create a UI that is not intimidating and is easily digestible at a glance. I wanted to reduce or eliminate the appearance of the standard “panels” that are typical in interfaces like these. Instead, I used space and visual hierarchy to create divisions between sections instead of needing to rely on hard vertical or horizontal lines. Many of the components have thoughtful micro interactions built into them that reveal more functionality when you hover or click on them. The reason for this was so we could surface the most important info to the user upfront and while still giving them quick and easy access to additional properties if needed. All told, this project was no easy task and is the result of over a years worth of work. I’m extremely proud of what we’ve created and it couldn’t have been done without the tireless efforts of our (very small but very gifted) product engineering and QA teams.
Now, let’s take a look at how I improved upon all those Builder 1.0 imperfections previously mentioned in this case study…
Beefed-up background options
Huzzah! No longer do our users have to place an image tile of a gradient on the bottom layer of their microapp to fake a background gradient! They can add background videos too!
Enhanced properties panels with more features
The new resizable properties panel is now docked to the right side of your screen and contains a fully revamped set of properties. We even went and peppered in some new features here and there.
A layers palette. Finally!
Re-order, duplicate, rename, show, hide, and delete layers from our shiny new layers palette.
Behold! Icons with personality!
Would ya look at this? Tile Icons with a bit of flair and personality! Gone are the days of paging through bland, uninspired, monotone icons.
Improved Hover Interactions
Previously, creating hover interactions was too time consuming. The manual configuration options felt overwhelming to the average user. The solution? Pre-canned hover effects. Point. Click. Done.
Introducing: The Polaris Design System
An all new builder calls for all new components. We had a rare opportunity to totally gut our previous system and craft a new one that is perfectly suited to our new vision.