Better Design Through Iteration and Collaboration

Sara Olson, Marketing Analyst
#Design | Posted

“Just make it pretty,” is the wrong request. Design is about transformation and rethinking how things ought to be, versus how they have been.Design solutions go much deeper than “visual design.” Tasks and roles can include IA/UX design, creative direction, art direction, and establishing a visual language. The output of all of these things should amount to a consistent brand experience for the end user. Waterfall and siloed processes just don’t work anymore. By embracing an open design process and getting rid of “The Big Reveal," we’ve learned that a better end product can be designed and built with the help of all involved.(Learn more about the collaborative design process in our webinar on June 16th.)

Opening up the design process

How can we design, if we don’t understand the problems that need to be solved, the goals that need to be met, and how – ultimately – the site is going to be built? It’s not only designers who can be involved in the design process. The best design work is born when the process is opened up to include all important perspectives. Good ideas don't discriminate.

Screen Shot 2016-05-23 at 4.18.18 PM

Clients want to know that their perspectives are being heard; hearing them out is paramount to the success of the project. Developers also provide highly valuable insight. As they are the ones who will bring the designs to life in their ultimate medium (the web), don’t make the mistake of leaving them out.

Do Your Research

Kick off the project with a research-oriented trajectory. Ask the client questions about their likes and dislikes in reference to other web sites or design work. Visual Inventory or 20 Second Gut Test deck are useful tools for spurring conversations and setting constraints around aesthetic preferences.It’s also crucial to pinpoint the state of their brand. How is their brand documented? Are there rigid brand guidelines? Is there a parent brand? Who on the client side is responsible for brand governance? The website is the most prominent touchpoint when it comes to the brand, so it’s paramount to have consistent messaging and identity elements throughout. Without consistency, users will pick up on the lack of cohesion, and it will translate into a disjointed experience. Screen Shot 2016-05-23 at 4.20.20 PMIn addition, you'll need to put together and test navigation structure, content models, key tasks, user journeys, and personas. Careful coordination throughout all stages of the research process will limit confusion and ensure you don't waste valuable time designing unneeded components. Screen Shot 2016-05-23 at 4.21.16 PM

Start Visuals in a Low Risk Way

Start with a mood board. Find images on the web, in magazines, or in the wild, and bring them together in a way that hints at the feeling to be conveyed. This can be a great way for visual thinkers to communicate what cannot be said with words, as well as setting expectations early for clients. Invision Boards can be a great tool for making mood boards, sharing files, and serving as a powerful collaboration space throughout the design process.Screen Shot 2016-05-23 at 4.22.12 PM

Use Lightweight Artifacts to Establish a Direction

Working with lightweight artifacts allows you to share smaller chunks of design in less time. These artifacts can be created quickly, thrown away, or combined with other artifacts without requiring a huge design lift. Style Tiles and Element Collages are useful for communicating designs in this stage.When iterating on these artifacts, be cautious not to get stuck in the mindset that this is a deliverable that needs to be perfect. As beautiful as they may be, they are meant to be discarded to move the process along to the next stage.

Is Comping Necessary For This Project?

This is always a good question to ask when it pops up in those RFP’s. If you’re a designer, you’ll know that stakeholders want to approve designs before they are released for mass consumption. It’s the way things have been done for a really, really long time.Just as the frazzled editor proofed a magazine before it went to press, stakeholders of websites want to see what their web page is going to look like when it’s done. To the pixel. To all you front-enders out there who have had to push pixels around to make sure they looked exactly the same on all browsers, I salute you.

But are comps really necessary?

Screen Shot 2016-05-23 at 4.23.35 PM

I’m not saying we don’t comp anymore, because we do. Why would we throw away a perfectly good way of communicating designs just because it became highly abused? It’s in the toolbox, along with the other nifty tools that we have now. But instead of being the final deliverable thrown over the silo wall to developers, comps are now a disposable piece of the design process. The key is being able to iterate on them in the browser – whether html/css prototype or a dev site – to fix issues and evolve the design as needed.

If a client is pushing hard for all the design work to be done in flat comps, try to sell them on the outcome, not on the process. In most cases, developers can start building sooner, and with multidisciplinary teams working together to build the design in the browser, a significant amount of budget can be saved.

(Read more about the parallel design process in Evan Lovely's blog.)

Prototyping

Getting a prototype in front of stakeholders is essential for testing how users interact with the screens. As much as we like to think we know what users want, there’s really no way to truly know until you see them using it. Without prototyping a design, you'll likely have to do costly rework during implementation to fix problems with the flow. Ty Invision or Marvel, two great products for prototyping flat designs. Screen Shot 2016-05-23 at 4.24.51 PMBecause the web is where the design will ultimately live, html/css prototyping can provide multiple benefits as prototyping vehicle. The advantages of using one of our favorite tools, Pattern Lab, include being able to architect the front-end before back-end features are started, build a companion in-browser style guide to act as documentation for the reusable pieces and code snippets, and opening the door to create a robust design system.(Learn more about our favorite prototyping tools in Chris Wright's blog post.)

Design Systems

As web properties get bigger and more responsive, we’ve moved away from page-based design and into the realm of design systems. Component-based design is all about creating repeatable patterns in code.

“A Design System is a set of rules and assets that define how to express everything a visual language needs to say.” -- Micah Godbolt, Phase2 Developer

When building a design system, designers and developers need a common language to ensure consistent components -- both visually and in code patterns. With a shared library, site editors and builders can create a unified and cohesive brand experience to the end users across multiple web properties. (Watch Micah Godbolt present the "road runner rules" for design systems.)

Wrap it up

With a collaborative and iterative process, there are more opportunities for team members – both client and agency – to feel included and know that their voice has been heard. When the design solution goes beyond being just being “pretty," teams can work together to build better quality products to solve real, fierce problems. That is the true, and lasting, power of design.

 

Sara Olson

Marketing Analyst