Image for post
Image for post

App Challenge: Daisy Chain

Squeezing higher quality, more personalised content out of everyday users.

Jack McGrath
Apr 10, 2017 · 8 min read

The Challenge

Design a single purpose app that allows users to remove the background from an image.


The Problem

We don’t all have the skills, tools or time to deep etch objects out of images like the OG and all round graphic guru, Deke McClelland. In fact, almost no one does…

Image for post
Image for post
How can everyday users cut the flower out of image A and place it on image B?

Constraints

Along with the challenge, there were also some limitations to stick to. The app had to…

  • Not be magic (tap to instantly remove background).
  • Be clear that it’s related to, but not the same thing as, the Canva for iPhone app.

Ad-Hoc Personas

The first thing to do was build some empathy for the user and their needs and so creating personas was the go-to tool for achieving this. Before this could happened though, there were some barriers to overcome:

  • How do you come up with user needs when there are no users?
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Gaining empathy and user needs with ad-hoc personas

The dirty hacks

Not being 100% comfortable on fully relying on my own intuition, I took to google searches, message boards, forums and social media. Essentially, I was searching for people who were asking for help with the same problem I was trying to solve, trying to find out what greater tasks they were trying to achieve and what barriers they were facing.

Image for post
Image for post

User needs take-aways

  • If you weren’t a photoshop user, there weren’t many options for you. Users needs may be met by offering a service with a low skill entry point.
  • If you couldn’t afford to hire an expert, quality results are hard to come by. Users needs may be met by offering a service that is capable of exporting high quality deep etching.
  • If you don’t have a lot of time to learn complicated settings, you’re not going to be able to get the results you want. Users needs may be met by offering a product that only offers the most critical levels of control.

Competitive Analysis

On top of painting a picture of the user needs, it was also important to analyse what the competition was doing. The features of apps and websites that offered assisted deep etching were compared to get a sense of industry standards, popular features and if there were any opportunities the competition were not yet taking advantage of.

Image for post
Image for post
View the full Competitive Analysis PDF

Functional requirement take-aways

  • No app was offering to educate and delight users about its functions and so have the ability to present an onboarding experience may be an advatage.
  • No services were attempting to infer the user’s intent for an image and so users may appreciate the service of computer vision to try and extract objects for them.
  • All services with a camera function were using the standard view finder and so users may benefit from a custom view finder that guides them into taking better photographs.
  • All apps were propped up by obtrusive ads or paid subscriptions and so users may be drawn to the only fully free service.

Experience Mapping

The users needs and the functional requirements were starting to take shape but there was still a bit more to consider in terms of the whole process from sourcing an image to inserting a graphic into the Canva app.

Image for post
Image for post
View the full Experience Map PDF

Top Insights

  • There’s a significant amount of research before the user even opens the app, help to eliminate these low points by allowing users to source images from within the app.
  • Images captured via an in-app camera may be taken in bad conditions, give the user suggestions within their camera view finder as they shoot.
  • Users have many concerns during a project’s research phase. Investigate becoming involved in early stages of the experience external blog posts addressing concerns.

Success Metrics

Despite knowing that the project would likely not be handed over to a developer, the aim of the challenge was to cover all the bases. In this case it meant ensuring that the functional requirements for recording the right analytics would be built into the app.

How will we know if the app is a success?

We must be able to measure if:

  • 30% of sign ups open the app at least once a month after first 90 days
  • ⅓ of users export graphics into Canva to use in their layouts
  • The user can complete task in under 3 minutes
  • The AppStore reviews are 4 stars or higher
  • The background removal requests made on canva.com for go down by 75%

Sketching

At this point, a list of features for the MVP was set but the infrastructure that would afford users the ability to interface with those features did not yet exist. For the deep etching portion of the app especially, there were a lot of ideas about what could work. But in reality, those ideas would need to be sketched out and compared side by side before I could see why most of them were actually pretty terrible.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Sketches ideas for the deep etching screen of the app

Ditched Ideas

  • Filters: although simple for the user, they didn’t offer enough flexibility.
  • Computer vision: may return too many false positives when used on its own.
  • Shape masks: Not refined enough to cover photographic input types.
  • Scribbling: Although the most common method, using finger blocks view.
  • Target colours: takes too long to deep etch inputs with a wide spectrum of colour.

Winning Idea

Going through all these failures forced a new solution to float to the surface. That is, by combining the computer vision and scribble methods a quicker, more simple method was realised. Although there were weaknesses with scribbling, it was still the most common mental model and the first step was inferring what the user wanted so it was possible that the user wouldn’t even need to scribble at all.


Wireframes: the devil is in the detail

Usually putting together wireframes is an essential document to resolve issues with or discuss the hierarchy, page structure and content of a design with your team and/or client. In this case it was just me but that didn’t mean that the process was without its uses.

Image for post
Image for post
See the full wireframes PDF

Content Audit

Apart from those fundamental uses, it was also an essential tool in creating a list of items required to develop the prototype, things like:

  • Logos and iconography
  • Micro-copy
  • Stock images

Technical Assumptions

It also challenged some technical assumptions that needed confirmation, such as:

  • Can we use a Canva account to login with Daisy Chain?
  • Can we use Facebook and/or Google to sign up new users?

Prototyping

A fundamental aspect of taking this challenge on was to explore new technologies and the prototyping stage ended up becoming the biggest part of that. I had used the trial of Daniel Hooper’s Principle a few months beforehand and was impressed enough just to buy the thing and find a way to use it. The below prototype was the first project in line.

Run through video of the prototype highlights

Micro-copy and onboarding content

Because principle took care of complicated interaction and motion designs so well, I was able to produce the bulk of a fairly high fidelity prototype over a few nights. Having the prototyping out of way, more time could be invested in the micro-copy and and onboarding content, hopefully to make a more engaging experience.


Download the prototype

I’ve made the working file available for download! See how I put the Principle file together and explore all of the interactions not included in the run through video.


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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store