Vision Strategy

With a small team of contributors and stakeholders from product, marketing, design, sales, and engineering, I led and produced a vision video to empower an organization to deliver on the company's vision of becoming a global creative platform.

Reading time: 5 minutes     Design lead, creative direction, video production - Shutterstock 2018

When to do a vision video

Mature companies find themselves at a crossroads when they are faced with a combination of design and tech debt, a siloed product culture, and little to no long-term views on product and technology strategies.

In our case, to accelerate future growth, Shutterstock needed to unify their platform, tear down product and feature silos, and devise a two-year plan to deliver on the company vision of becoming a global creative platform. This was a moon shot for the company and it was challenging to know where to start.

Often, successful companies employ powerful imagery and video to bring their vision to life. Without it, It’s easy to lose sight of why everyone’s work is important to the company’s success.

I saw this as an opportunity to create a vision video and presented it to Shutterstock at a company update. The response was overwhelmingly positive and set us on a path to make the vision a reality.

Getting started

Your video needs to be a vision of how the company sees itself in two years if everything goes as planned. This is an opportunity to take all of the qualitative and quantitative customer data insights you have collected from customer support, sales, UX, and product to show what your company would look like as a market leader.

You don’t have to get everything right, and the vision will still act as a force multiplier. It is just as transformational when a company starts thinking optimistically about its future.

From our own customer insights, we learned that Shutterstock E-Commerce and Enterprise experiences were 95% the same. This was a catalyst for building our very on Shutterstock Design System, that enabled us to rapidly build a Single Shutterstock, to serve all customer segments. Also, we needed to show how users could upgrade their experience through content tiering and seamless upsell paths from a single to a team license, and from a team to Enterprise license, using self-serve methods. Lastly, small, medium, and Enterprise level business’ creative teams workflows are disparate. This video would show how Shutterstock can provide end-to-end collaborative workflows on web and native platforms.

Step 1 — Framing the problem

If your company is facing a similar problem, it’s important to identify the barriers stopping you from delivering on customer needs.

The cold hard truth is that we built Shutterstock 7 times. Duplicating work efforts reduced our speed to market and operational efficiency across the business. 

For us, our code lived on three separate front-end platforms, there was no single UX/UI language or guidelines, and a mix of disparate data models and back-end services.

Ultimately, succeeding would enable us to properly segment our customers and follow them across their life cycle; opening up our ability to personalize their experience and merchandise relevant products to them at the right time and place within their customer journey.

Step 2 — Structure

If you want to sell your ideas and inspire others, telling a story that connects with your audience on an emotional level, is key. With a vision video, your audience will most likely be product teams who are passionate about their customer needs, so find a way to touch on each part of the business.

Taking a methodical approach using UX methodologies will help you to document all of the things you need to cover in the vision video.

I created user flows, personas, task analysis, and feature analysis to develop the structure for the video script.

Step 3 — Storyboarding

Storyboarding can be a powerful tool, just ask Pixar. For a film, they use storyboarding as an editing tool before production starts. It is so expensive to create films and with animation, they have one chance to get it right.

Toy Story 20th Anniversary: Joe Ranft Storyboard Pitch

During the storyboarding process, seek out inspiration from other product videos for music style, transitions, composition, and overall style. Pro tip: You can find inspiring music from PremiumBeat, who “provides exclusive, high-quality tracks and sound effects for use in new and traditional media projects, including videos, films, apps, games, and television programming”

InVision V7 product video

Meet iPhone X by Apple

Step 4 — The script

This is the planning stage for video production. A script can be used to choreograph screen transitions, voice-overs, the video sequences, UI animations, and music tracks.

You can also use it as a tool for getting stakeholder alignment. This is a good time in the process to share what you plan to create before any substantial amount of time is invested in producing the video, by sharing the storyboard and script.

Now that you have the structure, storyboard, and script in place, I find it helpful to iterate on these materials during video production. Even though you have carefully planned out the video, there are always things you didn’t consider or you will find more exciting ways to compose and edit the video sequences.

Vision video script with sequences, transitions, and UI interactions

Step 5 — User interface Design

None of these designs existed and were created from scratch using Sketch, Principle, and ScreenFlow. The screens and animations needed to feel like a real product so I devised a workflow to build one video sequence at a time in a consistent and cohesive way.

Pro tip: It’s important to keep your Principle files as simple as possible. Each principle file should include only one user interaction or a single task flow.

The workflow included three parts. 1.) creating high fidelity designs using Sketch and 2.) importing sketch designs into Principle to animate and 3.) recording the principle animations and interactions as clips to be used for video editing.

Static designs created in Sketch using the Shutterstock Design System

Sketch designs animated with Principle

Step 6 — Video editing

I decided to go with ScreenFlow since it’s a great tool that’s easy to learn, has the right features, and allows you to create high-quality videos quickly. Adobe’s After Effects is the go-to solution but comes with a steep learning curve. With limited time, resources, and budget, ScreenFlow was the right choice for this project.  

Post production work including stills, principle animations, music tracks, and screen recordings

Conclusion

The vision video was a great learning experience and allowed me to help the company envision the future of their products in a way they hadn’t considered before. With careful planning, you can tell a compelling story that will rally an organization, improve morale, and boost innovation.

A video is better at storytelling than text because humans are naturally pre-dispositioned to process and retain visual information over text. Use this to your advantage when it’s time to pitch your ideas and reboot a company’s innovation pipeline.

Up next

Design Systems A contract between design and engineering  to advance UX and reusability

DesignOps A new way to operationalize and scale design across an organization

Lifesaver Getting past the business of life with a little help from the on-demand economy