Collaborative Product Design

Chapter 18. Design Interfaces with 4-Corners

[ 18 ]

Design Interfaces with 4-Corners

Four weeks into a website redesign, I ran a workshop that included both my team and the client. I asked each of the 15 participants to take two minutes and sketch a wireframe of the website’s homepage. When the timer went off, we collected all 15 sketches and taped them to the conference room’s beige walls.

Across the length of the conference room hung 15 different versions of the website’s homepage. Common elements appeared in several sketches. Many included a large image at the top of the screen. For some, the large image was a carousel. Others featured lists of products or news items. Some featured prominent links that spoke directly to different types of users.

After four weeks, why would 15 people on the same project have so many different visions of the homepage?

When anyone thinks about a screen, in their head, they picture content, functionality, and a layout. And they make assumptions about who will use the screen, why, where they came from, and where they’ll go next.

Even though wireframes seem like they are about screens, they really catch a snapshot from an entire scene. In my workshop, the participants sketched 15 different versions of the homepage because each participant imagined a different invisible interface.

Good interfaces need thinking. The 4-corners method helps you think with your team or clients, so you can make better interfaces. Your team will start building better ...