InVision

Digital product design, workflow & collaboration

InVision

Founded in 2011, InVision is the digital product design platform powering the world’s best user experiences. InVision gives digital product teams everything they need to effortlessly navigate every stage of their process, from ideation, design, prototyping, and design management.

More than 5 million people use InVision to create a repeatable and streamlined design workflow; rapidly design and prototype products before writing code, and collaborate across their entire organization. That includes 100% of the Fortune 100, and brands like Airbnb, Amazon, HBO, Netflix, Slack, Starbucks and Uber.

InVision is a fully distributed company with employees in 25 countries around the world. The company has raised more than $350 million in funding from leading investors including Accel, ICONIQ, FirstMark, Tiger Global, Battery Ventures, and Spark Capital.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of InVision.

History

I've joined the team at InVision in January 2016. This was the time when Photoshop was still the dominant design tool and InVision was the only tool on the market empowering designers to prototype their static designs as rapid prototypes without a single line of code. This was a huge innovation, as there were no other options on the market before that.

Soon after that Sketch entered the market and started to gain traction in the design space. A purpose based screen design tool, that completely disrupted the market. Yet InVision continued to hold the crown in the prototyping space as it added more features and started to move more into the enterprise territory as well as supporting Sketch files.

After that InVision launched Craft. A suite of plugins for Sketch and Photoshop. It took the market by storm. Essentially what it did, it granted superpowers in terms of plugins to the most popular and dominant design tools. Plugins included the ability to work with live data, incorporating stock photography, freehand for easy markup and the most import one, prototyping natively inside Sketch.

Couple of years later InVision announced the acquisition of Brand.ai, a leading platform for managing design systems and introduced InVision Design System Manager (DSM). The teams combined efforts have resulted in the definitive tool to help every product team create their own design system and innovate at scale like the world’s most design-forward companies.

Design System Manager (DSM)

InVision Design System Manager (DSM) is the perfect home for any organization's design system. It provides a space to create and maintain a shared visual language, bringing designers, developers, and stakeholders into a unified workflow.

Overview

Every digital business faces a crucial challenge when they begin to scale—how to ship better products, faster, while still creating consistent user experience on every screen. It's incredibly hard to do.

In 2017 InVision acquired Brand.ai, a leading platform for managing design systems, and introduced InVision Design System Manager (DSM). The teams combined efforts have resulted in the definitive tool to help every product team create their own design system and innovate at scale like the world’s most design-forward companies.

InVision DSM made it possible for every product team to create and maintain a design system at scale—allowing teams to maintain a consistent user experience across every digital interface. The company’s design language and library can now be managed and shared from the InVision platform—and accessed and updated in design tools such as InVision Studio and Sketch, as well as a web view.

My Role

I have joined the DSM team in the early stages of the acquisition, before the official public announcement in October 2017. At the time the term "design system” slowly started to circulate around the design industry, which has later become a trend that couldn't be ignored. The opportunity to be part of a team that builds the tool to help product teams create their own design systems, became a fundamental and essential learning curve into the world of design systems.

As a designer I worked alongside product managers, engineers, customer facing team and many other who contributed to the DSM.

I worked with project managers to uncover insights into customer needs and goals, balanced business goals and prioritized features for launch and beyond.

I created frameworks and prototypes to share the vision, design principles and content strategy. I helped realize ideas, gain alignment and drive decision making.

I designed and presented work to gain buy-in from stakeholders and executives and many other internal teams through the lifecycle of the project.

I lead multiple team and cross-team initiatives, drove conversations and found opportunities to move beyond the defined role and executed beyond planed vision.

I lead the majority of the core web experience, building out large-scale interaction patterns for how users add content to documentation and customize the site’s look and feel.

I worked closely with engineers to improve the collaboration process between designers and developers, make sure they use a common shared language and vocabulary and that the designs and features are implemented correctly.

New DSM

To deliver on our customer expectations we have redesigned InVision Design System Manager (DSM). After doing a more thorough market analysis, understanding customer needs and gathering feedback we have redefined our product goals. New DSM brings a lot new compatibilities with Sketch libraries, allows for a more flexible and rich custom documentation and delivers on better performance improvements and long-term stability.

Craft

In 2016 InVision built a "separate" venture InVision LABS to help the team grow and create products to build a better future for their users. This is how Craft was born. A free suite of plugins for Sketch and Photoshop that took the market by storm.

What Craft essentially did, was granting superpowers in terms of plugins to the most popular and dominant design tools. Plugins included the ability to work with live data, incorporating stock photography, freehand for easy markup and the most import one, prototyping natively inside Sketch.

My Role

I've joined the Craft team in the early release stages and helped shaped and drive some of the user experiences behind Craft Sync, Craft Prototyping and Craft Manager.

I worked alongside product managers, designers and developers. I created frameworks, prototypes, conducted research and drove design sprints.

I lead the Craft team as a product manager for a period of two months. A opportunity that was very influential and valuable in terms of insights into role of product manager. How to drive the product, the team and meeting both the user and business goals.

Craft Sync

The Craft Sync plugin enables user to sign in to the InVisionApp account in order to create new InVision prototypes and upload screens, assets and metadata from their Sketch and Photoshop design documents.

Craft Sync provides a more faster, integrated and more reliable way of sending design files rom the design tool to InVision. This enabled users a more frequent and integrated syncing experience that did not obstruct the designers workflow.

Before Craft Sync and the plugin integration a lot of the syncing and extraction of Sketch and Photoshop files happened on the server-side and not client-side. Such process involved too many risks, a lot of latency and sometimes even a down time. To make InVision look like part of the workflow and provide the best experience for our customers with perfect fidelity experience, the syncing and extraction has been moved to the client-side.

Craft Sync has profoundly changed the customers behavior on how they create prototypes and upload screens from their design tool. Within just weeks of launch we saw a higher upload frequency and regularity.

Most of the product development on Craft Sync was done using agile approach and all the features and development were adjusted based on the learnings on customers, emerging behaviors and newfound opportunities.

Craft Prototyping

Designing and prototyping are intrinsically linked. Decisions in one inform the other. However there is a large gap in the way those two assets are created which creates a fragmented and inefficient workflow.

Before Sketch prototyping even existed, Craft Prototype was the first tool to introduce prototyping directly inside Sketch. Users were able to add hotspot to any layer in their Sketch project and then link to an artboards with a desktop or mobile gesture and create transitions by fading, sliding, rotating, and more.

When the prototype was ready for review, user could sync the screens to InVision and preview the linked prototype on web. Craft Prototype has brought unrivaled context and continuity to designers workflow.

Craft Manager

Craft Manager is a Mac application responsible for installing and updating the Craft plugins. In conjunction with Craft Sync, it also lets user publish prototypes directly from within Sketch or Photoshop as well as providing access to user team prototypes right from the desktop.

Craft Manager exists to provide a coherent ecosystem for plugins which interface between InVision and Sketch or Photoshop. It provides services to the user in form of a consistent and single point of communication for updates of plugins within the ecosystem.

Inspect

Inspect simplifies the design-to-development process. With Inspect, teams can access measurements, colors, and assets for desktop and mobile prototypes. Get pixel-perfect comps, export assets, and many more.

Since Inspect is integrated into the users workflow, the design files are saved once and all the assets are updated everywhere. Designers no longer need to export to multiple tools or annotating design files.

Properties and assets can easily be extracted so engineers can work more quickly and efficiently. All properties are extracted directly from the design source files from anywhere in the prototype. Inspect provides a single source of truth during the entire product design lifecycle.

Problem statement

Design and developer collaboration is a challenging problem and there are many opportunities how to keep them in sync. None of the tooling philosophies that exist today are enforcing that behavior. All they do is try to do similar or close to a similar things. Unless the tooling from design to development all share the same settings or agreed on setting, there is no real "bridge” between developers and designers.

There are a lot of compromises, both technically and visually after the handoff happens. Usually the first common issue happens in the process soon after the design in either static form or prototype hets handed off to the developers. Developers have to dissect the design in their minds back to whatever code base they are working on and transform it from the piece of artwork into a living interactive experience. The less prescriptive the design is, the less likely it will end up as a result that fits the initially imagined goal.

The goal

How do we keep the designer and developer separated in the hope they can come together more cleanly in design and development. How can we eliminate the unnecessary steps of specifying a design in one language and translating into another by enabling both design and development to share a common language.

These is where Inspect comes in. A point of collaboration for designers and developers. An automatic, added value to the InVision workflow. With Inspect engineers can quickly stub out an early prototype or build a pixel perfect implementation with the confidence that they're developing from the team's single source of truth.

My role

I have been the first designer on the Inspect team and part of the public release in November 2016. Inspect was my first large initiative after joining InVision therefore I still sometimes refer to it as "my baby”. Out work for Inspect was a real team effort and consisted out of lot of research, customer interviews, planing and much more. A lot of features and development were adjusted based on the learning on customers in private beta, emerging behaviors and newfound opportunities.

I worked with project manager to define the Inspect roadmap, set the objectives, KIPs, technical risks and define the assumptions that needed to be tested.

I created frameworks and prototypes to share the vision, design principles and content strategy. I helped prioritize features, gain alignment and drive decision making.

I collaborated closely with engineers to make sure the designs and features are implemented correctly, while at the same time learning and understanding the development process and the tool that we are building for them.

The outcome

Inspect has been a large source of growth for the business, especially in the enterprise market and continues to be a point of discussion when talking to customers. The launch was very well received by customers and showed high user retention.