Optimize Your Design Process

The present is always the best time to take a step back and analyze your design process, because there’s nothing more valuable than your limited time on this planet. Could you spend your time making a bigger impact? Are you getting bogged down in details that don’t matter? How can you use your time more wisely?

Photograph of a dandelion.

Time is precious. Don’t waste it! – Photo from Flickr user Neal Fowler.

If you have a good design process, you’ll create better design and more of it (which should also mean more money). These tips are mostly applicable to designers, but developers can certainly benefit as well. Let’s dig in.

Understand

The most important step in any design process is to understand the problem. In this early phase, you should spend most of your time talking to your stakeholders (whether that’s a client, your boss, or yourself). Time spent understanding the problem will save massive amounts of time later on, because the changes you make should be smaller. Iteration is inevitable, but making changes early is cheaper than changes made later on.

When speaking with clients, make sure your questions are centered on the user’s goals. Nobody opens a web app or a mobile app arbitrarily. Rather, they have some sort of goal in mind, even if it’s a subconscious goal. The user might want to book an appointment, browse the latest news, or learn a new skill. Push this line of questioning until both you and your stakeholders share a detailed understanding of the product’s role in the user’s life.

How to Freelance and How to Run a Web Design Business on Treehouse can help you understand more about how to work with clients.

Sketch

After you have a keen understanding of the user’s goals, it’s time to start putting ideas into visuals. Designing in Photoshop, Illustrator, and other similar tools can take a tremendous amount of time because they’re more detail than you need (at first). Even a wireframing tool like Balsamiq Mockups or Omnigraffle might be overkill.

This wireframe drawing depicts an example title with example text on the left side. There's also a call to action button encouraging visitors to buy a product. On the right side is a video player.

An example of a wireframe mockup created in Balsamiq Mockups.

The best way to start rendering visuals is with a simple drawing tool. I prefer a writing utensil and paper, but a simple sketching app for a tablet can work as well. As long as it’s fast and cheap for you to try ideas. At this point, you should mostly focus on fundamental shapes and composition. Create the rough outline for each page element and then place them together. The most important elements should be emphasized through any combination of unique shape, increased size, or contrast of value (lightness and darkness).

Focus

Your sketches don’t have to represent a final result, but they should get you far enough so that you don’t have to make major layout adjustments later. When you feel like you’ve got it, clean up your wireframes and resync with stakeholders. Chances are, you’ll need to iterate before advancing. That’s OK though, because adjustments at this stage are still very easy to make.

Now is the time to focus on what the app is actually going to be in the most concrete and practical terms. Cut any features that aren’t necessary and scope the remaining features so that they’re atomic and realistic for the time available. You want to make sure that your initial ideas are reflective of a project that you can actually accomplish.

At this point, you might want to make a high fidelity mockup using Photoshop, Illustrator, or any other “pixel perfect” drawing tool. Personally, I prefer to skip Photoshop whenever I can and just start coding an HTML/CSS prototype using a framework like Bootstrap. Often my code prototypes end up becoming the real project, which saves time.

Rendering your ideas in more detail will shine a spotlight on any remaining areas of ambiguity. If there’s something in your initial sketches that wasn’t detailed enough, you’ll uncover those problems now. Iterate and repeat.

Critique

We live in a wonderful time where it’s easy to get opinions from other people. If your work is not confidential, you can use sites like Dribbble or the design critique sub-Reddit to solicit honest feedback. If your work is confidential, you can still probably get away with asking your peers or other designers that you trust and know personally.

Sites like Dribbble can help you fine tune your work through honest critique.

Sites like Dribbble can help you fine tune your work through honest critique.

You may also want to resync with stakeholders once you have a high fidelity mockup, just to make sure that everything was transferred from sketches as envisioned. If you’ve been communicating at the previous phases, colors, fonts, and copy should make up the majority of the changes. Layout changes can occur at this point, but they’ll take much longer than they should, so do your best to finalize the layouts sooner rather than later.

You may also want to start conducting simple usability tests using your prototypes to ensure that you’re still on the right track. Usability Foundations on Treehouse can help you with this.

You’ve probably noticed by now, but you should make sure you iterate at every phase of the design process as well. Iterating isn’t a step. Rather, it’s a pervasive aspect of any workflow. Your ideas will morph and change no matter what, so make those changes in the most efficient way possible.

Deliver

A project is no good unless it actually gets delivered to the people that use it. Many projects end up in limbo where designs change over and over. You can circumvent these issues by setting deadlines and milestones for every phase of the process. When does the client need to settle on a page layout? When should there be no more features added? When should a release candidate be ready for bug testing (and bug testing only, not feature changes)? It varies for every project and scenario, but it’s important to make sure that measurable progress is being made. If the project seems to be stuck at a phase for too long, it’s time to step back and figure out why.

A nice service that can help make sure you’re ready for launch is Lauchlist. The free version can help you get started, and if you use Launchlist a lot they have paid features that can take you further.

Speeding up your design process and staying focused is easier said than done. If you have any additional tips that I’ve left out here, I’d love to hear about them in the comments!

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

2 comments on “Optimize Your Design Process

  1. Thanks for sharing these great tips to use your time in the most efficient and effective way. Just a note however, I wouldn’t share any confidential work with anyone that is not agreed upon between my client and I. It would be a breach of trust, and that’s not something you want in your business relationship if for some reason, somehow… the project got out. Just be careful!

  2. Nick , thank you for shearing this. Actually, i was surprised that you said its better to use Balsamiq Mockups or Omnigraffle. I thought its easy to make rough design in Photoshop. But i will try all tools in this article!