Kapowski’s App Icon

a geek trapped in a cool guy's body presents an article by Jason Kemp 2016-11-01

There’s a term with which you should be familiar if you deal with software development in any capacity: bike-shedding. The term bike-shedding represents a metaphor to illustrate the Law of Triviality. Essentially, imagine a board meeting discussing construction of a nuclear power plant; most of the time will be spent arguing the materials of the bike shed rather than the more important, but complex, construction of the plant itself.

Software development is rife with bike shedding.

Imagine developers in a room: they will agonize over spaces in a file or where the curly brace goes. Yet their app is drowning in over-engineered “frameworks” that no one understands.

Wait, it gets worse: if there is anyone non-technical in the room, the only thing the group can all reason about is user facing stuff: images, icons, colours, animations. This stuff matters, yes, but quite a bit less than anyone thinks.

So, who wants to do some bike-shedding on Kapowski’s App Icon?

For all my talk about bike-shedding and how trivial things take up time, I spent a lot of time agonizing over the app icon. Perhaps, it’s because there was no one to call me on the bike-shedding. Perhaps it’s because this is the first time I said to myself that I’m capable of doing the icon (all my other apps where done exclusively by me, except the icon). Whatever the reason, the icon got a lot of attention. I’m not sure what’s normal for designers to spend on an icon, but let’s say I spent a solid week on it, 40 hours.

I decided early on that I’d be the one to do the icon. I was expecting it to be some minimal thing to represent the before and after: Two rectangles adjacent, one filled in. I can do that and it’s de rigueur. Round the corners, add a colour. Boom. Done. I’m an icon maker!

But I can rarely leave anything alone. Who’s got two thumbs and takes things to extremes? This guy!

I started thinking through the problem Kapowski solves a little more thoroughly. It let’s anyone easily track progress while they’re changing their bodies. The thing about changing bodies is that, to make the transformation last, the process involves changing lives: you need to change your values, your habits, what you do, with whom you do it. And it’s not an overnight thing, it’s more of a gradual set of changes that compounds. Whoa, that’s serious. But, pull it off: seriously awesome. What else is awesome? Fuckin’ rainbows.

What if instead of a drab solid colour, the after was represented by a rainbow of colours?

I fired up Photoshop. I forgot that I hated Photoshop before I fired it up, but after struggling with the gradient tool and importing a sunburst from Illustrator and all kinds of shit, I fired up Sketch. I reproduced what I did in Photoshop in a half hour. Cool. I’mma stick with Sketch.

Icon-Original.png

This was my first draft. It…was not what I pictured my mind. That’s a rainbow, sure, but it’s covered in mud. Who wants a muddy after rainbow? And that drab grey on the end doesn’t work the way I want

There were many more prototype rainbows. But I finally got to something I liked.

Rainbow.png

Gorgeous! But, it’s missing something, isn’t it?

I tried a few more things to make it bit more symbolic, or icon like or something. They all sucked.

examples.png

What now?

While designing the icon, I was also searching for stock photos of silhouettes for buttons in Kapowski. I was looking for sterile poses of front, side and back, to represent the perspectives for which you would take photos. If you’ve been following Kapowski closely, you’ve seen the fruits of those searches. While searching for those images, a few interesting poses caught my eye; I couldn’t use them in the app, but would they work in the icon?

Icon-Lady.png

Hell yes, they will.

That’s a pretty sweet icon.

I suspect—without any specific evidence—that this app will be used by women more than men. I’m probably skewing it more by using a rainbow. But I’d be outright forcing the skew if I kept the icon like this. And I don’t want to limit the audience, despite this being the best representation of the idea in my opinion.

So, after more searching and some tweaking, we finally have Kapowski’s icon

kapowski.png