How We Redesigned the Soapbox UI and Editing Experience to be More Intentional

Since we launched Soapbox last June, our goal was to simply get a product into the world as quickly as we could to see if there was actually something to this whole 1:1 video business — and as it turns out, there is! We’ve learned so much over the past year, like who are primary users are, how they’re making video, and what we can do to make it easier for them. As our team reflected on all of these lessons and thought about where we wanted to take the product in the future, we decided it was time to give Soapbox a fresh coat of paint and maybe even make a few tweaks under the hood — and that’s where I came in!

As the designer on the team, I started thinking about what wasn’t working for us and how we could make the product better. To start, I wanted to make sure that everything was looking sparkly and clean (our product does have the word “soap” in its name, after all). I also identified a few ways we could improve feature adoption, while reducing cognitive load in the editing process.

In this post, I’ll give you a look behind the curtain at my design process and talk a little bit about why these changes were so important for us and, ultimately, how they’ll benefit you! Let’s dig in.

Integrating the UI with the brand

The Soapbox brand — including the logo, colors, and big bubbly blobs we affectionately call ’suds' — was created by Eric and Joe, two other designers on the team here at Wistia. Looking at the app dashboard, I realized the use of color was not in the spirit of the brand that they had crafted. The color palette fluctuated between icy, with dark blue text on a light blue background, and Eastery, with bright yellows next to muted fields of teal.

To create a more unified experience and get everything closer to the pastel-pop spirit of Soapbox, we clearly needed to make some changes.

The biggest of these was getting rid of background colors and changing the main text color to an inky gray. It may seem counterintuitive to remove color to make things more visually pleasing, but as is common in design, less was more. With a monochromatic foundation, I was freed up to use color in a more impactful and meaningful way. The “a-ha” moment really occurred for me when looking at the Performance page. I was struggling to find a compelling way to highlight our marquee numbers — Videos Watched, Average Engagement, and Conversion Rate.

“It may seem counterintuitive to remove color to make things more visually pleasing, but as is common in design, less was more.”

Initially, I tried putting these numbers inside of colored boxes to make them “pop.” I thought that using these colors to highlight information would be a great way to draw the user’s attention to what was important and to reinforce our branding. Unfortunately, as you can see below, the result ended up feeling muddy, heavy, and ultimately — quite bland.

However, when I started to simplify how colors were being used, things started to fall into place. Having that monochromatic foundation meant there weren’t tints of color everywhere, which meant any smaller flashes of color were more meaningful and essential. So instead of boxes, we decided to use lines.

In this case, a simpler design actually helps put more emphasis on what’s important — the numbers and thumbnails. If you’re a busy sales manager wanting to check in on your weekly metrics, you want the experience to be as quick and easy as possible, without causing an increase in cognitive load.

This design philosophy, simplicity punctuated with flecks of pastel color, is now carried out throughout the entire app. The “magic carpet” in the main navigation bar (the line that lets you know which part of the app you’re in) now changes color depending on what section you’re in. Buttons in the video creation flow are now themed by color to reinforce a sense of place and wayfinding. The goal is for the app to express the fun, jovial nature that Soapbox carries throughout its entire brand, and also to be incredibly simple and easy to use.

Improving the creation and editing flow

We also recently made some big changes to the way that you edit, customize, and share your videos. When we were first developing Soapbox, our main focus was on speed. The design hinged on making sure all of the product’s functionality was available up-front so that you could actually directly edit the page that your viewers would see. In this regard, it was great.

As the product has grown, however, we’ve received a ton of useful feedback from our users and have honed in on what our main use cases are. This allowed us to evolve the product with more clarity and produce a new creation flow that is more focused, organized, and expandable.

The crux of this change is that the three phases of creating your video have been split up. Edit, Customize, and Share has been separated out into their own sections. Now, when you’re done recording a video, you’ll land on the Edit page.

This page contains the same edit bar and editing functionality as before, but all of the other features live in their own unique section. By keeping this page focused on editing, there’s a much clearer sense of purpose — think about it like closing all the tabs in your browser so you can focus on the task at hand. This separation also allows us to ensure your video is completely uploaded before any other changes are made, reducing the number of errors that can crop up in the app. As with the UI refresh, once again we learned that less is more.

“By keeping this page focused on editing, there’s a much clearer sense of purpose — think about it like closing all the tabs in your browser so you can focus on the task at hand.”

Once your video is uploaded and edited, it’s now time to move on to the customization flow. The look of this page is a big departure from what we had before, but should still feel familiar to long-time users of Wistia’s video marketing application.

Changing the title and thumbnail, choosing a player color, and adding a call to action are all still on the page but are now neatly organized in a side panel. Clicking a section will reveal the same controls you had before and allow you to make the same customizations. As with the changes on the edit page, the goal is to keep a focused experience, but a secondary benefit is future-proofing for expansion. Creating a more structured system for these options make it much easier to include any new features without having to worry about how they will fit into the interface.

One other facet of this new design that we really love is the new preview window. There was some tension in the previous interface where people weren’t sure exactly what their viewers would see when they shared their video. We added this browser-within-a-browser to instill confidence that your viewers wouldn’t see anything you didn’t want them to.

Now that your video is beautifully edited with the perfect player color and accompanying call to action that will keep the conversation going, it’s time to share it! The interface of the Share page mirrors the new interface of Customize page, with all the same benefits of focus and expandability.

“The interface of the Share page mirrors the new interface of Customize page, with all the same benefits of focus and expandability.”

One detail that I really love, and that our senior engineer Kim worked hard to perfect, is the transition from Customize to Share. When you click the Share link at the top of the page, everything shifts to the left revealing your share options on the right.

We wanted to create a feeling of progression, whilst keeping everything grounded. Here, the preview window acts as an anchor, reassuring you that you are still in the same context, while the direction of the movement signals that you are at the end of the process. The overall effect is a sense of meaningful physical space as well as the feeling of concreteness.

Moving forward with more intention

The Soapbox team here at Wistia is super excited to have these changes out in the hands of the people who use our product — it’s the culmination of months of design and engineering work. With these new changes, the product really feels like a manifestation of the values of Soapbox with a more focused experience for our users. We’re establishing a strong foundation on which to keep building features that will make your videos more professional, beautiful, and successful.