Spotful Platform Redesign

At Spotful, our goal is to let users to create interactive experiences as fast and effortlessly as possible. A year ago, the platform was not there yet. Users often had to contact us to learn how to build an interactive video using the editor. For the past year, we’ve managed to progressively introduce a new user interface and cut down useless steps and features to ensure a better user experience within our platform.


The original interface was a bit confusing. The visual elements did not have any hierarchy and did not entice the users to develop good practices. To remedy this situation, we created a set of visual guidelines that represents the brand and gives users visual cues on the importance of each option.

Better Navigation


We used to have a navigation panel on the left that was displaying the different sections of the platform with icons,it was especially confusing since users would often misinterpret them as editing tools. To overcome that problem we simply moved the navigation options to the top right corner, under the user’s avatar. Just like users are used to on Facebook, Youtube or Amazon. We’ve also listed the sections with text instead of icons making it easier to understand which section is which.

An Enhanced Creation Flow

Creating a new campaign was an adventure in itself. The most essential button in the editor, the one that lets you add templates, was completely hidden. Can you guess where it is in this image?

It’s hidden on the right above your list of apps represented by a six dots icon. Not really intuitive.

The icon list is not very clear either. It displays a list of icons, but it is not telling what they do or what’s their purpose. Is this how you add the Facebook app in your video or is it how you share a project? Adding to the confusion, all the less important buttons are on top of everything else and are clearly described with text.

To resolve these problems we designed a slide panel that includes all of the elements mentioned above. There is now a clear hierarchy. The header includes all the core publishing settings such as a publish button that stands out, a switch video button and the project settings. Then underneath, there is a big “new slide” button with a “plus” sign that does exactly what it looks like.

Everytime the user adds a slide they appear underneath in order that you have added them, making it easier to go back on each individual slide. Additional features such as duplicating and renaming slides were also introduced.

Another important enhancement that we made to  the editor is the simplification of the design tabs. One for the spots. One for the slides. Before the redesign, we had up to six different tabs that were mixing up options for the spots and the slides. It was forcing users to dig in to each category to find a single option.

Saving project

There is nothing more infuriating for a creator to spend an hour building a perfect campaign only to find out that you forgot to save your project. This was a recurring issue while editing interactive videos on Spotful. Users would often forget to save their projects, forcing them to do the same effort twice. This issue was caused by the necessity to save via a save button. It was then a no-brainer to completely remove this unnecessary step and add an autosave function which is more common in online editing tools like Google Docs or Figma.

Project settings

Originally, the project settings were scattered all around the editor. Even in the project settings there wasn’t any hierarchy. There was two columns that were not grouping properly grouping the options. We improved the experience of the project settings by separating the options in three sections. One for the title and the description, a second one for collaboration options and a last one for the publishing options.

Dashboard

We also refined the dashboard to give users a better view of their projects by displaying each project in a card. In each card, users can publish, edit or view the analytics for each projects. We have also added a search box that filters the projects making it easier to find the one you are looking for. One of the most appreciated enhancement is probably the “new project” button that create a sentiment of excitement before users jump into a new project.

Onboarding

Even with all the changes that we have made, we wanted to make sure that the first time a user tries the platform, they know what is the next step and the best practice. Following that idea, we designed a straightforward workflow helped by a tooltip system that notifies users about the different features in the platform.

Next Steps

In the near future we will bring new features to the Spotful platform including a new media picker and file manager, a bounding box and guidelines system, and so much more.

We hope you will enjoy the new changes that have been brought into the Spotful platform and we are looking forward to read your feedback and comments. Sign-up to our newsletter if you want to learn more about new features.





Spotful Loading animation plays during video load.