InVision – Ahmed Saber

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.

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

INSIGHT

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

FEATURE

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

FEATURE MATRIX

DESIGN

SKETCHES

WIREFRAMES

TEST

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

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

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.

Familiar look and feel
Add to projects
Easily export assets

Download multiple file formats
Copy code
Collaborate
Control who can
Edit/View

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.