Tag Archives: #webdesign #usabilitytesting #weboptimization

Designers & Growth Hackers: Show Your Process

Show me, don’t tell me: visually communicating your process eases tensions across departments, and will make your design meeting a hell of a lot easier.

At Media Evolution’s The Conference last week in Malmo, EyeQuant’s co-founder Fabian Stelzer spoke about the war between data and creativity that so many of us feel in the marketing world, and offered a few concrete tools to make peace between these two perennially opposing sides.

Most of the way through the talk, he made mention of a simple yet universal way of bridging the conversion optimization language gap:

Show your process.

As opposed to an analytics expert slamming a 42 page market report on the conference table, or as opposed to a designer shrugging their shoulders and saying, “just trust me, I’m a creative”, showing how you’ve worked through a problem is crucial to finding understanding between teams. In this way, a universal, visual language is formed.

In this post, we’ll take a look at 5 key ways to visually explain your process, find common ground between different departments, and work through your web optimization process more efficiently.

Here we go…

A macroscope for Big Data

Back in 1979, Joël de Rosnay began speaking about a crazy idea called the “macroscope”. If microscopes are for observing the infinitely small and telescopes are for observing the infinitely great, thought de Rosnay, then what kind of instrument could we use to observe the infinitely complex? For de Rosnay, this was the macroscope: a global, holistic view of the world around us – one that finds connections through infinite detail.

MACROSCFIG1-438x235 (1)

With a global view of a problem (like a bird’s eye view from space), wouldn’t we then be able to see the best paths to take to solve our problems?

This, of course, is the rhetoric that has played through the minds of everyone who’s ever uttered the words, “big data”: in a complex world, we need tools to help us cut through the brush and see the light at the end of the problem: not just numbers, but connections.

We often forget to take into account a macroscopic view of the various problems that arise when it comes to web optimization. As a result, we get caught up in details, start fidgeting with pixels, and forgetting that, by zooming out of the minutiae, there’s always a big picture.

Create a Mental Image of Your Strategy

Chris Spooner made this great list for Line25 about design agency websites that do a good job of visually describing their research and design process. His examples vary from venn diagrams to squiggles, but the end result is clear: visual descriptions of complex strategy provide a mental image of a problem and its solution, putting everyone at ease by graphically describing what a process entails, why a certain part of the process is important, and most importantly, and by giving a macroscopic view of what the designer will do to solve their client’s problems.

Bonus: a global mental picture of your research and design process can help to justify aspects of your budget that might otherwise get cut out.

Screen Shot 2013-08-30 at 2.46.05 PM

Visualize your data

When we first set out to create EyeQuant in 2009, we had a hunch that our potential customers – e-commerce companies and digital agencies – were feeling the tension between data-driven and creative design.

Designers already had the experience to know what might work, but increasingly we found that they would need to back up their findings with data – in a way that everyone (including themselves) would understand. After all, marketing and advertising play in a far bigger playground these days, and intuition alone doesn’t cut it.

Crucial to ending the war between data and creativity is learning how to blend the two together. What we needed are tools and strategies to visualize data, and vice versa: accurate, intuitive, yet complex enough tools to grip the big picture – and all the little ones that surround it.

In the world of data visualization, Moritz Stefaner, who works with everyone from FIFA to Skype, is one of the great minds. In this lecture, Moritz makes an astounding point about marrying information with design – and leaves clues to everyone from growth hackers to designers on how to work with and show data and process:

“good visualizations show you the data, great visualizations show you the patterns of the data . . . good visualizations answer questions, but great visualization generate new questions . . . good visualizations tell a story, but great visualizations tell a thousand stories”.

Share your prototypes

There is a persistent misconception outside the design world that creatives tend to pull ideas out of thin air a couple minutes before a presentation. The reality couldn’t be further from the truth, but if this isn’t shown, then nobody will be the wiser. From an initial sketch on a napkin to a full deconstruction and reconstruction of a competitor’s web page, showing visual examples of each iteration of your design process provides transparency, and proves that you’re thoroughly working through problems.

A fantastic resource for keeping track and sharing each step of your design is LayerVault. LayerVault is a beautifully designed software that saves and catalogues every single revision you make, and let’s you decide which iterations to show to colleagues. What makes this app really special is the ability to return to a step you’d written off a day ago that, the next day, turns out to be the solution (without pressing command_z a thousand times).

Show your mistakes (and the tools you used to solve them)

We know, we know, there is a certain level of ego that needs to be upheld during design meetings in order to maintain a modicum of authority. As the old saying goes, though, “the truest characters of ignorance are vanity and pride and arrogance.” Speaking about your mistakes (and better yet, showing them) promotes an environment of empathy, of teamwork, and of humility. We’re all human, we all make mistakes, so let’s ‘fess up to them and learn from them.

Of course, making informed iterations during the design process can be difficult; testing a re-design or a new web page pre-launch is next to impossible, and going on market or design research alone leads to many unknowns.

  • Usability Hub is a crowd-sourced app that allows you to test several aspects of your design – first impressions, click engagement, and navigability – through quick user surveys. Usability Hub provides easy-to-read reports, word clouds, and test answers that give invaluable pre-launch insight into what you’re doing, and why.

  • Then there’s us, EyeQuant (we know, we know, self promotion…but indulge our vanity for a few seconds, we’re just really excited about what we do). Our idea is simple: At any stage of the design process, a screenshot can be fed into EyeQuant’s online app, and within seconds three visualizations of user attention will appear. We’re the only predictive eye-tracking software on the market with a strong neuroscience background, which is why we can safely say that our technology is over 90% accurate in comparison to a traditional eye-tracking study.  Oh yeah, we have a patent too. Here’s how it what it looks like when we did an analysis of ING’s website.

Come together, right now

Showing your iterations, showing how you tested them, and then showing what went right and what went wrong is a sure-fire way to impress upon your boss, your team, and your clients that you know what you’re doing. Laying out a clear roadmap not only instills trust in the others at the meeting, it also lets designers work with far more daring ideas. Just look at Google.

Better yet, it works both ways:

  • As a designer, showing your process proves to clients and colleagues that you’re not afraid to test your intuition and to work with tools to make this happen.

  • As an analytics expert, learning to work with information visually (and creatively) shows everyone else that data is not a cold clump of steely percentages.

During his talk at The Conference, Fabian suggested that we need tools that provide “creative data” – tools that are fast, communicative, objective, and not all too final. This last point is crucial: both creative and growth hackers need to come to terms with the limits of their own domain, and this is where they can come together.

Lame Optimization Ideas Hold Up Design Meetings: Here’s How to Stop Them

There’s an age-old saying that goes, “The only thing that stands in the way of a business making more money is a design committee meeting.”

Too often, a vague sense of compromise seems to be the only thing that is accomplished during a website optimization or re-design meeting. In the end, everyone is left with the feeling that a melon-baller has been taken to their heads, drained by the knowledge that that nobody really knows what they’re talking about, nor precisely how to fix what needs to be fixed.

So, how can you turn a design meeting into a painless and (most importantly) fruitful experience?

In this article, we pick apart the 3 lame optimization ideas that tend to hold up design meetings, and provide strategies that will put everyone at ease.

Lame Idea #1). “We should make the call to action [insert trending color] because I read a blogpost that says that it will guarantee great conversions”

Underlying reason for lame idea: Insecurity that leads to blindly following the pack; esoteric conversion thinking cajoled by addiction to content marketing blogs.

It’s unsurprising that someone is using their knowledge of the online marketing blogosphere to corroborate their opinion. Following the advice of experts and the gurus is common practice (and can provide actionable ideas), but it’s essential to be aware of contextual as opposed to catch-all ideas:

Screen Shot 2013-08-15 at 11.01.08 AMCatch-All Idea: There is little measurable data out there to suggest that any single color converts better than another. Suggesting that a call-to-action button should be changed to orange, or green, or purple just because a blog says so falls into the catch-all idea category, where someone is looking for a quick win over an educated decision.

Screen Shot 2013-08-15 at 11.00.04 AMContextual Idea: Suggesting that the call-to-action button should be changed to orange because it will contrast well with a pale blue or green background qualifies as contextual idea. Extensive research, including this study from the California Institute of Technology (Caltech), show that user attention is initially attracted to the most salient areas (or areas that “visually pop out”) on a page, especially under time constraints or while attempting to multi-task. Saliency doesn’t necessarily occur from one, brightly colored element, but from the contrast and spacing that surrounds it. Place an orange CTA in front of a yellow background, and it will get lost. For that matter, not even a flashing yellow “BUY NOW” button will catch user attention when it’s set against a cluttered page.

There’s only one way to verify whether an idea garnered from a blog will work: test it.

  • Once you’ve implemented your changes, run an A/B test to see how well your ideas stand up to alternatives.

Lame Idea #2). “Look, we’ve spent a lot of money on advertising for this product, so the campaign video/branding need to be front and centre on the landing page”

Underlying reason for lame idea: Branding team worried about the hard work they’ve already put in to the project; lack of understanding as to what a landing page is actually supposed to do.

E-commerce companies in particular tend to place an inordinate amount of importance on branding and advertising on landing pages as opposed to showcasing the core benefits of the product on a landing page. The rationale behind this tends to be that an emphasis on branding will link the product’s online presence with its offline presence.

Unfortunately, landing pages just don’t work like this.

A landing page should clearly communicate what the product is, why it’s useful and innovative to a potential customer, and where the customer can go to learn more – all within a few seconds. Cluttering a page with expensive ad campaigns merely serves to distract from the core value of the product in question. Confuse your user, and they’re far more likely to bounce before they look for a button to click.

Visual examples of user behaviour often succeed in ending branding discussions when rhetoric and statistics fail. Predictive Heatmaps like EyeQuant’s show where a user will look when they first arrive, objectively (and accurately) illustrating why overbearing branding confuses users and drives them away from completing a task, while also providing great insight into what could be changed.

Bonus: They can be generated in a few seconds.

Here’s an example: The landing page for the 2013 Volkswagen Beetle tells us an awful lot about how the car is being marketed, but when a user first arrives at the page, they miss its core benefits, pricing, and where a prospective customer can go to learn more:

As a comparison, the landing page for the 2013 Ford Focus still showcases a slick photo shoot, but from the heatmap below, it’s easy to see that the product’s core value, it’s price and fuel efficiency, are immediately visible to users:

Lame Idea #3). “We can’t seem to decide what the most important product/value on offer is. Oh, I know, let’s use a scrolling banner/carousel, then everyone wins.”

Underlying reason for lame idea: Meek attempt to please everyone in the room via indecision; futile addiction to web design gimmicks.

Here’s the short response:

Nobody wins with scrolling banners/carousels.

Jared Smith sums up the reasons why you should never, ever resort to carousels or scrolling banners on your landing page incredibly well with his Should I use a carousel?.

Like this:

Screen Shot 2013-08-14 at 2.39.53 PM

Or like this:

Screen Shot 2013-08-14 at 2.39.53 PM Choosing a carousel is approximately tantamount to telling your customers, ”we can’t make up our minds about what we’re selling, so can you just do it for us?”. Carousels are confusing, they crash frequently, and in an attention-starved online world, they have the uncanny ability to make people back away and never come back.

Just ask Adam Fellowes, head of UX at Digirati:

Screen Shot 2013-08-14 at 3.05.37 PM

Fighting the good fight

Design meetings get out of hand when those present believe that their ideas are more important than anyone else’s. The result of this is narrow-thinking and an overarching fear of listening to what others have to say. When this is the case, adding a data-driven yet visually intuitive example tends to work very well to dispel tension.

After all, at the end of the day, success feels way, way better than compromise.