I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.
Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.
Hey, You Got Math In My Art…Sometimes the abstract nature of design is enough to make you envy the people over in accounting, with their definite answers and proven formulas. While the beauty of design is that it transcends the world of definite answers, introducing a little math in the form of design matrices can help you create better websites by providing a clear picture of where the website design is today and where it should go tomorrow.
Design matrices don’t require any serious math skills because they’re based on the coordinate system. Chances are you’ve seen a competitor matrix that ranks brands according to two key attributes on X and Y axes (for example, value could be plotted against profit margin). A design matrix is essentially like a competitor matrix but ranks the client’s website against competitor websites, and it uses design attributes (“clean” and “warm,” for example) instead of other points of competitive comparison.
A typical competitor matrix ranks brands according to rational factors. (This example, which compares a few car models, was created for illustrative purposes only.)
A design matrix ranks website designs according to design attributes. (This example, which compares airline website designs, was created for illustrative purposes only).
Design matrices are powerful tools for determining the path of the website design process, because: they force you to determine two design attributes to focus on; they build consensus within a team; they guide the clients’ perception of competitors; and, most importantly, they lead to differentiated website designs.
The Art (And Math) Of Building A Design MatrixStep 1: Gather InformationTo build a design matrix, you will need to know the client’s core brand attributes and main competitors. You should also have a broad understanding of what the redesign aims to accomplish (from a design perspective): “the website is cluttered” or “our website is not engaging.” The good news is that information gathering is a normal part of the discovery phase.
A design matrix should not be the only piece of work involved in the discovery phase, but it can replace some other approaches. Creating or documenting a brand’s position and defining the key redesign goals are essential. However, a design matrix could potentially replace mood boards. A mood board is a collage or grid of images that capture the “feel” or “tone” of a brand. They are valuable tools for providing direction to new brands, but they provide a less concrete direction than a design matrix. If the brand is in its nascent form and needs broad high-level direction, then mood boards work well; but if you are working with an established brand or a client who prefers a concrete approach, then a design matrix is the best bet.
Document the brand’s position before creating a design matrix. (For illustrative purposes only.)
Image Spark is a great resource for creating online mood boards—particularly useful if you are working with a company that requires high-level brand definition.
Another common discovery activity that design matrices can replace is the “competitor website review.” Looking at competitors’ websites can generate lively discussion, but too often it either shifts the focus to feature sets instead of design direction, or it becomes a cherry-picking session for disparate design elements from a variety of websites that the designer is somehow supposed to mash together into a single coherent website design.
Create a design matrix that shows the current website in relation to competing websites. This way, you are less likely to get distracted by feature sets or be expected to combine all sorts of design elements. That said, if you are looking for an energizing group activity, competitor reviews can generate more brainstorming than a design matrix. Doing both is an option, but if you do that, then do the matrix after the walk-through of competitors.
Delta Airlines’ website.
United Airlines’ website.
Looking at these individual airline websites, rather than comparing them on a design matrix, can lead to a less design-oriented and more feature-focused conversation.
Step 2: Determine Your X and Y AxesNarrowing down a design direction to two attributes can be uncomfortable for those of us accustomed to creative briefs that list a litany of brand attributes to guide our design. How often have we heard that a design should be “clean,” “inspiring,” “warm,” “engaging,” “approachable” and “trustworthy”? How do we even accomplish just two of these attributes? And if we must choose only two, how do we decide?
Understand that a design matrix is not intended to limit the final design to two attributes. That would be almost impossible. It is intended to illustrate the two most important attributes for taking the website design to the next level and differentiating it from that of competitors.
To determine your X and Y axes, ask yourself the following questions:
Of all the brand’s attributes, what will make this client stand out from the crowd? Which design traits reinforce those brand attributes?What are the competitor websites’ strengths and weaknesses?What does the design need to do better in order to accomplish the website’s goals?The X and Y axes should not be nearly synonymous (for example, “warm” and “engaging”), nor should they be mutually exclusive (“innovative” and “traditional”). There should be a slight tension between the two attributes.
The airline websites, for example, are ranked according to how “clean” and “personable” their designs are. There is a slight, but not negating, tension between these two attributes. Clean websites can come across as cold if they don’t have a distinctive voice or warm color palette. Personable websites are often less functionally organized. Achieving a high ranking for both attributes is a worthy challenge, and stepping up to that challenge will definitely create a distinctive website.
You might find that you change the labels of your axes as you place the websites on the matrix (see step 3), but the above process should get you pretty close to determining what the final axes should be.
Step 3: Play a LittleYou know the competitors. You have a clear idea of what is important, brand- and design-wise. You have determined your x and y axes. It’s time to try some things out.
Place all of the websites on your matrix as you would rank them off the top of your head. As you begin to place them, you will most likely rearrange some as you compare them to others. This is a natural part of the process because the matrix shows relationships as well as individual rankings.
I was influenced by Jet Blue’s overall branding and so originally ranked its website’s personality fairly high. Later, when I compared it to the Delta and Virgin America websites, I revised the ranking.
Design matrices do not have to be limited to ranking competitors. They can also show a client’s website’s position among affinity brands (i.e. brands with a similar “feel” and customer base). Mini USA and Apple, for example, might be considered affinity brands because they both exemplify modern design and appeal to similar customer types.
Step 4: Get SeriousThings will take shape fairly quickly, but there is a final step before declaring your design direction matrix done and dusted. Before sharing the matrix with the client team, make sure you can defend it. Show it to others in your agency and see if they agree with your placement decisions. Ask these key questions:
Do my axes represent the two most important design attributes?Can I clearly articulate why I placed each website where I did?Will the redesign be able to get the website to the top-right corner? If not, what is holding it back?If you answered yes, yes and yes (or yes, yes and yes if we do a certain thing…), then your website design direction matrix is ready to share with the client.
Creating Buy-In With Design MatricesEveryone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.
The design matrix will clearly show which websites you think best capture the desired attributes and where the current website falls into the mix. It is a tangible foundation for a conversation about design.
Invite the client to participate actively in this stage of the design process. Clients usually want to feel like they have had direct input in the design, and designers always prefer that the input comes sooner in a high-level, directional form (“The design feels cold”), rather than later in an overly specific form (“Make that element blue”).
Discuss the following questions:
Does the matrix address the two most important design attributes?Do we all agree on the placement of competing and/or affinity brands?Do we all agree on the placement of the client’s brand?If we end up in the top-right corner, are we where we want to be?Using a d[…]