Álvaro Alcaraz Delgado
Feb 19 · 9 min read

inVision Build Mode – Add a feature Project

inVision

Welcome to my project! My name is Álvaro and today I will write about the inVision Build mode feature for inVision’s mobile app, my project during the 4th week of the Ironhack bootcamp.

As I always said, please, do not hesitate to leave your thoughts and comments. Everything will be more than welcome.

What I did to prepare myself for this project? Organization first.

Overview

As an Ironhack student I was asked to incorporate the inVision Build Mode in a smartphone app in a way that was usable and according to the company’s defined look and feel.

InVision is a prototyping tool created for designers, by designers. It allows you to quickly and easily create interactive mockups for your designs. When you’re ready, you can share these mockups with your team or clients. It makes presenting your designs a breeze, and is much more effective than sending out a .PDF or screen shots. You can discuss the mockups right inside the app by leaving comments, that are connected to a point on the screen that you are discussing.

Introducing inVision — Vimeo

Aspects to consider

Timeline: 4 days

Task: Build mode for inVision Mobile App

  • Who are the users and what are their goals? How can you quickly learn about them? How does the assigned scenario fit into their day?
  • What’s the hypothesis about how the new functionality will change their behaviors?
  • How should the new functionality tie into the navigation of the product? You are expected to try variations.
  • I must be able to defend my design decisions based on research and testing.
  • The company already has an established aesthetic and defined look and feel. How will you maintain this in your hi-fidelity prototype?

My weapons:

After organizing myself I started deciding witch tools I would use during the project to achieve my goals.

· Competitive & Heuristic Analysis

· Survey Lean Canvas

· Interviews + Survey

· Google doc & slides

· Crazy 8’s

· inVision Freehand to create the prototypes

· Sketch to design my prototype

· inVision / Principle to animate

THE PROJECT

Day 1:

Before starting with the project I decided to have a look to the market and also to inVision desktop version to have a better understanding about how the company make great user experiences.

Marvel, Flinto, POP & Principle logo’s from left to right.

Competitive Analysis

Once I downloaded most of them on my device and try them and gathering the results from the survey I finally found that Marvel (and POP) they are my target.

And as I know, because of the data obtained from the survey, there are a lot of marvel users. So, I decided to dig into it and see how the app works.

How Marvel’s Build Mode works?

The Marvel App was really easy to use having multiple options. You are able to add a link, destination, transition or erase an existing link. Also gives you option to erase the screen, duplicate it, make it the first of the presentation…

Heuristic Analysis

A heuristic analysis is used to identify a product’s common usability issues so that the problems can be resolved, consequently improving the user’s satisfaction and experience and raising the chances of a digital product’s success overall.

Marvel is the one of the main competitors of inVision having a website and an app with a build mode in it.

Flinto and principle don’t have this features, having to connect your smartphone to your computer to use them.

POP (bought by Marvel) and has the same look and feel as Marvel.

Define user methods:

The survey

Valuable information gathered from the survey, like what apps do the professionals use and why, if the users use or not prototyping apps and what they think about them.

Decided to do some interviews to some users that use mobile apps when it comes to prototype and focus on inVision users as the survey wasn’t enough to get a problem statement.

My main goal for the interviews was getting more information about the problem this users can encounter by using this apps.

Problem Statement

After gathering all the information obtained from the survey and different interviews to get the information I putted all together on post-its and organized everything. After that I discover the following:

  • Most part of the users of my research use Desktop version because there are no similar tools to inVision.
  • Some users didn’t know about the existence of different mobile apps when it comes to prototype.
  • Some users targeted in my research think inVision App is a limited weapon.
  • When using mobile apps the users had to go to the desktop version when it comes to big projects because they think is slow and annoying and most part of users targeted in my research think is a useful tool for quick tasks.

After my discoveries we can rephrase the problem statement:

“inVision users need a way to create and modify their prototypes in smartphones because the existing tools are not inVision friendly.”

So after defining the problem statement I started thinking in the creation of a user persona that can help me during the following phases of my project.

User Persona

Jane Hunt is a passionate UX/UI Designer of 29 years old from New York currently working as a Freelance. She loves to travel, stick to her schedules and she wants to have as much apps as possible to do task while enjoying her holidays and don’t lose time going to grab her laptop.

She is very passionate so she even work during her holidays. Her main problem is when it comes to prototype as she is currently using inVision to prototype on the desktop version and there are no other similar tools to use and she is not always carrying her laptop.

Goals:

  • Jane wants to have a fast way to make quick modifications of an existing project or create quick ones.
  • Jane wants to find the correct mobile app knowing (Similar to inVision).
  • She wants a fun/new way to show their prototypes.

Frustrations:

  • Spend more time than needed in prototyping or wasting time going to grab her laptop during holidays.
Jane Hunt — My User Persona

Day 2:

Define user flow with added feature:

When the second day started I began sketching on paper some ideas from inVision that I wanted to maintain to keep the design and look alike aligned to the brand and according to Jane’s needs.

After that I went back to my competitive analysis about Marvel to have a fresher idea about the app and functionalities.

Once done a little bit of retrospection I decided to use the crazy eights as a tool to came up with the design idea.

First Crazy 8’s

And I created the first prototype by keeping the ideas showed on the picture.

And after doing it for several times and having an idea of who the first prototype will look I decided to use “Freehand” of inVision to get a better feel of how inVision tools can be use. It is a really useful (and fast) tool to create your own digital low-fi prototypes with a hand writing look alike. Really similar to other tools like Sketch App and with the same key commands.

I moved forward to the testing phase with some inVision user.

First prototype using inVision Freehand

Testing phase:

As I already said I wanted to know about inVision tools and wanted to make something really easy to use like Marvel, because most part of the people interviewed are inVision and Marvel users. So I decided to use freehand to create a quick prototype and Marvel mobile app to prototype it.

Scenario: Imagine your are Jane and now you are at the beach (on holidays) and realize that you need to quickly add a hotspot to one of your existing prototypes.

After doing some tests and according to the users I realize that my product looked a lot like Marvel’s app, I was making the menus pretty similiar to them and the initial screen was confusing because of the two options so I decided to have a look to the existing inVision app and try to make it feel easier to use and brand-focus.

inVision Mobile App

So after redesigning the app according to inVision Mobile App I came up with a second version of my prototype and I started testing it with the same tasks.

After the second prototype and because of the second feedback I received, because the user clicked on the project instead of the 3 dots I added. So I decided to make the project clickable and I created a 3rd prototype.

Once a finished testing the 3rd prototype and as I didn’t had a lot time I decided to start with the high-fidelity by using Sketch App so I would have time to test the high-fidelity.

Day 3:

Recreating inVision App from zero

When I finished the high-fi I test it with some colleagues at Ironhack and they went completed the tests without any problem but as I payed too much attention to details while working on sketch the day was over and I needed to work a bit at home so I could advance in Principle.

Day 4:

The last day at Ironhack we had a group critiques with our colleagues and teachers and the UI part of my project was not good enough because of the feedback I received. So I change a few things and started doing some UI Iterations before continuing with Principle.

Gesture selection — From 1 button to 2

As you saw on the pictures was trying to know what the users expects from the gestures and transitions button and that’s what I tested before going to animation.

Starting animating

Principle, as many of you know, was develop by the devil. Yes, doesn’t matter how well you rename the files, something is always wrong.

But after a lot of effort putted into it I recorded a few seconds of it and timed so I could talk about Jane’s iteration during the presentation the day after.

Have a look to the animation, meanwhile try to pretend that you are Jane and you are on holidays and you need to create a quick hotspot in an existing project.

Click here to download the animation: https://ufile.io/6jt97

Key learnings

  • The importance of research, during my project I had to go back to the interviews and do more because I was going too fast. Next time I would try to divide better my time and not being too fast.
  • Principle, was develop by the devil.
  • I still need to learn a lo about UI, we barely touch it and I think there is a lot to learn

Next steps

  • As I said I would probably work more in the UI of my prototype.
  • Develop advanced options, like automatic transitions.
  • Animate gestures and transitions using Principle, or other tools.

Conclusions

I am very proud of the I have done during 4 days, still think there is a lot to improve but as I always say, still a lot of things to learn and that is why I am giving my 150% each day to learn more about UX/UI because I just love it.

Original photo of me after the bootcamp

Thank you so much for reading my report, I hope you like it…


Appendix

Roadmap

Day 1

  • Schedule/Roadmap
  • Competitive analysis & Heuristics Analysis
  • Define user methods — Interviews & survey
  • Survey Lean Canvas to get questions
  • Use the survey canvas questions to create interview questions
  • Prompt and open-ended questions
  • Do some interviews & send the survey
  • Define problem and user

Day 2

  • Start creating the presentation document (to easily keep track of the project)
  • Define new user flow with added feature
  • Freehand inVision prototype
  • Test & iterate
  • Start on Sketch + Create inVision prototype

Day 3

  • Sketch high-fi
  • Test & iterate
  • InVision/Principle
  • Rehearse presentation

Day 4

  • Improve project details and presentation
  • Stick to 6min + Rehearse presentation
  • Project Report

Day 5

  • Presentation in the morning

Álvaro Alcaraz Delgado

Written by

UX/UI Designer / Tourism background.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade