Designing for Growth

First up, this talk will introduce you to the (Mike’s) “Five Fs” of design. We’ll then dive a little deeper into the fourth F – Designing with Facts. A huge benefit of modern web applications is the wealth of data they can provide to designers.

We’ll look at what sort of information is available and how using it can help shape the products we build.

Graph paper is optional

It’s nearly lunch… won’t mention food… so, lettuce start with the hamburger menu!

All established patterns were new once. Who knows when the hamburger was first used?

(People thought it appeared in the last few years.) Turns out the earliest known use was 1981, designed by Norm Cox for the Xerox Star.

Growth Design

What is Growth Design? Using metrics and data to inform the way we design. It does not replace our gut, but it’s a way to include qual and quant data in the process.

So you start with the experimental hypothesis:

We believe that [this change]

will result in [a specific, measurable outcome]

because [we have a rationale that says..]

Qualitative and Quantitative…

  • Qual: user testing, prototypes. Great for highlighting problems early in the process.
  • Quant: A/B test between the existing and the new shiny version. Good for validating if a change ‘worked’.

Five Fs of Design

  • Foundation
  • Fast
  • Feature
  • Facts
  • Future
Foundations

Set up your pattern library, baking a11y in, tone and voice, design system, analytics. Getting things like accessibility baked in early is critical. It’s a good time to set up analytics. This phase sets you up for success. Many people start with Google Analytics, but it doesn’t give you details about how people are using the product. Something like Heap will capture everything. So start by working out what you actually want to track. Check out the Big Ol’ List Of Tools for options.

Fast

Going with your gut, using established patterns, fast iteration. Just get things out there. You don’t have enough users at this point to do decent quantitative analysis. Nurture those users you do have – they will be your advocates in the future.

Feature

This is where most people probably work. Getting to know your users, doing personas, slower cadence, sometimes it takes longer because you’re trying to make things closer to ‘perfect’ before release.

Facts

Most analytics packages do the heavy lifting for you. If you can get a data scientist, use them! Define your funnel. Pirate metrics (AARRR): acquisition, activation, retention, referral, revenue.

These metrics help you work out how you are getting and losing customers. Teamwork is really important to get value from this phase: it’s fast, you need to iterate quickly, do design sparring, get ideas that have been worked on already.

Be careful not to blow the results – eg. changing the copy will invalidate tests. Be aware of the whole experience, not just the specific piece you are focused on.

Be aware that most experiments will be inconclusive, but you’ll learn something new every time!

Future

Don’t be afraid to push boundaries, but don’t make the experience worse for the sake of experimentation.

Validate new patterns with qual before moving on to quant. Sometimes it pays to stick with your gut sometimes.

Established patterns all started somewhere. If something goes well, roll it into your design language.

Tips for growth design

  • sit with your devs, collaborate with them
  • spar with other designers
  • be aware of the bigger picture

You never know, you may discover your own hamburger!