2014-05-01

Co.Labs

How To Translate A Business Problem Into A Design Pattern

Which design pattern you choose for a site should depend on how users react to your experiments.



As we all know, design is more than just pushing pixels. Clever designers think about design patterns while they design. A design pattern is a reusable solution to a common recurring problem that your users have. Often, design patterns are used in software interface design. From the iconography of emoji to the checkout flow on an e-commerce website, you’ll find specific patterns everywhere, online and offline.

But which design pattern you choose for a site depends on the problem you are trying to solve. I spoke with two design-centric web development teams, Threadless and Squarespace, to learn more about how they solve for design patterns.

Threadless: Connecting Buyers To Makers

Threadless faces the same design challenge as many dual-user sites. Their e-commerce website gives designers (the first type of user) the opportunity to create designs which will appear on clothing. At the same time, the website sells winning designs to consumers, who are the second type of user.

I spoke with Billy Carlson, director of UX at Threadless and Nathan Hinshaw, lead front-end engineer, to understand how they tackle these problems.

It all begins with a high-level strategy, Carlson says. "Our website allows to connect artists with a global audience of patrons who can support [designers] with a simple click of a button." Important to their success was understanding that the user experience of the whole community would be crucial. This wasn’t an easy challenge, according to Hinshaw: "We have to close the gap between people who come to be part of the community and those who come with the sole aim of purchasing shirts."

There’s always an opportunity to beat the status quo by designing new interfaces and stepping away from popular existing design patterns. Results can be mixed, but experimenting with your interface can lead to greater success. "We designed a feed that streamlined the viewing and scoring of submissions—and has led to much more voting," Carlson says.

Threadless understands that design patterns exists out of multiple components and not just the user experience. Some examples they gave me include the copy on their website, the scoring system to grade designs, and a unified design language including a subtle color palette, consistent interaction guidelines, and a focus on process driven development. It pays off.

Efficient Design Patterns Require Experimentation

Instead of using standard interface elements, customizing and experimenting has become a part of their strategy. This effectively created new interface design patterns to use. "Our job is to hold the work [of the community designers] but not to overshadow it," Carlson explains. Hinshaw emphasizes that it’s a dynamic process. "The design strategy […] is first and foremost trial and error. We’ve moved away from a comp-to-code mentality, and instead approach design as much more fluid, something that is iterative and communication driven."

Threadless enters new waters as they test new e-commerce flows or update specific components of their website. When I ask what their worst design pattern change to date was, Carlson replies: "Our site redesign. We made some assumptions that confused our users. As we learned in our testing, guiding a new user through the different areas of our site requires a very coherent and disciplined design strategy. The visuals and words we use need to be simple, definitive, and actionable." Hinshaw agrees, "Making assumptions about how people will use a site is almost always doomed to failure. Navigation and catalog flows are prime examples of this."

Data collection to measure success is an important part of the Threadless design strategy. Every decision is accountable. "Through conversion experimentation and analysis the end product is better than the sum of it’s parts," Hinshaw concludes.

As design patterns are applying best practices, you would assume they are a great starting point when designers tackle a problem. Hinshaw emphasizes that we need to think for ourselves, and for our users. "Design trends get run through a photocopier, eventually becoming a washed-out reference to the original idea. As someone who is creating for the screen, whatever that screen may be, you need to ask yourself why you are making the choices you are. Read the history and theory, listen to people, talk with people, try new ideas, but find the solution that is best for your users and know why it is the best."

How Squarespace Makes Tools Everyone Can Use

Squarespace, the company which provides beautiful accessible templates to a diverse group of users deals with similar challenges. Not only do they have to think about the interface and their variety of use cases for their templates, but also the backend CMS, which needs to be equally as accessible and useful for their user base.

I spoke with Michael Heilemann, director of user interface, and Josh Kill, director of platform, to discover how they tackle these problems and what kind of challenges they come across while building and improving Squarespace.

"It’s surprising hard to design things that are future-proof," Heilemann begins our conversation, "We want to be where the [web] business is going. When we redesign an interface, it is obviously based upon what the business wants. Often we require to involve design very early on." Kill explains that Squarespace has some unique challenges. "We have to build a product which works for everyone, yet is specific enough as every industry has their own standards," he says.

As it’s straightforward for seasoned designers to apply best practices, I ask both how they know what requires improved designs. "It comes from our experience, or our top end of users. Sometimes we discover new needs," Heilemann says. "We like to verbally define the problems."

Challenges Of Iteration

Improving existing design is of course something which any designer tackles. It has consequences as well. "It’s hard to take things back [once released]. We have soft launches," Heilemann says, "I look at numbers and figure out what is actually being used. A product is never finished." Kill agrees, saying "There’s always the compulsion to do things new and fresher. We understand the value of iteration and polishing."

He emphasized that they’re a company which is not metric-driven and that improving design patterns shouldn’t necessarily be based upon numbers, but it shouldn't be based on gut feelings either. "I want to redo everything all the time. But, shipping creates the real value so we can see how it goes," Heilemann explains. Kill says there’s always the problem of knowing when to ship and how much one can iterate. "Just enough. But what is just enough? There’s always a certain balance and some things live in testing forever."

"A lot of stuff could be a lot more simple," Heilemann says, as he emphasizes that content management software can be brought to a broader level for consumers. Challenging the status quo and stepping away from existing design patterns is a natural component of this goal. "You’re bored with trends quicker and compelled to design something new," Kill says.

[Image: Flickr user Anssi Koskinen]




Add New Comment

0 Comments