Here you'll find my User Experience and Visual Design case studies and example work. You can also read about my design thinking, branding process, and illustrations.

July 21, 2018No Comments

Design Tiers to Prevent Design Tears

I think of my design process as going through tiers of quality, with a Tier One design being something I’ve come up with within my first 4-6 hours of brainstorming. I might end up liking one or two of these designs pretty well, and can get excited enough about it to get others on board. The problem is, Tier One designs are low-hanging fruit, and the designs you’re looking for are at the top of the tree.

Creativity works by finding a connection between two separate ideas. Within our social group we’re trained to make similar connections so that we can successfully communicate with one another. We want our designs to make strong connections – but we also these connections to be unique enough that they enforce our brands’ individuality. Here’s a scenario: when you’re considering a logo design for a company called Black Tie Travel, the first connections you make are probably of bow ties, tuxedos, champagne glasses, airplanes, limousines, etc. These are common visual connections, and they’re also Tier One ideas that anyone can make. Designers who stick with Tier One ideas are the reason many companies believe their secretary could’ve created a logo - because they probably could have. If you push further, you can come up with slightly more creative associations. Maybe consider historical contexts of black tie events, innovations in travel, or choose a distinct decade of formal dress to borrow design elements from – any of these could help give the brand depth.

Another problem with Tier One designs is how easy it is to get attached to them and how tough it can be to let them go. You work on it for a few hours, you loosely tie it together, and you show it to your team. They like it, because even though it’s a Tier One design, it probably falls into the category of “good enough,” and the project moves forward. But now, six weeks of development later, you have a new design epiphany! Why didn’t you think of this earlier! You want to run to your client and tell that you just thought of something BETTER! But now it’s too late. There would have been a better chance at finding something more complex by working through your first pass.

It’s very daunting to start creating from a blank page, but often if you throw all of your Tier One ideas down it will get them out of your system and let you clear your head, like a warm-up before a workout. Don’t be afraid to show your clients your design thinking early on, but keep them informed that design is a process and needs iteration.

I’m afraid I don’t have any qualifications for Tier Two or Tier Three designs, but just knowing they’re out there can keep me from settling on the first thing I design. A good indicator of a Two or a Three is how you feel about it after you’ve put it down for a few days. If you’re having trouble making the jump away from your first ideas, don’t be too proud to ask for help – sometimes a connection someone else makes can trigger a new connection for yourself.

July 21, 2018No Comments

R. U. Cyberpunk?

If you have a smart phone in your pocket right now, then this page from 1990’s Mondo Magazine thinks you are. Right now our idea of the future is a holographic glowing panel that you can move with a flick of your hand. But fifteen years ago we thought the future would be full of portable gadgets, and we had no idea that they would fit into a piece of metal no thicker than a pancake.

In this image I can count 14 of these pieces of cyberpunk tech that our phone can do. Of course it makes phone calls, plays music, and has a camera, but here are a few things we didn’t imagine our phones doing when we got our first flip phones:

Money: I can take a photograph of a check to make deposits to my bank account without ever having to fill out a deposit slip. Apple Pay means I don’t have to carry a wallet on me if I don’t want to. Level up not only lets me pay with my phone, but also helps small businesses by keeping their credit card transaction fees low.

GPS: How many people ever look up directions to their destination before they leave their house anymore? With apps like Find My Friends we can psychically know where friends and family are at any time…it’s only a littlecreepy.

Apple Powerbook 180: Now this is the thing that makes our smart phones so remarkable. We have incredible computing power in our pockets. We have access to lifetimes' worth of knowledge. We are living in the Matrix. You now know Kung Fu.

There are still some things that the phone in your purse can do that were at the outer limit of our wildest techno fantasies. With Periscope where we can watch in real-time anyone broadcasting on earth. We can stream 1080p movies on Netflix. Word Lens can look through our camera at words in another language and overlay translations in our own tongue.

Remember this next time you complain that your phone is a few years old, and that you want the latest upgrade. Acknowledge that you’re already living a future that your past self would not have believed. Our cars may not fly yet, but they’re better drivers than you are.

July 21, 2018No Comments

220 Screens: How to Stay Organized With Your Designs

There are two-hundred and twenty screens in my Sketch file. I’ve personally spent 1,577 hours on this project over the course of 18 months with my team of ten people and with a team of over a hundred on our client’s side. This has been the largest mobile app I’ve ever had the pleasure to work on – an extremely complex user experience designed for both the web and iOS.

When we talk about enterprise design, it’s sometimes difficult to really imagine the sheer magnitude of what the project will become. It’s easy to start the project believing that your screens will always have consistent colors, behaviors, etc., and that there’s no way you’re going to let this get out of hand! No, things like that only happen to lazy, disorganized people. Then one day your developer notices that your body font size has changed by one point. “How did that happen?” you wonder, “I’ve been using text styles!” Next, the gray you’ve been using is slightly off - which is impossible because you’ve been using your swatches, right? Right?

Nobody is perfect. When the scope of a project is so large, things are going to fall through the cracks. The key is to remember to catch it and reign it back in before things get too far. Here a few ways I kept consistency in my app design process:

USE YOUR SYMBOLS, TYPE STYLES, OBJECT STYLES, AND COLOR PALETTE

Sketch already has some great tools built in to help you. Use them! But be careful of one thing - it’s easy to change the specifics of a style without noticing it. Colors in your palette are a little bit more dummy-proof, but make sure you’re actually using them and not your eye dropper.

Use symbols for things like your status bar, confirmation buttons, and tab bars. Symbols can also be tricky, as it can be easy to forget that your object is tied to a symbol, and if you edit you’ll edit everywhere. You can detach your object from the symbol to tweak an instance, but if you make a global change later you’ll have to remember that it won’t update.

 

CREATE A BASIC DESIGN SYSTEM ON ITS OWN PAGE IN SKETCH

I keep a page called Styles & Assets in my sketch file, with pages such as Typography, Icons, Buttons, Forms, Tables, and a few more. When I need to create a new element, I try to make sure I check these pages to see if I have anything similar that I can tweak. If I do create something new, I’ll do my best to drop it back into my Styles page.

You can also create entire screen frameworks to be copied and used as a template elsewhere in your app. This will save you from rebuilding screens over and over, and combined with the use of symbols you can save yourself many hours of redundant work.

 

CONDUCT A DESIGN AUDIT AT KEY INTERVALS

This one is a little bit like a code refactor, and it can be a bit time consuming if you’re deep into the project with hundreds of screens. A design audit can range from:

simple: visually reviewing each screen to see if anything is out of place.

complex: printing out all of your screens and taking a marker to all instances of text and object types.You really only need to bring in these big guns if things have gotten too far out of hand.

Keeping consistency in your work not only will save you time from needing to rebuild work that’s already been done, but it’ll keep your team on the same page when new work needs to be created in the future. These methods were helpful on our recent project, and allowed me to turn over clean, well documented design files. Your future self and your developers will thank you!

July 21, 2018No Comments

Falling in love with Brand.ai

Brand.ai just changed how I design with teams. For the last nine months I’ve been living with:

“do you have the style guide open? I need to update it”

Having a living style guide for your web design is now a must-have, but it mostly solves problems for the people building the site, and doesn’t do a lot for those designing it. If you design with a team, you don’t need CSS snippets, you need reusable components in Sketch – and that is exactly what Brand.ai does. It creates a central repository for all of your brand styles such as colors, typography, and even the language your brand uses. It has a URL for anyone in your company to use, plugins for Word and Powerpoint templates, and the styles can even be exported into SASS, LESS, and major mobile development languages. There are other library plugins that have come out that have tried and failed to do all of the things that Brand.ai has been able to provide.

 

But why do I love it so much? You can share components.

The sketch plugin allows you to share stype styles and any kind of layer or group. For example, when we design our case studies we can now sync all of our different type/image layouts with the styles of our web’s CSS so that there’s no more designer/dev confusion. And these styles can be shared without having to pass one Sketch file back and forth or worry about versioning. Every button state, every form field, it’s all there ready to be built into a design like LEGO. There’s also a spacing and radius section to help everyone on your team produce consistent designs.

 

I’m still learning all of the things it can do, which is the sign of really fantastic software. I’m thrilled to add this to my toolbox. Even if you work solo, having a library of components will improve your own design consistency and make your workflow fly.

617-390-3116 • write me @ifyoumake.it • Boston, MA