6 Tips for Building a Web Design Process That Boosts Your Team’s Efficiency

Whether you’re first starting out or developing a new team from scratch, it's vital that you make your design process a priority. It will give your team structure and increase efficiently throughout your company. Here’s how one digital agency developed their own design process, and how you can create and apply your very own.

Whether you’re first starting out, or developing a new team from scratch, it may not seem necessary to put an emphasis on your process; you’re pushing projects through and everyone is all hands on deck.

The reality is that this is exactly the time to make your process a priority, as it will give you and your team a structure in which to work, and increase efficiently throughout your company.

Verbal+Visual has been around for over seven years, and every month we take the time to reflect and see how we can improve our process. This allows us to not only enhance our efficiency and collaborative skills, but also  to filter out extra, redundant work and focus on making crucial work the best it can be.

Here’s our process and how we developed it over our many years in business:

You might also like: Crank Up Your Design Productivity with These 6 Little Known Tips

1. Do your research

The first step in creating a design process is research. In order to help you or your client reach the goal, you have to know what the problem is.

To begin, study your clients existing site. Here are some tips to get you started:

• Identify elements that are working and others that aren’t
• Identify the brand’s voice
• What are they saying with their brand?
• What are their goals?
• Who are their audience?
• Who do they want as their potential clients?
• Perform a usability test to figure out what’s working and what isn’t

2. Study the competition

Sometimes you have design assumptions and hypotheses, however it often helps to look to outside sources for inspiration. How have competitors crafted features? What is their strategy? What are the standard best practices that you can identify across multiple competitors?

Here are a few other questions you should try to answer:

• Who are your client’s direct competitors and what are they doing?
• Again, identify elements that are working and others that aren’t.
• Are there any similar elements that competitors always use? If so, how can we reinvent it so that we stand out above the rest?
• Take inspiration.

3. Get inspired

After you get an idea of what the problem is, it’s time to solve it, but first you’ll need to come up with ideas of your own. Below are examples of site aggregators that we use to begin collecting inspiration:

• Awwwards.com and Siteinspire.com feature beautiful websites. They’re both great sources to learn what’s trending or to get new ideas.
• Designspiration.com and Behance.com feature inspiring visual elements.
• Visit galleries and art museums. Take pictures, they might inspire you for a future project.
• Take inspiration from design that’s already around you. Street signs, billboards, magazines, nature, etc.
• Check out Shopify’s collection of ecommerce inspiration and creativity articles.

4. Create a design studio

Gather all your thoughts into one place, so you can look at it all at once. At this stage of the process it’s all about quantity, not quality. Put out all your ideas, even the ones you think are totally crazy. It might seem crazy in your head, but you’ll never know until you see it in real life. Who knows, that crazy idea might be the one thing that makes the design unique.

At Verbal+Visual, we run creative activities called design studios with key project team members, whether they are designers or not. Essentially, a group of individuals from different walks of life come together and bring ideas to the table in order to solve a problem. These unique perspectives have just as much (if not more) potential of developing innovative design as one designer’s siloed vision.

Here’s how our design studios works:

• Discuss an area of opportunity. You might have done the research, but other people on your team might have been working on a different project before you dragged them to do design studio. Fill them in, so that your team is on the same page.
• Specify what you are designing for. What will this studio focus on? Header? Navigation? Homepage? Additionally, specify what platform type you will be designing for. How will this impact the design?
• Give context. Explain the circumstances  for which you are designing. Example: design a landing page for a local grocer that will allow users to add items to their basket without having to visit a unique product page.
• Diverge. Participants have five minutes to sketch out as many ideas as possible. These sketches will consist of low-fidelity renderings of UI content (images, copy, buttons, accordions, carousels, etc.).
• Converge. Each team member is given a brief period of time to present their designs and justify the decisions they have made. Fellow team members provide feedback and questions in order to reveal further insights from their peers.
• Diverge. Once each team member has defended their design, the group will once again diverge for five minutes in order to sketch. However, this time the goal will be to produce a single design, which cannibalizes the best elements of individuals sketches.
• Reflection. Once again the team will converge in order to discuss their ‘final’ designs. At this point, patterns should begin to arise and common features should emerge between designs.

Design studios are a great way to get a fresh perspective and new ideas. Use it as often as needed throughout the design process, they don’t have to be limited to the beginning.

5. Build wireframes and prototypes

Following our design studios, we proceed into the form wireframing process. This process synthesizes our research and the ideas generated from the design studios, and puts it into the first cohesive visual format: wireframes and prototypes.

We build wireframes by taking the information architecture, research, and content to design a layout that sticks to layout only. No images, only one font, navigation, a logo, and content boxes are positioned appropriately.

This area is where your usability tests from the current site, and all of your research, come into play. We typically start with a desktop layout first, however we keep mobile in mind right from the start, and constantly poke holes in the design as it relates to mobile. Mobile viewership is now higher than desktop, so always design with mobile in mind.

As we proceed throughout the wireframing process, we use those wireframes to create clickable prototypes. There are several prototyping tools available on the market, but our team prefers to work in InVision. This part of the process is very, very important, in a few different ways. First and foremost, investing time into building wireframes correctly means you’ll be more certain your user experience will work well, and you’ll save countless hours in the design and development process, as well. Here are a few simple tips to perform the wireframing portion correctly:

• Design with development in mind. Find out what responsive framework the development team will work in (i.e. Twitter Bootstrap), purchase a Photoshop or Sketch template for that framework, and design based off that grid. This alone will save countless hours for the development team.
• Prototype and perform usability tests. This is also vital, as it ensures that what you’re designing will actually be usable. Check out our post on usability tests to learn more.
• Design responsively. This should be a no brainer, but always make sure that you’re designing for every screen appropriately (mobile, tablet, laptop, and large desktop). All four are very important, and you’ll want to include the visual designer (if it’s someone else) and the development team in the process at key points to make sure everything looks kosher.

You might also like: 5 of the Best Prototyping Tools to Test Out Your Web and Mobile Designs

6. Polish with strong visual design elements

If you’re reading this, you probably have a strong handle on the visual design process. The main points of visual design that we consider, once we feel strongly about the wireframes are:

• Make it an experience. What you’re creating should really be something that delights a user. Think about how can you use animation, UI design, video, cinemagraphs, and other unique content, and subtle experience features, to truly delight customers, while also keeping SEO and load time in mind. It’s part of the challenge of digital design these days, and something that every designer must address.
• Stay on brand. Keep to a core structure and design framework. This includes headers and body copy, as well as a visual structure that is consistent across the board. Make it easy for your development team to take what you’ve done, and translate it into a live site.
• Create animations and videos. Creating short animations or videos to show the development team how a site should function, can save hours upon hours of back and forth. It will allow the development team to build and the visual designer to really control how the site should feel.

In closing

Creating a consistent design process will free up your time, allowing you to be more creative.  After using this process several times, you’ll also begin to see consistency in your results.

Efficiency will improve, and you’ll be able to think freely, as previously difficult tasks simply become part of the process.  Everyone’s process is different, so use this as a framework and make it your own. After all, that’s what will allow you to share your process with clients, and allow them to identify uniquely with you.

What does your team's design process look like? Tell us in the comments section below!

You might also like: Why Hack Days Are Great For Designers