Isolatr

A single purpose app for isolating elements from images

Index

  1. Requirements
  2. User story
  3. Rational
  4. Acceptance criteria
  5. KPIs
  6. Monetisation
  7. User research
  • User questions
  • Tasks for usability test

8. From concept to pixel

  • Benchmark
  • Flow
  • Potential tools
  • First drafts
  • Wireframes
  • Prototyping

9. The final tools

10. Tools used to face this challenge

11. Time spent

12. The prototype


1. Requirements

To design a single purpose app that allows a user to remove the background from an image and save it. e.g. isolate someone who’s leaning on a wall, or extract a logo from a letterhead.

Constraints:

  • It’s an iPhone app.
  • Can make simple technical assumptions about the extraction process but it can’t be “magic”.

­

­Things to focus on:

  • Visual polish
  • Balancing simplicity with good results
  • Showing UX thought and understanding
  • The best way to communicate your design

­


2. User story

As an iPhone user I would love to isolate elements from an image so that I will be able to use them on my compositions.

3. Rational

iPhone users, on their daily editing images needs for whatever purpose (from Instagram or blogpost till trolling a friend), may face the problem of removing a background from a specific object or person. In order to make this task easier Isolatr is presented as an easy-to-use tool which allows to the user to remove areas from an image, save the results and share it.

4. Acceptance criteria

  • The user should be able to import images from the social networks
  • The user should be able to import images from private albums
  • The user should be able to take a picture easily directly from the app
  • The user should have the proper tools to perform the task
  • The user should be able to save the project and resume in
  • The user should be able to share the results on the social networks

5. KPIs

  • Number of images isolated
  • Number of projects saved
  • Number of images shared

6. Monetisation

If needed, I would propose to go with an MVP but developing new cool features that would allow the user to isolate in a easier way. This features will be unlocked by a previous payment.

7. User research

I consider talking with users a very important task in order to understand the product itself, it’s value, if it’s easy to use or not, etc. To delight users, product designers have to understand their needs and desires from first hand, so to avoid assumptions.

If we don’t have any quantitative data to look at, I would suggest to gather qualitative data through usability tests, made to 10 iPhone users who are used to edit images or have faced this problem on the past.

In order to do this I detailed below some of the research questions I find important to answer and some of the tasks user is going to perform to answer this questions.

This is me driving a usability test

Research questions

  • Does the user understand how to select an image to isolate?
  • Does the user understand how to select an image from the social networks?
  • Does the user understand how to take a picture?
  • Does the user clearly understand the tools?
  • Does the user understand in a easy way how to start performing the isolation?
  • Does the user understand how to use the eraser tool?
  • Does the user understand how to use the pencil tool
  • Does the user understand how to mask an area?
  • Does the user understand how to use the magic tool?
  • Does the user understand how to save the Isolatr?
  • Does the user understand how to resume isolating a project from the past?

Tasks for usability test

  • Place the user on situation

“Please, imagine that you have an image and you need to isolate it from its background. For this task you will use this app called Isolatr.”

  • “Select image” page
  1. Before opening the app, what do you expect to find?
  2. Please, open the app.
  3. Is this what you were expecting?
  4. Continue with your task. Before tapping, please, let me know what are you going to do.
  5. Please, could you select an image from Instagram?
  6. Once user is ready to isolate, and before leaving “select image page”: Please, could you tell me what do you expect after tapping on “Let´s isolate this!” button?
  • Isolate page
  1. Is this what you were expecting to see?
  2. Please continue with your task, before tapping just let me know what are you going to do.
  3. If user is going to tap on the eraser tool: Could you let me know what are you expecting to happen after tap?
  4. If user is going to tap on the pencil tool: Could you let me know what are you expecting to happen after tap?
  5. If user is going to tap on the mask tool: Could you let me know what are you expecting to happen after tap?
  6. If user is going to tap on the magic tool: Could you let me know what are you expecting to happen after tap?
  7. Once image is isolated or user is blocked. Could you let me know how you expect to save this project?

8. From concept to pixel

As far as I have been isolating images for long time I know a couple of shortcuts to do this task with Photoshop but there are obviously common things you need to do in order to complete a proper isolation:

  • Zoom. User need to be able to zoom as much as he want.
  • Different brushes. Brushes should have different sizes and strong.
  • Mask. With this masks you can see properly the area cropped.
  • Magic tool. This allows you to select plain areas easily.

Benchmark

Knowing who your competitors are and what they are doing is basic to create a better and different product. There are a bunch of apps on the market that allows you to isolate parts of the image. A couple of them work quite well but non of them are strictly specialised on just isolating images.

Some examples:

Flow

Once I had a proper environment overview I started to think on the main pages I´m going to design:

  • Splash screen
  • Image selection
  • Editing page
  • Navigations

Potential tools

Next task is to decide which are the tools we are going to offer for this MVP. As far as I have a proper overview of the market and plenty of knowledge about design tools and expertise, this is my selection:

  • Erase
  • Unerase
  • Mask
  • Zoom / Position
  • Magic tool

First drafts

From this, I draft on paper my firsts ideas. This ones are very raw but helped me to start thinking visually.

Wireframes

Once I have some ideas drafted I started to design some mid fidelity wireframes (I´m very visual oriented so my wireframes are not very low fidelity). This allows me to see what works and what not. For example in this case I realized that some icons I used were not really understandable.

At this point I will be iterating on the wireframes till I have something I´m happy with. Constant iteration since the beginning of the project is a must: questioning everything, asking yourself all the time why this or why that, redo, rethink, and start again. I believe constant iteration is the best way to create a great product.

Prototyping

Once I´m happy with the wireframes I start to create the final mockups for the prototype. From my point of view as soon as you start prototyping the better, because you don´t realise some interaction problems until you don´t play with the tool for a bit. This interaction problems could affect to the whole layout so, as soon as you start prototyping you realise about the potential problems.

9. The final tools



Position / Zoom

With this tool user can zoom and navigate across the image. It is very useful to have this tool split on a single one in order to do not erase, for example, by accident when trying to zoom.









Erase tool

This tool is the basic one. Allows the user to erase the areas just tapping on the image. User can decide what kind of brush would like to use and the size of it. Brushes can vary on sharpness, blurriness and level of transparency.

When user is actually erasing a small zoom window appear to be more accurate.






Unerase tool

This tool do the opposite effect of the erase tool. When you tab on the image the areas already erased appear again. It is very useful when you just mistake a little area but you do not want to undo the whole previous selection.

The user can decide what kind of brush he would like to use and the size of it. Brushes can vary on sharpness, blurriness and level of transparency








Mask tool

This tool works quite well when you need more contrast between your selection and the part of the image you would like to remove.

This tool can be mixed with the erase / unerase tools so you can have a perfect combination.








Magic tool

Especially handy when you have a very plain area, like a blue sky, this tool will allow users to select big areas without problems.

You can refine your selection using the slider.





10. The Prototype

I highly recommend to check this on an iPhone 5. Here is the link to the prototype.