InVision

Feature ENhancements for easier access and Better usability

My Process

Research

RESEARCH GOALS

We want to answer these questions through research:

• What do people use InVision for?
• What are some pain points when using InVision? What is missing from InVision?
• What do people want to add to InVision’s prototyping tool in terms of its features, flow, or functions?
• What is good and bad about InVision – in comparison to other prototyping tools?

RESEARCH METHODOLOGIES

• Secondary Research & Competitive Analysis – to see industry standards, trends, inspiration
• Surveys – to gather quantitative and qualitative data from larger sample of users

Competitive Analysis of leading prototyping tools

Empathize

User Survey

I surveyed 14 new InVision users using Google Form, and asked questions regarding their usage, pain points, needs, and wants of InVision's prototyping tool.

Main Insights:

"I always get confused by the bottom menu when I'm editing."
"...Not knowing which view I'm in (building vs. test) [in the bottom navigation]"
"Navigation menu is counterintuitive to me." 

"While building the prototype, some of the features can be confusing to use."
- 6 out of 13 participants

"Slow," "time consuming," "clunky"
"I want to be able to apply repeat steps on other pages with one click rather than manually doing it on 15 other pages"

"It can be a lot of work to link up different interactions / page flows for complex designs."
- 5 out of 13 participants

Define

Business & User Goals

User Task Flow

Ideate

From user research, it was clear that users needed:

• A clearer global (bottom) navigation
• A new or enhanced feature to make prototyping between screens faster

As a solution, I did the following:

• Made the current bottom navigation less confusing with more intuitive icons and indicators
• Enhanced the 'hotspot template' (their useful, but rather hidden, feature to apply repeated interactions to multiple screens) to be more noticeable, by making some tweaks to its current elements and flow

These enhancements would ensure faster prototyping and less confusion for users.

Design

Fitting everything smoothly and consistently within InVision -

Since it is a feature enhancement to the existing, I made sure all the UI elements were either being reused from current elements or were created with the exact same look and feel. This would ensure good usability and learnability for current users.

Prototyping

Test

Affinity Map from Usability Testing

The usability tests (remote & moderated) were done with users who've used InVision's prototype. I gave them the link to my prototype with the redesigned hotspot template and bottom navigation.

Final Designs

Bottom Navigation Redesign (close-up)

Before

After

Conclusion

My InVision feature enhancements add some minor tweaks to its current bottom navigation and hotspot template. I wanted to declutter and simplify both of the designs, as the user research showed that the current one had too many extra features and steps and confused users.

I also edited the current hotspot template window to be more intuitive with a new call-to-action that would trigger the "select screens" dropdown.