#sketchlens

[adylitica]

Sketchlens - Free Paper

Sketchlens was an App we made for capturing sketches with your phone’s camera.

We were going for a concept somewhat similar to iUp Note - exploring ways to mix phone note taking with pen and paper note taking.

Just like iUp Note, we thought it would be pretty cool to create lots of designs for special notes, like greeting cards and postcards. To deliver these special designs, we built a small “store” where new designs would be added over time, but we also wanted to give free samples of special designs to try them out.

We played around with various ideas of how to deliver the free versions.

Lots of button iterations, from the simple:

To more obvious:

To whimsical:

We went with the dinosaur, it wasn’t the most clearly a button, but we thought it was the coolest option.

[adylitica]

Sketchlens - Making an Icon

When creating a “new concept” icon for an App, we often start with sketches.

Sketches are easy to create and can test an idea very quickly. Our design process as always is: generate ideas, visualize and test multiple ideas, choose a direction, repeat.

In our first iteration of the Sketchlens icon was to put everything into the icon to make the concept easy to grasp: marry a camera with a sketchbook. 

We wanted to portray an all in one simple integrated solution, like how Instagram marries a photo processing App with a camera.

[adylitica]

Crazy Ideas for the Sketchlens Icon

With Sketchlens we struggled mightily to find an icon design.

Our process for icon design is pretty varied. Sometimes we work with an outside designer, a specialist in icon design. Sometimes we develop ideas from outside designers but finalize the ideas internally.

Other times we do icon design from A to Z. For Sketchlens we decided to everything in-house.

The concept we wanted to show with the design was: "a sketchbook populated by photos of sketches".

A concept we bandied about a lot was a Frankenstein creation of a notebook fused with a camera.

This was difficult to make work. Finding the right materials, the correct perspective, the correct realism, all problematic.

The final iOS icon looked nothing like these concepts, but we'd later this concept work for the Android icon.

[adylitica]

Crafting a First Experience for Sketchlens

When we put together all the elements of Sketchlens we started to think about how to introduce it to a new user, how to even talk about how it worked. We tried to be illustrative in the name: “Sketchlens” invoking the idea that it was a camera for taking photos of sketches. However ambiguities still persisted. Does it turn a normal photo into a sketch? Can I sketch inside the App? Can I edit my sketch? Can I scan documents? Watercolors?

In the initial state of the a App the core sketch processing algorithm was so weak at translating sketches it would make for wretched results when used incorrectly so setting expectations and teaching people what the App was for was critical from the word go.

So when a user downloaded the app, we needed a way to show them exactly what to do, and not something they would just flip past. Some people aren't the type to read the book of instructions...

We put together a bunch of ideas for this problem. 

Ultimately what worked best was a cave painting approach: show the steps. This way you could see exactly what to do, setting you up to use the App correctly.

[adylitica]

The Sketchlens Paper Portfolio

Sketchlens was a project to capture photos of sketches into a digital sketchbook. You could place your sketch on a different paper than it was drawn on, so you could take a photo of a napkin sketch in real life, change the background to graph paper and then publish your fancy sketch to Twitter.

One major feature component of the App was the paper selection. We created reams of paper designs and organized them into various broad categories. To allow selection we wanted it to be fast, easy, and fun: what should the interface for this look like?

We developed a bunch of designs but the one that stood out was the paper fans. Move up the sketch so you can see it with the selected paper, and swipe left and right to slide through categories. Press to select, all while seeing the original sketch in context.

Implementing this was pretty tricky, but ultimately we came up with a very successful and fun component.

One thing that was so hard to get ahead of in this project was prioritization. One obvious design flaw of the fan concept is that if we expanded the number of paper sets the swiping UI would fall apart. But that’s the kind of decision that forces the consideration of time: not all designs should stand the test of time forever, and not all projects should be assumed to be long lasting. It’s a delicate balance.

[adylitica]

Elemental Sketchlens, Fixtures and Fittings

One of the major issues we faced time and again with Sketchlens was the way it worked: taking a photo of a drawn sketch and turning it into a digital scan was tricky enough, but then we threw it into a totally custom swipe based user interface for all the sketches.

Normally a very simple UI is a blessing, you don't have to work to hard to figure out that you can slide on the stack to move cards off. But when you have a very simple UI and you need some more complex interactions, it's easy to get stymied.

We needed more than just swipe. We needed ways to create sketches, to delete sketches and to do stuff with sketches. We needed to think ahead a little bit too: making more than just a few sketches wouldn't really work in a stack, we needed thumbnails.

To cover these problems we went with a couple of big solutions. To switch modes we'd use a hamburger menu button: familiar on Android and pretty common on iOS at the time, thanks to Apps like Facebook and Path.

We'd also create a standard button look and feel, but to avoid overwhelming the sketch we'd hide it and hide many options inside it. This would let us add complicated options without digging ourselves too deeply into a custom UI pit of despair.

[adylitica]

Sharable Sketches in Sketchlens

With Sketchlens we imagined an App with a simple flow: snap a photo of a sketch, confirm and save the sketch to the sketch book, optionally share it with your associates.

In our dreamy eyed origins of conceptualizing the idea we envisioned fully integrated social features where your sketchbook was a shining star in a constellation of your creatively minded compadres. You could browse their sketches and drop a new drawing in your social pool with one tap, instagram-style.

But even accomplishing the basics of Sketchlens were so challenging that we couldn't hope to accomplish integrated sharing, so we looked for a shortcut: Email, Facebook and Twitter sharing.

After making a sketch we’d have a way to indicate "hey, you can share this sketch you just made. You can email it, or push it to Facebook / Twitter, easy!" We didn't want to be too annoying about it, but not too obscure either.

We developed a wide range of concepts but tried hard to strike the right balance. Ultimately we decided to follow our general rule that we used in Do it (Tomorrow), buttons should always look like buttons and never like pure ornamentation, no matter what.

[adylitica]

Designing the Sketchlens Final Page

With Sketchlens we imagined an App where you could take your handwritten notes and drawings with you wherever you went. Just like you'd have a library of books in your Kindle app, you could have a bundle of your sketches in the Sketchlens App.

The idea was that the UI would work like a stack of cards. Every sketch you take, goes on the stack. Sliding on any card advances to the next card.

But when you get to the end of the stack, no more cards. What happens? What if you're deep in the stack? How do you get back up to the top?

That's a tricky conceit with cards. Even in real life it's kind of a bummer to navigate a stack of cards: on a small device touchscreen it's worse.

To counteract this deficit we came up with a couple of ideas. First: wherever you were in the stack you could double tap and it would bring you back to the top. Of course that's not what we call discoverable - so we brainstormed some ideas to help make it clear. Finally, we added a final card to the stack with some instructions.

Not ideal, but perfect being the enemy of good: we went with it.