InVision Style Guides
Adding a feature to the designer's toolbox
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.
Research, strategy, information architecture, wireframing, illustration, interaction design, user interface design, prototyping, and testing.
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.
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.
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.
- 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”
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?
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.