Research & Discovery
Wireframes
Prototyping
User Testing
Product Design
Interaction Design
Dev Support
The Old 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 see what our users are saying…
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
Complex microapps expose a major usability gap: there’s no simple way to manage layers. Users often waste time manually reordering elements just to reach the one they need.
Outdated User Interface
"It kind of reminds me of an old Microsoft application…". Potential new customers were put off by our dated UI. We know it's the functionality that matters but, it's looks weren't making a good first impression.
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.
Research &
Discovery
The research and discovery phase is one of my favorite parts of the design process. It’s where I define my perspective on the project, both aesthetically and functionally, by diving deep into the product’s landscape. This stage includes auditing the existing experience, aligning on scope, studying competitors to understand industry standards, and curating a mood board that will help set the visual tone.
Competitive Analysis
I documented over 12 our competitors’ products, focused on their UI conventions and identified patterns worth adopting and others to avoid. I even explored products from non-competitors to gain a broader perspective.
Uses a contextual properties bar in conjuction with a docked panel for faster editing
Animation and transition support
Has a good solution for Personalization
Lacking a layers panel
No support for subpages
Properties panel is collapsed by default
Many options for adding assets. Whether its uploading, AI, 3rd Party…they kind of have it all
Creating a page doesn't just make a blank page. It loads it with a text object thats already selected and ready to edit along with layout options.
Resizable page panel to maximize canvas space
Can't avoid linear navigational path due to lack of page-to-page linking
Supports page transitions, individual object transitions, and the ability to manage the order in which they are executed
Large page thumbnail make it easy to identify each page
Ability to see all pages in a grid view
Uninspiring UI overall. I understand its a utility but, it lacks personality
Uninspiring UI overall. I understand its a utility but, it lacks personality
Ability to start from scratch or from a template/layout
Horizontal page panel makes efficient use of traditionally unused space in canvas editors
Supports Collaboration
Has layer management but, its hard to find
UI is not digestible in a single glance. It kind of feels all over the place
Jack of all trades, master of none
Toolbar and the layers palette both occupy the left hand portion of the screen, leaving the top free and uncluttered.
The media panel temporarily occupies the same space as the layers panel when selected. Nice, efficient use of space.
Expandable/collapsable sections in the properties panel
The timeline autoplays every time I open a file, even if it's empty
Page background styling options are limited to colors
No reliance on heavy dividers. Instead, they use spacing and padding to create visual hierarchy
Love the floating panels – and I especially love how they float over content when you zoom
The pan/zoom capability is something that would be handy for our builder
Tab bar at the bottom of the screen to easily navigate between the core pillars of the builder
Can be challenging to parse the UI - Though this is forgivable because its a completely different kind of app than our tool
Moodboard
I was already building a vision for this new UI in my mind, but I hadn't decided on a direction yet. It needed to be a departure from the typical canvas based editor UI's I explored during the competitive analysis. I needed to gather some inspiration.
Interesting Elements
Collapsed Toolbar
This is very clean but id be concerned about hiding it up front. plus, i feel like only want the layers to appear here…maybe the pages too?
File Name/Back Button
Simple and clean
Preview Button
Clean. We'd need to add Publish here as well. Maybe comments/collaboration as well.
Where does zoom go? Top right? Bottom Right? Bottom Center?
Simplicity! I love it!
I'm in love with how simple and easy to digest this layout is
Floating UI Panels
Similar vibe to the first UI in this list. Floating panels, focus on content, not heavy on dividers. Creating visual hierarchy using spacing and padding.
Pages or States Visualization
This is a little over the top but, I saved this screenshot because the visual on the bottom could potentially be explored for pages and states
Top and Bottom Floating Toolbars
Once again, I'm finding myself appreciating the floating panel concept. I haven't seen to much of this style and it could be fun to experiment with.
Possible Placement for Pages Panel
To free up the UI for the addition of the layers panel and the docked properties panel, we could maybe do a horizonal page panel?
Lo-Fi
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
Every design journey reaches a point where the vision crystallizes. After countless iterations and tests, we arrived at that moment. The moment when everything clicked and the future of our product took shape.
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 we 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.