Spotful: A case-study on developing new experiences

Spotful Screenshot
Spotful across platforms

Introduction

Spotful started as an experiment inspired by an art gallery and neuroscience.

The intent of the original product was to allow people to virtually tour an art gallery — from wherever they were in the world. A video playing as the background would pan slowly throught he gallery, allowing people to click/tap on the subjects in the gallery to view information and close-up images.

The foundation was a background video, with interactive elements overlaid on top. One could scroll through additional text, or even go through the purchase flow without ever leaving the video experience. All this worked by embedding various media sources in frames displayed on top of the video, and triggered by hotspots placed within the video.

Challenges

Working on a brand new experience for the web, we needed to draw inspiration from things people were used to while simultaneously adapting these patterns to a new and intuitive form of interface. It was a relatively unique concept for a web app to interact on the axis of time.

One of the major challenges, was that these campaigns were to be disseminated across the web, and across formats — including mobile, desktop, and ad networks. This presented a wide range of challenges and required a lot of graceful degradation and heavy use of responsiveness to be factored into the design process.

The biggest challenge of all was the overarching end-customer experience. While humans are well used to online video - our creative customers wanted to go beyond just a simple button archetype. How would we ensure the viewers knew they could interact? How could we entice further engagement?

Solutions

Developing an intuitive interface that really drew from the "drag-and-drop" simplicity of things like Mailchimp's email designer all on the axis of time was a fun challenge. Over a few weeks we developed various designs, but our most imfamous and my personal favourite was the interaction selector. (See some early prototypes here and here).

Part of making these campaigns work >across the web required a lot of responsive thinking. Designs needed to gracefully degrade as the views got smaller or wider. Some campaigns would be viewed in portrait on a mobile device, while others would be pre-roll on video platforms. Through some extreme adaptation and clever use of device-focussed media queries I was able to create an incredibly adaptable experience that changed form across devices.

On portrait mode on a mobile device, the view would be split — view at the top, while interactions appeared on the video. Frames would be displayed underneath the video, usually taking up the bottom two-thirds depending on the aspect ratio of the video. This allowed viewers to easily reach and interact with the embedded content.

On landscape mode (desktop, ad networks, pre-roll) active frames would overlay 90% of the video view, allowing room for viewers to intuitively tap back into the video experience.

To entice engagement, we designed, tested, and introduced contrasting shapes and colours. The most effective result turned out to be a good old white circle - which we used as the default form of hostpot. With a slight shadow and subtle enty/exit animations we were able to casually draw the consumers' eye to the action and entice them to engage. Eventually, we introduced a series of subtle animations, cues, and shadow effects to elicit more active engagement.

Benefit

Overall, the platform provided an intuitive campaign-building experience where a creator could simply paste a URL, and drag/drop their interactions on top of the video at the time they wanted them to appear.

To work with the multi-platform formats, we rendered different schema files with the projects. This allowed campaign creators to easily embed the same URL into ad networks or their social media feeds and get the same results and consistent experiences across the board.

Customers were able to create campaigns using already existing marketing assets in a unqiue way that would engage customers in a brand-controlled experience.

Result

Successes

It took us over a year of developing experiences and designing campaigns before we started to get real traction with the platform. The most interesting aspect was the use-case for pre-roll video. This allowed companies to add more interactivity and potential engagement to traditionally static video content. Over the next couple years we saw a solid adoption of our technology and campaigns created on the platform were viewed by tens of millions through large-scale ad distributed campaigning.

With the addition of incentives, we saw clients use Spotful to drive up to 10% engagement rates, driving up registration and sales significantly.

Failures

Technical and design-pattern debt slowed us down quite a bit for the first year or two, but as the team became tighter and the vision brightened we were able to adapt and work better with what we had. Our inability to bring our video-hosting solution up to par with industry standards ended up costing the company and the overall experience quite a bit in the long run. For a while, high-definition videos were being distributed to mobile experiences resulting in choppy viewing experiences and errors — something we should have designed for from the beginning.

While the product team was able to move quickly and adapt to new use-cases and smooth out customer experiences, we had a lot of failed UI experiments - especially in the beginning. My team and I learned quickly about the importance of information architecture. Don't hide the important stuff!

Conclusion and proof

Unfortunately the main marketing site for this project is no longer functional, and the company was taken over and is still running somewhere, supporting a few contracts, though I'm not able to access any of the active projects.

Artifacts of Spotful design

Proposed updates to the creation experience, simplifying creation of elements

Prototyping the mobile experience