How might we tap into consumers’ doodling youth and create an engaging, highly social, mobile sketching app experience?

At Happiness Engines, we set out to create what we bill as “what would happen if Instagram and Draw Something had a baby.” We quickly added meme- generating abilities too, allowing you to take filtered photos; sketch on top of them or add captions; and “remix” any image you saw by adding to it and then publishing as your own. Colorized provides a rolling set of challenges as we continue to develop, change, and add features in response to user behavior and usage figures. The problem becomes: how do we best use our agile team to attack new developments?
01 Branding
Colorized App Icon
Logo Sketches

Early on within Colorized's design process, I focused on its branding. This isn't the case with every project, but in Colorized's case it was important to me after some initial prototyping of the concept to get a feel for how the app "talked" with its users. I was looking for a visual language that wasn't child-like and bubbly, but spoke in a slightly more sophisticated (but still playful) tone.

Although early sketches for the logomark looked at shapes that drew from a "sketching" concept in a literal sense, I later focused on different shapes that were born out of different overlapping shapes and shades of color. Eventually this settled into a shape reminiscent of an artist's palette, with a clean wordmark.

Colorized Logo Sketches Colorized Logo Colorized Brand Colors
02 Mobile
Colorized Mobile
Mobile Wireframes

The following wall of wireframes represents a sample of some of the myriad explorations I did to find an optimal positioning of the action elements associated with an image in the main feed of the interface. (Some of the explorations are fairly ugly, be warned! It's all just part of the process.)

Actions such as liking an image; remixing; commenting; and swiping through different remixes of an image are all present. In addition, I played with different ways of representing the "author" of the image, as well as comments. This decision process was very much informed by active conversations with our engineering team: we wouldn't have included profile images of commenters, for example, if it hadn't been technically feasible.

Mobile Iterations for Home Screen

Below is an early app map of Colorized. I generated several such app maps to brainstorm how the flows made sense with the rest of the team, and doing so really helped to tame the complexity of the app over time.

App Map v1.05

Part of the reason I do so much up-front work in wireframes like these is to involve Engineering in the process as closely as possible, while ideas are still germinating and malleable. Below is an example of one early, key decision that was made in conjunction with our engineers: namely the type of navigation scheme we would follow.

After different explorations, I began favoring a navigation approach in the side-popout style. It allowed for greater flexibility in adding different "sorts" of content (trending, contests, and so on, which we could experiment with over time), and also allowed you to serendipitously happen upon your Activity feed and people to follow.

Happiness Engines was very much a "fastest path to market" shop, though. In terms of an MVP candidate, we wanted something we could push out as soon as possible to see if the basic idea actually resonated with users. With that in mind, it became obvious that the traditional "bottom tabs" navigation would be quicker to build; so that's the route we took.

Nav on bottom vs. on sides

Early on in beta testing, it became obvious that people... just weren't following other people. Not as often as was optimal to keep their feeds full, in any case. Following someone meant intentionally visiting their profile and hitting the "Follow" button, so this represented an exploration to somehow integrate the follow feature right on the feed, when a "featured" image showed up in your feed with someone you didn't already follow. Sometimes the most obvious solution is the best: after these wireframes, we ended up with a giant green button like what's modeled in the lower right.

Following Users Iterations

Sometimes it helped the rest of the team to illustrate out a key decision point. When adding the "zoom" feature, for example, I put this together to show exactly how the two options might behave. We ended up with the pinch-to-zoom standard.

Zoom Options

The following four images show some admittedly dry (but quite important for us) flows for a new onboarding flow we tried out. The most interesting part of this new onboarding flow was how promising it sounded on the surface — and how utterly it failed in our A/B test when stacked up against the old onboarding flow. It's a case study best talked through, so ask if you're curious.

Auth / Intro Flow 1 Auth / Intro Flow 2 Auth / Intro Flow 3 Auth / Intro Flow 4
Mobile Visuals
Stamps Visual Iterations Mobile Visuals 01 Mobile Visuals 01
03 Web
Colorized Web
Web Wireframes
Web Wireframe 1
Web Visual Iterations
Home Page v1 Home Page v2
Web Visuals
Home Page v3 About Page Blog Page
Arrow
RECENT THOUGHTS