InVision

InVision

INTRO

INTRO

CLIENT

InVision (Case Study)

 

PROJECT
Feature Addon

CONTRIBUTORS
Courtney Leonard - Design Director

 

MY ROLE

Lead UX/UI Designer 

CONSTRAINTS 
Two weeks
Existing design language

THE PROBLEM 

Designers and developers are unable use design elements from one project to another.

THE SOLUTION

Create an accessible universal style guide to be used across different projects.

InV Banner 2

RESEARCH

RESEARCH

GOALS

Identify product demand for a universal style guide in InVision’s Inspect tool. 
Identify target market. 
Identify areas of user interest and needs for a universal style guide tool.
Identify user pain points with the current local style guide in InVision’s Inspect tool. 
Identify specific features necessary for designers and developers for a global style guide tool.  

SECONDARY RESEARCH

  • Many direct and indirect competitors with similar functionality and features.
  • Some apps provide a shared asset library, but not universally over different projects or for style guides.
  • Some provide a free individual account or a paid subscription.
  • Differences mostly in tiered feature and pricing.

PRIMARY RESEARCH

  • Stakeholder Interviews: Conducted individual interviews with designers who have used InVision before and those who have not.
  • User Surveys: I created a user survey and distributed it amongst a group of UX designers.  

FINDINGS

  • Many designers are currently using Zeplin as a way to handover design and assets to developers and to develop a style guide due to free account and easy to use UI.
  • All participants were interested in having a universal style guide library and agreed it would be highly beneficial.
  • Most designers are using Sketch for designing and InVision for prototyping.
  • Most users are creating and storing style guides in Sketch, and copy those for other design projects.
  • Some users have had difficulty with using InVision’s Inspect Tool.

DEFINE

DEFINE

InVision Define Phase

INSIGHT

  • Multiple teams = Multiple tools
  • Multiple “final” versions
  • Easy to use and understand
  • Share with developers
  • Collaboration options
5 Arrows

FEATURE

  • Cloud-based (Craft/Import)
  • Live universal updates
  • Consistent with current design
  • Export asset or code
  • Permission to edit/view + comments

FEATURE MATRIX

DesignLab – Feature Matrix
InVision Feature Matrix

DESIGN

DESIGN

SKETCHES

IV Sketches 1

WIREFRAMES

IV Wireframes 1

TEST

TEST

Usability Testing Meghna

PROTOTYPE/USABILITY TESTING

I used a combination of Invision and Skype to conduct remote usability testing.

FINDINGS

  • The average total success rate is 67%.
  • Navigation and Sub-Navigation tasks was 100% successful.
  • Finding dropdown button saw a 100% failure both times.
  • Downloading an asset had a failure rate of 100%.
Affinity Map

AFFINITY MAP

Using notes from my usability testing I developed an Affinity Map which helped in finding trends between different testers.

FINDINGS

  • CTA button for assets on the style guide page needs to be more visible.
  • Font size and color need to be improved for stronger readability.
  • Universal Style Guide design fits well with InVision’s overall design.

ITERATE

ITERATE

SECOND ITERATION

Utilizing the insight from my usability testing and affinity maps, I reiterated my mockup and added new screens, refined my UI, and improved on my user experience. I also viewed the application using a mobile device and found several areas where readability was low due to font size, weight, and color and adjusted accordingly.

InVision 1-min
  • Familiar look and feel
  • Add to projects
  • Easily export assets
InVision 2-min
  • Download multiple file formats
  • Copy code
  • Collaborate
  • Control who can
  • Edit/View 
IV Double

SUMMARY

SUMMARY

Using all the insight from my research and define stage I was able to develop a new feature that will allow designers and developers to access and use style guides developed for one project across many projects. This will help decrease time for both teams by reducing the time and effort in creating one for each project. The feature also helps during handover, where the developer can see and download elements from the prototype and from a previous style guide.

Using all the insight from my research and define stage I was able to develop a new feature that will allow designers and developers to access and use style guides developed for one project across many projects. This will help decrease time for both teams by reducing the time and effort in creating one for each project. The feature also helps during handover, where the developer can see and download elements from the prototype and from a previous style guide.

Other Works

SpredfastMajor Feature Release

Recipe HeroiOS Application Design

ClinimedResponsive Redesign

ZeitWebsite + Branding (Case Study)

© 2018 AHMED SABER