1. Preliminary Thoughts

2. Brief

3. Research
3.1. Interviewing Users
3.2. Defining the Pain-Points and the Problem Statement
3.3. Persona
3.4. Feature Prioritization
3.5. Comparative Analysis
3.6. Current Flow

4. Prototyping
4.1. Final Prototype
4.2. Interaction Design

5. Conclusions

Preliminary Thoughts

Note: If you wish to go straight to the design process, start at the “Brief” section.

What does a designer do? What’s our ultimate mission? How do we achieve what we want as designers? There are a lot of answers to these questions, and as a growing designer, I still do not have a clear answer to that. Maybe in five, ten or twenty years, I’ll know… or maybe not! It’s not black and white since this is an always-changing creative field, so conceptions, best practices, and processes won’t be the same in a decade. What I’m learning now, the tools I’m using, it will all be outdated in no time. That’s why I want to focus on what we currently have available.

As UX and UI Designers, we use a certain set of tools that help us accomplish our objectives and meet our goals. These tools range from a simple set of pens to a complex vector design software. Regardless, these tools have to adapt to new times, particularly when concerning digital products. Generally speaking, we no longer buy physical products. Nowadays, the whole industry revolves around services, shared experiences and adapting to a fast-moving world. So the tools we use to design these products need to adapt to our habits.

Most creative tasks that involve some sort of design software happen in a computer for obvious reasons. However, designers are no longer tied to a desk. We move around, we network, we go to conferences, we visit other cities and countries in order to learn about people, other designers, and their experiences. Therefore, sometimes having to use a computer or a laptop isn’t the most viable option. Of course, mobile devices won’t substitute computers anytime soon, but I believe they can adopt an interesting role in our workflow as a support tool.

Brief

At Ironhack, I was involved in the incorporation of a new feature into InVision’s mobile app. My goal was to seamlessly integrate the existing desktop Build Mode into the app in a way that was usable and valuable to users. I believe editing modes on mobile tend to be either too complex and cluttered or too limited, so this was going to be a challenging project to work on. I started wondering: How do I take the available InVision desktop experience and incorporate it on the existing mobile flow? Do users want a basic editing tool or a full desktop-like experience?

I came up with a project plan and started approaching the research stage of the process in order to get the necessary answers and learn more about users of the current product and users who could be interested to adopt it if such a feature was to be released.

Research

For the first research stages, I approached people that have used or know about the product. I wanted to know what the users of InVision think about the prototyping solution the company offers in order to start modeling the design process. During these short conversations with several designers and students, I asked them to think about words that came to their mind when thinking about the InVision App, which I wrote down. As expected, words like “prototype”, “test” and “demo” were highly mentioned. However and to my surprise, most designers also mentioned they felt the app was quite “limited” and “restrictive”. Some of them also mentioned “simple” as a neutral adjective.

With this first research prove, I was able to find out that the purpose of the current product is very clear, but that users perceive it as simple and limited. Some participants mentioned those adjectives as a negative quality, but other users mentioned that it might also be a good thing that the experience is simple (although they would welcome some additional tools).

Interviewing Users

The Word Cloud allowed me to shape the interviews with users accordingly. I created an interview guide with some questions revolving around the InVision App experience and other similar existing tools. My goal was to find out about what users want and their needs (as designers) regarding the current solution. Therefore, I proceeded to interview 3 users. Two of them were UX/UI designers and the third one was a UI and Graphic designer. The interview consisted of 5 open-ended questions, with the first ones being quite general and progressively becoming more specific.

The interviewees revealed the following insights:

• They believe the current product is limited and that they would like some basic editing tools.
• All participants explained that sometimes, when they need to quickly edit their prototypes in the middle of a usability test or demo, they’re forced to go back to a computer.
• Interviewees perceived this situation as a loss of efficiency and feel restricted.

Defining the Pain-Points and the Problem Statement

With that said, I identified the main pain points of the existing product:

• Users are forced to go back to a desktop computer every time they need to edit a prototype.
• Users are unable to edit and reorganize their prototypes on the fly and on their phone.

These were followed by the definition of a problem statement:

Designers need a way to edit and organize their prototypes on their phones because they feel restricted by having to conduct such tasks on desktop.

Persona

After defining the user pain-points and a problem statement that reflects user needs, I proceeded to create a persona I would base the project scenario on. This would be the foundation for the explored and final product ideas, which should meet user needs and solve their problem.

Feature Prioritization

Users needed a basic yet useful tool to edit their prototypes on the fly. It was clear they didn’t want all the existing features on the desktop mode to be included in the app (tech barriers aside). It’s important to know what’s possible and what not. It wasn’t feasible to just throw every feature on desktop to a mobile app.

Consequently, I decided to do some further research with four additional participants. For this stage, I wrote down every feature included on the desktop build mode and created a small paper card for each one of them. Then I asked the users to order the feature cards from most to least important for them.

Finally, I told them to put a limit where every feature above was a “must have” and everything below was “nice to have”. This process helped me decide what features to prioritize: organize screens in a prototype, add and edit a hotspot, select a gesture and switch or go back to view mode were the most valuable feature to users. Accessing the comment mode, create a fixed footer/header and hotspot templates were the least important features to the participants.

Comparative Analysis

It was also important to analyze how other products solve the same or a similar problem.

• Marvel (mobile app): this is an interesting solution that allows designers to build prototypes and edit them. Its mobile version also offers an interesting set of tools to create and edit prototypes. The interface is simple and easy to understand, and most features are fast and seamless. It doesn’t ask too many questions and goes straight to the point. However, Marvel is quite limited when it comes to collaborative features.
• POP, acquired by Marvel around two years ago, offers an extensive and powerful set of tools. It allows designers to turn paper prototypes and screenshots into interactive prototypes, with an interesting set of features for testing them. The UI is easy to understand and fast, with a clear layout and positioning of every element. However, POP’s tools when it comes to advanced prototyping are quite limited and fall short when compared to other similar products.

Current Flow

InVision currently offers a mobile app for designers to visualize their prototypes. However, such a tool does not have any editing capabilities, which makes the service feel limited on smartphones. In order to find out how to incorporate the build mode into such a product, I first needed to understand the current User Flow.

Studying how the current flow worked allowed me to discover several ways to approach the challenge and where to start incorporating the feature.

Prototyping

Once I had concluded all the stages of the research process, I proceeded to ideate and prototype. First, I started with a paper prototype in order to explore a simple user-flow for the feature. I was quite strict when it comes to maintaining the feel, look, and logic of the current app in order to adhere to user’s mental models and keep alignment with the brand. Therefore, I used the existing navigational logic to design the flow of the feature on mobile. Why create something different or separate when you already have all these systems in place? Users already understand them, which increases learnability, and it simplifies the development of the feature.

I user-tested this first prototype with 3 designers and all of them completed the action of adding a hotspot to a screen. I only encountered some issues with the existing “tap and hold” gesture. Users that weren’t so familiarized with the product didn’t know what to do (even though I included the “Pro Tip” pop-up that appears on InVision’s Android app). Experienced users, however, could easily complete the proposed action.

The next steps were to create a digital prototype on Sketch, with several variations of key screens, and to continue user-testing. For the digital prototype, I recreated several screens from the InVision App and added the necessary elements. For instance, once users enter a screen on their prototype and tap and hold the modal menu that slides up had to show the “build mode” option, so I added it.

As a side note, I approached the visual design of such a feature for the iOS version of the app, since most interviewees were using this system.

Next was to prototype the Build Mode screen itself. I had defined how users accessed it, but I had to explore ideas for how users would edit a screen or go back to View Mode. I explored several variations with icons, text and even a toolbar. However, even though testing showed that users understood these, the feel of the explored ideas didn’t fit the product. Additionally, the navigation was not as optimal as it could be.

Final Prototype

Since I examined the user-flow of the current app, I wanted to explore a concept that integrates with the existing navigation. After coming to the conclusion that the options above weren’t as optimal as the feature required, I decided to go with the existing flow for the Comment Mode. As I mentioned above, it made sense to use the same navigation logic and layout. Therefore, this was the best solution for users to understand the navigation and usage of the feature.

Users are able to add a new hotspot by tapping on the screen (see picture above), which creates a blue square (hotspot) of a default size. Users can move hotspots around and resize them. Moreover, when users add a hotspot, a pop-up appears around it with the options to “link” and “delete”. The first option takes users to a new screen where they can select the screen they want that hotspot to link to, a gesture and a transition for that link.

Interaction Design

The design of interactions and motion elements also played an important role in the design process of the product. It was my goal to design transitions and visual clues that help users understand what’s happening on-screen. I was also aiming for smooth and easy-to-understand animations, avoiding too much visual noise or long waiting times (user waiting for an animation to complete in order to know what’s happening or what to do next).
For instance, the animations for selecting a gesture or a transition give users a visual clue of what they have selected. When creating a hotspot, the pop-up action bar animation also indicates the location of that said hotspot. These visual clues guide users throughout the whole interface of the product.

Conclusions

Designing for an existing product is a complex task. Maybe even more than starting from scratch. This project was a great way to explore other UX tools and processes that one might not use when creating something from scratch (asking users about the existing product, analyzing the current user-flows, etc.). When adding a feature, you have this huge breathing environment and you are introducing something that could completely ruin it. Therefore, it is crucial to analyze the current product so as to keep consistency in place, from visuals to navigation. It’s also important to zoom out and look at the whole picture throughout the entire process. It is necessary to research the product, current and possible new users, and scenarios in order to understand and make sense of it: how is this feature going to be used? how does it improve the user’s experience with the product? Keeping all this factors and questions in mind will help your product stay on track and probably achieve success…

Or maybe not! We designers play with fire after all…

Special thanks to Leighton Bloomfield, Diego Zito, Elise Mateu, Nevan Scott and my crew at Ironhack Barcelona for their support throughout the process.