InVision Style Guides

Adding a feature to the designer's toolbox

View Prototype

Brief

InVision is now looking to improve their capabilities with generating and maintaining style guides. They see an opportunity there and want to help guide people into the right way of creating a style guide or design system that is durable, usable (by designers AND developers), practical, and informative.

My Role

Research, strategy, information architecture, wireframing, illustration, interaction design, user interface design, prototyping, and testing.

Solution

My solution was to design a feature that allows designers to create and maintain a style guide across teams and projects while making sure the new feature integrates seamlessly with InVision’s current brand and platform.

Client

A loved tool among designers, InVision describes themselves as “the world’s leading design collaboration platform,” providing designers with key features that help with team collaboration. Their sweet spot exists in complementing core software like Sketch or Photoshop, as well as facilitating team collaboration and handover.

01

Research

Style guides, design systems, brand guidelines? What gives?

To fully understand the scope of the project brief, I researched the differences and similarities of well-known style guides and design systems. I found out that no matter what they are called, both use basic design elements to layout a foundation for a brand or product. My goal with this research was to find out when, how and to what purpose style guides are used in UX design.

Surveys and 1–on–1 interviews

To better understand my target audience’s needs, goals and pain points when creating and using a style guide, I conducted 1–on–1 user interviews and surveyed designers, developers, project managers and brand strategists.

Research Insights

  • Designers reuse components and pull from symbol libraries when designing new interfaces
  • There isn't one tool or method that a majority of designers use for maintaining style guides
  • The task of maintaining a style guide will often be assigned to one person and one place as the single “source of truth”

02

Scenario: zoe sets up a style guide

Mapping out the journey our persona takes while setting up a style guide was a helpful way to see how her emotions can change throughout the process and how we might help her solve some of her problems. For example, a style guide is a living document, always changing and constantly being updated as products scale. How might we reassure our user that she’s using the latest version of an asset?

Define

Who are we designing for?

Based on my research, I defined who I thought would be the target audience and earliest adapter for the new feature. My Persona, Zoe, works for a growing startup and she and her team need to build a comprehensive style guide while juggling multiple projects and deadlines at the same time.

03

04

Design

05

Next Steps

Using insights gained from the usability testing of a mid–fidelity prototype, I revised how a user adds a new content block, uploads an asset, and I made the height of the header image smaller so the content below would not get overlooked.

Finally, I turned the UI screens into a high-fidelity prototype to show how interactions worked and components behaved when hovered over, pressed or dragged & dropped around the interface.

Designing the interface

Researching style guides gave me a leg up when it came time to design the UI and interactions for the new style guide feature. I used InVision’s two most recent features, Boards and Freehand as inspiration for how the new feature would look and function.

To make the style guide familiar for the user, I designed the UI elements; color palette, iconography, typography and components with InVision’s brand in mind at all times.

Low–fidelity layouts

It was important that the new feature fit in seamlessly with InVision’s current interface. I sketched rough wireframes with pen and paper and then created digital wireframes to quickly get an idea of how the new feature would fit in.

Illustrating the feature

While I was working on this project, InVision updated the graphic style of all illustrations for their brand. I created a vector illustration that referenced their new style while still being unique and recognizable as the new style guide feature.

Other projects: