My Step by Step Design Process

As the new decade starts, I’m sharing a lot more of my thinking on this here blog. Today, I wanted to break down how I work on client projects; as quite a few people often ask me the question of “so, how do you work?” and it’d be good to have a place to point them going forward.

Note: This article isn’t about the business side of design. It is more about the practical side and how to create good work.

Step 1: Start With Planning

Any good build starts with a plan, and design projects are no different. In the early stages of a project, it’s super important to gather as much information as you can on the following:

  • What is the problem being solved?
  • How are we solving it?
  • Who will be using what is being made?
  • Where will they use it? (What device, location, time of day, frame of mind).
  • Why will they use it?

These five questions stem into everything about what you’ll be creating. From the niche you’ll be working in, to the style you’ll ultimately decide on; and everything in between. It can end up being a pretty overwhelming amount of data, but every piece of information gives you more power to make better, more informed decisions with. So make sure you always take time out to speak to the client (or if working on a personal project, clearly think through) to extract this information.

Once you have gathered as much knowledge as you can, you’ll need to decide which pieces of it are actually important; and which are just opinion or incorrect. After that cleanse, you’ll be in a good place to start scoping things out and deciding where to best assign your efforts as you build your plan.

Step 2: Schematics

Following getting the data in place that will inform your decisions, it’s time to work out how to best dedicate your time during the project. This is usually called a scope or a statement of work. You’ll need to share this with the client so they know what to expect and the boundaries of the project are clear.

If you’re working on a personal project, there’s no one you’ll need to share this with (unless you want to). But it is still an important exercise to work on before you get started. A scope helps you understand clearly what you’re trying to achieve and gives you a source of truth when you move into the next stage (where you breakdown the scope into tasks and a roadmap).

To prepare a scope, you’ll need to carefully curate the information you gathered in the first step even further (remember you already cut it down to remove any inconsistencies). This next step is where you use your own creativity, along with what the target audience needs, to provide a solution to the problem you’re working to solve.

Here’s an example of a scope for a typical design project:

Acme Inc is creating an app, Starlight, to help millennials find jobs as astronauts or in the space industry. The app will be on iOS and also needs a brand and art direction that appeals to the demographic. Enticing them to learn more and make a decision on if they wanna go space, or nah.

The kinds of apps the target audience is familiar with are Snapchat, Instagram and the usual social media apps. But another element of interest in our specific audience we should focus upon is their interest in science, specifically Space. As a result, they’re also frequent users of NASA Globe Observer and Star Walk. Both of these apps have some interesting patterns we can explore further to see how we can improve our own app.

After thinking on how we should approach things for the art direction, I think that we could work on something close to the attached, but with our own spin and polish. The result should be something unique, but familiar to the people we hope to impact.

On the app front, I’d estimate we’d have around 20-30 screens and would need to dedicate a big chunk of our time to ensuring the level of polish and intrigue expected by our demographic is there…

You get the idea.

If the above was a client email, you would continue into a bit more about the scope, timeframes and financials. But in this article, we’re staying focused on the WORK.

Let’s get into how to break a scope down once you’ve put one together.

Step 3: Roadmapping

After deciding on the best way forward, you’ve then got to chart out your next steps; one at a time. By mapping your journey; you drastically increase the chances of success over when you just dive in or blindly decide on a direction.

As roadmapping is fundamentally trying to guess how the future will pan out, it’s something you’ll never truly master. But as time passes, and you get more and more projects under your belt; you’ll get better at this mysterious art.

For now though, just keep in mind that your confidence and drive will naturally be significantly higher during the early stages of a project. It will gradually wane and you’ve got to remember that the key to good roadmapping is planning for the lulls and slumps. If you plan correctly, you’ll build habits and actions into your schedule that push you one step at a time to get over the finish line.

It may seem like an excessive amount of preparation, but without all of this planning, you risk falling off or losing direction. With it, you build good foundations to make something great upon and ultimately, win the mental war of attrition that is design.

Step 4: Research

As we move out of the planning stage and into making, we continue our focus on data (sorry). During the transition into production, you must test the waters and explore some of the hypotheses you made a bit deeper.

Let’s talk more about research. Contrary to the belief of some, research is not making a mood-board of Dribbble shots. Research is, in fact, a dive into the mindset of the person you’ll be solving a problem for; to find out as much as you can about them. What they like, dislike, understand, are scared by… And then comparing it against your scope and roadmap to make sure you’re on the right track.

By getting into the shoes of the person you’re creating for during this research phase, you set the stage for the right kind of ideas. You have a reference point and frame of mind to check back in with along the way, to make sure you’re always doing the right thing.

Step 5: Ideation

Now that all of the infrastructure and groundwork has been laid, it’s time to start getting ideas out of your head. If you’re any good at your job, you’re going to have a bunch of ideas. Most of these will suck (sorry, again). But you must get all of those bad ideas out of the way, so there’s space to explore the good ones.

Everyone has different methods that work best for them to extract ideas. For me, I find sketching on paper or an iPad to be the most effective. But others record their train of thought to listen back, take extensive notes, or need to go for a run to work out the ideas.

Whatever works for you, just make sure you explore and iterate. Don’t settle for the first idea or rush to dive deep into an idea too soon. Explore. Get feedback. Tread as many paths as you can before deciding on the best path to proceed down.

No matter how you do it, it’s all just a case of moving ideas out of your head and into a tangible space so you can move into digital production.

Step 6: Creation

Some designers progress from sketches or rough ideas to wireframes. But as I’ve moved through my career (it’s been over 12 years now, can you believe?), I’ve found wireframes to be more confusing than they are useful.

As tools have become faster and more efficient, the requirement for lower fidelity screens made in a “fast” tool like Azure has declined. It’s not like we have to deal with Photoshop and having a separate file for every screen anymore.

So personally, I jump straight from sketches into a few different options for high fidelity. It’s pointless leaving colour and detail out of a round of design for the sake of having this conversation:

“I’ve noticed the logo is black, as is everything else. Are we not going to be using colour?”

“Oh, these are wireframes. We don’t use colour here as we’re more focused on the layout and what we’ll be putting on each screen. The next round will have colour and more visual elements.”

“Cool, all this is fine. Excited to see the colour and visual elements”

If the project you’re working on is for yourself, you can have these conversations in the mirror if you’d like. But the point at the end of the day is:

Neither the end-user or the client care about these black and white boring screens. Keep them to yourself. Or skip them entirely.

I’ve found this approach of skipping wireframes to be pretty effective and haven’t noticed any problems at all, as I deal with UX and flow during my sketches.

Step 7: Move Fast, But Take Time

I save a lot of time during my process by omitting wireframes and the feedback rounds associated with them. This lets me move pretty quickly through the, typically slow, parts of a project. The time saved here can be used to iterate through alternate versions of your idea in hope of improvement, or on taking things to the next level.

Personally, I get 2-3 distinct visual options in place early on in a project. By making a decision on this early with a few experimental screens for each; I lock down how things will look and feel. This decision means that I’m able to take more time to polish things and work on things like animation.

In your own work you need to find those pockets of time in a project where you’re able to push consistently in one set direction to take things to the next level. It will be what not only sets you apart but delights your clients and customers too.

Step 8: Leave The Echo Chamber

As a designer working on projects for others, it’s way too easy to get caught up in the narrative that the only feedback that matters is the conversation between you and the client. This is a common pitfall.

To avoid getting caught in this loop, remember to carve out time to involve others in the process and to test with potential users.

It’s also vital you take opportunities to ingest other media and styles, as well as taking time away from the project to think and get some clarity. That freedom to think is crucial. It lets you have space away from the quick momentary decisions to look at the bigger picture and make sure you’re on track.

Keep In Mind

  • This process won’t always be so set in stone and you’ll need to be adaptive.
  • Remember to not only do a good handover with notes and all the assets but to provide feedback on the final product. Making sure it’s at the quality level it needs to be at.
  • Take feedback often and always be taking action. Don’t let the feedback get to you though. Remember it is feedback on the work, not on you.