Tag Archive | design process

The A-Ha Moment

So the past nine months of designing Glance have been a story of iteration…

after iteration…
after iteration…
after iteration…
after iteration…
after iteration…
well you get the idea.

Designing a piece of software to be intuitive and elegant is blood, sweat, tears, and a splash of carpal tunnel. There’s a hundred-and-one functions that you need, and it has to be well-organized, seem simple, be easy-to-use, and look good to boot. I’ve always felt it’s like cooking.
design is cooking

Out of all the projects I’ve designed for since starting as a UX designer (ooooh so long ago), Glance has proven the most difficult to design, mainly because there are no well-designed precedents for software in this area that are as complex as we’re shooting for. That, and the fact that the audience for Glance isn’t tech-savvy urbanites fooling around with a game. The audience is not just low on the tech-savvy scale, but they have genuine, understandable fear about using technology in their process. This is their research data, their lifeline, their everything. There’s no way they want to jeopardize that data in any way. So while there are many apps out there that give a nominal edge over an older technology, and that works for them to get new users, our app has to be so above and beyond, so friendly and unintimidating, so clear and understandable, that our audience will let go of the technologies they’ve been using for decades in order to take a chance on us.
Easy peezy. (not.)
It didn’t help that my iterations were consistently dozens and dozens of windows long, either. (I’m referring to all the little boxes you see in the pictures above.) I knew I was missing something, some clear path to guide the boat through the reefs. I had gone over many of the iterations with a large number of researchers, non-profits, and students, and they had all nodded along the way, but it wasn’t right. It wasn’t clear enough, I still had to explain too much, and there wasn’t enough surprised pleasure on their faces.

Over the last few days though, a number of events came together to provide for a break:

1– I took a long break of a few weeks from even looking at the UI, and instead spent a great deal of time thinking about why I was doing this and where I wanted to put my energy in the project.
2– Necessity propelled me to design an official logo for Glance (we just joined the local Social Enterprise Greenhouse‘s mentoring program, and so we needed a logo for their site) which forced me to confront the questions of: Everything I can spend paragraphs articulating about what Glance is, how do I boil it down to a visual essence?
3– I read Apple’s IOS 7 design guidelines. Say what you will about it, those designers put an incredible amount of thought into the new design and how the visual and motion design reflects the information design. They got rid of a lot of the old useless crap like skeumorphism, but finally took the next step past flat UI into layered UI, which I had been hoping metro would do but didn’t. (For a great article on that, check out this article on PencilScoop.)

Between high-level priority and identity consideration, the pressures of a deadline, and relief from knowing I had more flexibility in how I wanted to design than I had in IOS 6, I had a few breakthroughs.

First off was the first draft of the logo and aesthetics:

Glance logo
And then, with those aesthetics and that abstract understanding of what Glance was about fresh in my mind, I put all my Illustrator files away, went to my little notebook, and started doodling UI flows.
You can’t see anything in that picture, I know. What, think I’d ruin the surprise now, before the app is out? Psssh.
But my point is that all of it simmered down to two scribbled flows and about ten UI windows each about the size of my thumbprint. The navigation structure, which had before been long and complex, the functionality which before had been like marbles all shoved in a box, had condensed after months of stewing and stirring into something which gave me that wonderful feeling of being “on to something”.
I couldn’t have gotten here if I had over-designed my first iterations. At last, the careful approach I took months ago paid off, by leaving myself still willing to make large changes!
I’m sure it’ll continue to evolve, and I’ll still get things wrong, but there’s little to compare in satisfaction with making an elegant solution for a complex problem.

What to Do Instead of Hitting Refresh on Your Inbox

So at one point or another, you might have found yourself making the F5 Fishface. For those mac users or those who didn’t grow up knowing old, stupid shortcuts like that, F5 used to refresh your browser (with my machine at least, it does no longer). And the fishface part looks like this:
the f5 fishface

The design process isn’t always an exciting snap-your-fingers-this-way-and-that brainstorming explosion of awesomeness. It can be, but it can’t be all the time. Like when you’re waiting on hearing back from volunteer potential users to do usability testing and poke at your wireframes. Or potential investors and partner affiliates to hear if they agree that yes, what you’re making is indeed going to Change the World. You shouldn’t push forward and continue designing without many points of feedback (see this post on my tendency to do just that), and when you’re the project’s founder/manager/designer/marketer, it takes time to get all the ducks in a row. So how can we use this time? Let’s explore. And keep in mind that I have no intention of being brilliant. I simply wish to impart a few humble opinions from my dandalion-weed-like-growing experience.


There’s other good ideas besides the ones I illustrated here. Expand your software knowledge by learning a new prototyping tool. Explore the hurdles you think your dev is going to run into so when they say “uh that’s kinda hard” you don’t reply “why? google does it and it looks totes easy”. Figure out your company name and vision, run it by people, figure out how to get an LLC without paying a lawyer a few fingers. Get a “real job” so your parents will stop wringing their hands in (not so) quiet anxiety. Ha, that last one was a joke. But you could put in some extra hours at that part-time job you’ve got.
Now for the other side…

disclaimer: not all YA lit is bad.

disclaimer: not all YA lit is bad.

This list continues as well. For example, don’t network with the wrong people, meaning people who go “UX? oh, that has to do with them computers, don’t it?”. Don’t sit back and do nothing, because I can guarantee the more ‘nothing’ you do, the bigger the shit will be that hits the fan when you wake up and look around. Don’t get bogged down in tiny details when you don’t have your big picture nailed down. Don’t re-watch all your favorite Buffy episodes on Netflix.
But most of all, don’t sit in front of your computer (or carry around your phone) hitting the refresh button on your email every three minutes (especially since having to refresh your inbox for new messages to appear is, ah, slightly outdated). It will drive you closer to going insane than being fourteen did. If all else fails, leave your technology behind and go sit on a bench in a park for a few hours. Or actual nature, if you’re near that stuff. Clear your head.
Bam. There’s twenty-something wisdom for you.

On Readings from Lupton, Brockman, and Gerstner

So I include these because I always get a kick out of seeing other artists’ notes:

This slideshow requires JavaScript.

As I mentioned at the end of my previous post, I realized my big weakness was typography. So I did some quick searches as to what would be the best resources to consult and found what turned out to be a fabulous book: Thinking with Type by Ellen Lupton. It was a great deal of what I had been vaguely aware of for some time now, but had never clarified into principles. Not only was there a brief history of typography to put the different styles in context, but she added in “Type Crimes” of not-to-dos which were very helpful. I also liked the guidelines of mixing fonts… ok, I liked the whole thing. I’ll leave it at that and go to the more interesting parts: the questions it rose.
Studying the letter though is only a tiny portion of the work; How to lay out text on a page? Naturally this question led me to grabbing books on grid systems in design, specifically that of Josef-Muller Brockman. I found his text a thorough investigation of grid designs in print, rich with examples. Yet that led to the next question- when to use one grid system over another? And when you choose a grid system, how do you choose which variant to use? These questions were starting to lead me outside of graphic design, for in design for print, a designer will usually know how much text there is, what photographs there are, how the guiding thread of narration needs to lead the reader across the page, etc, and these will be the guidelines they’ll use. But what about for dynamic content?
This question led me to Karl Gerstner’s Designing Programmes, a collection of essays that I had hoped to gain more out of than I did. There are, of course, flexible design models that allow for a great deal of variation even when the content is dynamic… newspaper designs, for example. Yet… it still wasn’t quite what I was looking for. I wasn’t just thinking dynamic content in that the content changes from one page to the next, or one issue to the next, but from moment-to-moment, depending on dynamic information.
Of course what I would think to go to next would be website design resources, and there are a million of those. And though I still plan to check out some books I haven’t already seen, I feel as if I already know a great deal of what they’re going to say: Have a navigation pane, use a grid system to communicate clearly, always provide a home button… etc. But there are two things wrong with that sort of guidance:
One: it’s only elements. It’s like saying “to make an animal, you’ll need limbs, a brain, and innards.” Putting aside the fact that those elements were completely arbitrary, it doesn’t tell you anything about how the animal should act. For example, how should it interact with its environment? Let’s put it back in digital terms: How should an app or software interact with a user’s dynamic environment? Or how should the app interact with the other apps and software already on the device?
Two: this ‘limbs, brain, innards’ guidance points to only two design principles: first, clear information presentation (this goes back to traditional graphic design). And secondly, a clear navigational structure (linking).
Yet where does motion design fit in? Already designers in companies big and small are finding ways to make the motion design of a piece of software not only be elegant and pleasureable to use, but contribute to the ease of navigation and the user’s understood structure of the program. Look at Windows 8- for all I might pick at their interaction methods, the motion design is fantastic and quite unique. Yet you wouldn’t know it unless you actually picked up a Windows phone or tablet and started using it (and made it past the learning curve to actually be able to enjoy and admire the motion design… but that’s a different issue).
Undoubtedly, in regards to these questions, there are already long discussions and detailed blog posts by design professionals much more along in their careers and experience than I. And it’s clear I need to find them.
…..SIGH. Is it ridiculous of me to complain that there’s too much information available and I get tired of hunting it all down and the guilt I feel if I don’t?
Oh well. Off to google.

Working on Process

One of the things I’m always learning more about is the early design phase. It’s my favorite part, the place of boundless possibility. You have an idea, you say “okay awesome I’ll go talk to my potential users and find out everything I need to know about them!” but you can’t just show up on their doorstep with nothing, right? Otherwise they’ll give you all their hopes and dreams and you won’t know what the hell to do with them. So you make a quick mock-up of what you think it could be structured like. Just some wireframes. But since wireframes inspire no one, you make a few aesthetically rendered ones so they get it.
This is the part I get carried away with. I start doing the entire wireframe storyboards in this aesthetic style. Why not, right? I mean, you already have the aesthetic ones made, you’re just saving yourself work that you’d have to do later… right? (no.)

getting carried away with a first idea is never a good idea.

getting carried away with a first idea is never a good idea.

Usually when I’m working on a team, this impulse to keep running with something gets checked, but since I’ve started freelancing I’m learning that I have to have a different kind of discipline than I was anticipating: I have no problem with getting myself to work long hours before a project has even gotten funding… I have a problem NOT over-working an idea before it’s at the correct stage.
What happened next is completely natural, of course: as my user research began in earnest and I began meeting with many great, intelligent people, the scope of the project widened tremendously. Perhaps I’m wrong, but I don’t see this as a bad thing; by entertaining other’s ideas by saying “huh, yeah, it COULD go that direction, couldn’t it?” I can make a list of all the possibilities. Then, once I have a good idea of the possible scope, I narrow it down to a small list of must-haves for something small, simple, with a big punch. Not a big scope- I’m not looking to nuke it. I’m looking to snipe it.
Inevitably however, the design now needs a complete revamp. “But wait!” a part of me wants to wail. “I’ve just spent so long on this beautiful design!”
…Actually, that’s a lie. There is no part that says that in me. Call me a masochist, but I get a kick out of crumpling designs and tossing them over my shoulder. They weren’t wasted- nothing’s EVER wasted. I learned a lot through creating that first iteration. But it’s back to the drawing board.
I often draw the same design a few times over and over; with each time i redraw it, I reconceptualize it into a more organized essence of its idea.

I often draw the same design a few times over and over; with each time i redraw it, I reconceptualize it into a more organized essence of its idea.

Part of that learning process is discovering your own weaknesses: and I’ve found a big one, one which was hidden during my time at Microsoft Research because I was working solely in the Windows 8 metro style. No, I’m not talking gradient meshes, although those are a pain in the ass… I’m talking about typography. So after I tackle that weakness head-on (Helloooo Ellen Lupton) I’ll post about that. Nothing like facing your fears right?
…I’d totally rather face a shark than face typography.
…..then again, that’s a poor comparison perhaps, because I like sharks. hm.