Forming A Design Team, Part II: Process

Here it is peeps, the second post in our journey to create a killer design team…PROCESS. EEEK,*GASP*…I know, firsthand, that process can be a “dirty” word, the bane of creation, and something most companies don’t effectively use. But in this post we’re not going to talk about traditional process, the one where X person get’s a job then hands over some requirements to another person and so on and so on. No…no, here we’re going to be talking about the design process, and yes the two go hand in hand and a lot of the same people are involved (or should be), but in this post I’m going to discuss the parts that make a design team stronger, more efficient, and produce better work.

So where do we start with our design process, especially in the ever changing landscape that is the web? Clark Wimberly from Invision has some great ideas in his post Reimagining The Web Design Process, most notably is that of an agile team. One that is able to easily adapt to changes, and make rapid adjustments as needed. No longer do we work (and live for that matter) in a world that has static or fixed content, so it’s only right that as a team we should be able to rapidly shift to match this.

He goes on to say that we need to stop using mobile first as a buzzword and actually start to approach our design process with smaller screens, using an “Atomic” approach, as Brad Frost would say (more on this in a minute). Clark couldn’t be more correct, especially since Google has recently (May 5th) said they are now getting more search queries on mobile than on desktop.

So, back to that Atomic Design thing…what is it? How does is play into our design process? It’s an amazingly simple, but complex, ideology on how to handle the design and layout of websites. Breaking it down to it’s most basic idea is that you start with a single “brick”, something like a font, or a few color options.Then take those pieces and make a small UI element, like a form or menu, you keep adding small “bricks”, bit by bit, until you’re left with an assembled page. From there it’s rinse, wash, repeat on the other sections of your site. So, how does this work into our process? Quite naturally, by taking our mobile first approach and combining it with this bit by bit assembly we can very quickly and early in the game start to target the areas of our layout that need adjustment, and make the necessary corrections before we’ve gone too far.

Methodology is just one aspect of the design process, there are actual steps, hence the process part, that should accompany that. What those steps are will vary from team to team, but loosely they should be: planning, research, design/development, iterate. What do these mean though?

  • PLANNING: figuring out what the project timeline is, when it starts and ends, when milestones need to be met, etc. This is also the phase when we need to determine who will be involved throughout the project, making sure the right people are brought in at the right time.
  • RESEARCH: Make sure that the problem we’re solving is the right one, ask questions WHY, HOW…dig deep to understand the project. Determine who our target is, establish restrictions and needs, to help eliminate questions that may arise later.
  • DESIGN/DEVELOPMENT(and prototype): Start to layout the concept, get ideas down into something more solid. Simultaneously development can begin with prototypes to test ideas.
  • ITERATE: Today a design is never truly finished, even after handoff things are bound to come up, so take feedback, comments, etc, and adjust your product to match the needs of it’s users.

A good process, much like a good team, needs to be agile in it’s execution. Not every project will have a need for every step nor will it all allow for every step, so it’s ultimately up to your team lead to make sure the right parts are followed at the right time. Remember that establishing or adjusting a current process can’t happen overnight, it’s a gradual shift, much like our Atomic Design theory, an effective design process should be built upon, bit by bit and allow for rapid adjustment.

Want to learn more? Check out Mobomo’s post on Forming A Design Team, Part I: Structure