I often think of the design process as a series of mistakes. Each step is moving toward the right decision and final product. The danger in this process is to make perfection the goal. Instead, the goal should be a viable outcome that has promise. In reading the book The Year Without Pants I was inspired by Automattic’s approach to releasing new products into the wild that were not fully polished. Their goal was to place a focus on innovation and creation. To see how the product performed. Once those metrics were in, they would then invest more time into fine-tuning and further iteration.

At LexBlog iteration has become the guiding principle as we design and develop the new LexBlog.com. As a designer, this iterative approach can be a challenge as you transition from a Photoshop background where everything crafted was pixel perfect but in reality not in tune with the real web.

I know of only one way to successfully ship products, and that is to ship imperfect products. Perfection never ships. It gets stuck in an endless loop of “I’ll just finesse this one last thing, and then I’ll be happy with it.” 
— Cameron Moll, 10 things I wish every design student knew

Iterative design approach aids

“Live design” your ideas – Move away from traditional design programs and into the browser. At LexBlog I use our modified Word Press customizer to build live designs, giving me instant feedback as I create. This approach allows me to see how my layout looks on the desktop and in mobile browsers. This approach reduces the number of hours invested in a fake plastic Photoshop comp that will then take more hours to edit and revise.

Use the browser inspector tools – I think every designer should have a good understanding of HTML and CSS. I’ve found the Chrome Inspector to be a valuable asset in my design arsenal. I can edit live pages using the inspector to modify the CSS. I can then, in turn, provide accurate adjustments to our developers.

Old Way:

Brian – We need to add more padding around the text inside the submit button.
Dev – What button, what text, how much padding?
Feeling – Meh

New Way:

Brian – Add 10px of padding to the text on .lxb_mct_subscribe_widget
Dev – Gotcha
Feeling – Huzza

Use Real Copy – Along with designing in the browser. Using real copy is essential. Think of the disaster when using a generic set of blueprints while designing and building a home only to find out the homeowners wanted a grand piano (a bit lavish) in the master bedroom. The same goes for using Lorem Ipsum dummy text in a layout. It will most likely fit perfectly due to designer nudging and trimming. Then a mad scramble ensues to make the real copy work once provided.

What are the benefits

  •  An iterative design process allows you to be more thoughtful as you return to edit and improve.
  • It provides real user data to aid in your next round of adjustments.
  • It guides you to make changes based on what the user has identified as important.
  • It removes the stress of trying to get it 100% right the first time.
  • It creates a historical narrative that you can use on the next project.
  • It creates excitement and drives the team to keep improving
  • It allows you to pivot in a new direction without a massive loss of investment.

I’ve found this approach to be highly satisfying as it builds a shared vision among team members and leads to a more successful outcome.

Iterate away!

Print:
EmailTweetLikeLinkedIn
Photo of Brian Biddle Brian Biddle

For the past 14 years, Brian has served as lead designer and art director for LexBlog. He works directly with the product team to provide design and UX/UI guidance for the tools that power the worlds largest legal network.

  • lexblog

    Huzza!