From Ideation to Iteration: Design Thinking for Work and for Life by Una Kravets

The unstoppable engine of An Event Apart in Seattle rolls onward. The second talk of the second day is from the indominatable Una Kravets. Her talk is called From Ideation to Iteration: Design Thinking for Work and for Life. Here’s the description:

Have you ever had a looming deadline and no idea where to start? Do you have a big task to face but are having trouble figuring out how to get there? Have you ever wanted to learn a technology, or build a side project but didn’t know what to build? In this talk, Una will go over an actionable approach and several techniques for applying design thinking to our work and every aspect of our lives. This includes ideating product features, blog post ideas, or even what general direction we want to move toward in our businesses. We’ll go over traditional approaches and breakout techniques that will leave you feeling more in control and ready to reach your goals.

Let’s see if I can keep up with this…

Una’s going to talk about design thinking. Una does a variety of different work outside her day job—a podcast, dev doodles, etc. Sometimes at work she’s given big, big tasks like “build a design system.” Her reaction is “whut?” How do you even start with a task like that.

Also, we make big goals sometimes. Who makes new year’s resolutions? But what does “get more fit” or “earn more income” even mean?

In this talk, Una will break things down and show how design thinking can be applied to anything.

Design thinking

A stategic, solution-based approach to solving problems.

It’s a process. It’s iterative. It’s used by IBM, Apple, GE, and it’s taught to students at a lot of different universities.

Tim Brown of Ideo points out that there’s a Venn diagram of feasability, desirability, and viability. In the middle is the point of innovation.

The steps are:

  1. Empathise — develop a deep understanding of the challenge
  2. Define — clearly articulate the problem.
  3. Ideate — brainstorm potential solutions.
  4. Prototype — design a protoype to
  5. Test — and iterate.

Una feels that the feedback part is potentially missing there. IBM uses a loop diagram to include feedback. Ideo uses these steps:

  1. Frame a question
  2. Gather inspiration
  3. Generate ideas
  4. Make ideas tangible
  5. Test to learn
  6. Share the story

Another way to think about this is how the teams interact. There’s divergence and convergence throughout. Then there’s the double diamond: design, deliver, discover.

Ideo wrote a book called Design Thinking for Libraries. It has some useful tools and diagrams. Una found this fascinating because it wasn’t specifically about products. In healthcare, GE Health used design thinking for their Adventure Series MRI scanners—it resulted in 80% less need to use sedatives. The solution might seem obvious to us in hindsight, but it wouldn’t have been obvious to medical professionals in their everyday busy lives.

Design thinking is bullshit, says Natasha Jen. She describes how it’s become an over-used term that has lost its value. Una can relate—she gets annoyed when there’s too much talking and not enough doing. Design thinking is not diagrams and sticky notes. It’s a process. It’s very much about doing something to shift perspective. It’s another tool in our toolkit, even if it has become an overused term like “synergy.”

Back in 2014, when Una was working at IBM, she thought design thinking was stupid. It seemed to be all talk, talk, talk. It felt tedious. It was 75% talking and 25% development. The balance wasn’t right.

But it’s also true that solutioning too early leads to cruft. If you end up going back to the drawing board, maybe the time could’ve been better spent doing some design thinking up front. Focus on the problem, not the solution.

Now some developers might be thinking that this is outside their area. But it can really help you in your career. It can help you choose technologies. Also, everyone on the team, regardless of role, is responsible for the product.

1. Empathise

Understand your users and the challenge. This could be a task that a user is trying to accomplish, or it could be you trying to get a raise.

Sometimes we forget who our user is. The techniques in this first step helps us solve their needs, not our needs.

You might have many users that you’re trying to help, but try focusing in on a few. You can create personas. When Una was working at Digital Ocean, the users were developers. The personas reflected this. Do the research to get to know your users.

Next, you can create an empathy map for your users. What are their goals? What are their hopes? What will they gain from your product?

Connect the empathy map to a specific context—a goal and or a scenario that the user is going through.

Bear in mind that there are many layers to your user. There are conscious rational thoughts, but also subconscious emotional thoughts. Empathy mapping helps you understand how to best communicate with your user.

Una shares a real-life scenario of hers: create a new shop-able product that increases time on site. That’s a pretty big goal. She creates a persona for a college-educated woman working in the medical field who commutes on the subway, keeps a skin-caring routing, and is getting into cake-making. Next, Una creates an empathy map for this persona. What she says, thinks, feels, and does. All of this is within the context of browsing your fashion media website casually at work.

2: Define

The problem statement should be:

  • Human-centred,
  • Specific, but not too technical (don’t solutionise too soon),
  • Narrow in scope.

How can we best create a product-highlighting web experience that Rosalyn will enjoy to increase her time on site?

You can use a tool with two columns: As-Is and to-Be. The first column is what users currently do. The second column is what you want to achieve.

3. Ideate

This is the fun part. Good old-fashioned brainstorming is good here. Go for quantity here. Get loads of ideas out.

There’s also a “worst possible ideas” game you can play at this stage. It can be a good ice-breaker.

Have a second round of brainstorming where you play the “yes, and…” game to build on the first round.

When Una was working on The Zoe Report, she found that moodboards were really useful. The iteration cycle was very fast. A moodboard allowed them to skip a lot of the back and forth between design and development. They built the website without any visual design mock-ups. They prototyped quickly, tested quickly, and shipped quickly.

Journey-mapping is the next tool you can use in this ideation phase. Map out the steps between the start and end of a user journey. Keep it simple. This is a great time to refine your product and reduce complexity.

Next, start sketching out ideas. Again, this is a great time to uncover issues and solve problems before things get too defined. But remember, when you’re showcasing your ideas in sketches, too many ideas can lead to analyis paralysis.

Oh dear. Jam. Jam. Jam. Jam. Jam. Yes, Una is using the paradox-of-choice jam example …the study who’s findings could not be reproduced.

4. Prototype

Go forth and build. A prototype can exist on a number of different axes:

  • Representation—the form it takes.
  • Precision—the detail it contains.
  • Interactivity—the extent a user can interact with it.
  • Evolution—the life stage it is at.

There are lot of prototyping tools out there. Prototypr.io helps you find the right tool for you. It breaks things down by fidelity and life cycle.

But not all prototyping has to be digital. Paper prototyping only needs pen, paper, and scissors. Some tips:

  • Use a transparency sheet for forms.
  • Use well-visible and mid-tip pens.
  • Draw up your prototype in black and white—people can get caught up in colour.

But on the web, Una recommends getting to digital as quickly as possible because interaction is such a big part of the experience. That’s why Una likes to prototype in code. But this is still a rapid prototyping phase so don’t get too caught up in the details.

5. Test

Testing with internal teams is fine during the ideation phase, but to understand how users will relate to your product, you need to test with representative people. We are not our users.

As well as the user, have a facilitator, a computer, and a scriber. As a facilitator, it’s a good idea to reduce the amount of input you give a user. Don’t hand-hold too much or you will give away your pre-existing knowledge. Encourage your user to be verbal.

Sessioncam is a tool for creating a heatmap of where people are interacting. There are also tools for tracking clicks or mouse hovers. These all feel so utterly icky to me.

The metrics you might be looking to gather could be click-through rate, time-on-site, etc. But, Una cautions, be very wary of adding all these third-party scripts to your site and slowing it down. Who’s testing the A/B tests?

On Bustle, Una wanted to measure interactions on mobile. They tested different UI elements for interactions. They ended up updating the product with a horizontal swiping component. They were able to improve the product and ship a more refined experience.

6. Review and iterate

Una feels that this step is the most important. Analyse your successes and failures, and plan to improve.

Technology changes over time so what’s feasible and viable also changes.

Design thinking on the daily

You can use design thinking in your everyday life. Maybe you want to learn JavaScript, or write blog posts, or get more fit. Una used design thinking brainstorming to break down her goals, categorise and organise them.

“Get better at JavaScript” is a goal that Una has every year.

Empathise. In this situation, the user is you. You can still create a persona of yourself. Define. Why do you want to get better at JavaScript? Is it about making better use of your time? Ideate. There are so many different ways to learn. There are books and video courses. Or you could have a project to focus on. Break. It. Down! Create actionable steps and define how you will measure progress. Match the list of things you want to learn with the list of possible side projects. Prototype. Don’t take it literally. Just build something. Test. You’re testing on yourself in this case. Review. Una does an annual review. It’s a nice therapeutic exercise and helps her move forward into the next year with actionable goals.

Another goal might be “Write a blog post.”

Empathise. Your users are your potential readers. Who do you have in mind? Make personas. Define. What’s the topic? Ideate. If you don’t know what to write about, brainstorm. What are you working on at work that you’re learning from? Select one to try. Prototype. Write. Test. Maybe show it to co-workers. Review. How did it go? Good? Bad? Refine your process for the next blog post.

Here’s a goal: “Buy a gift for someone.”

Empathise. What does this person like? What have they enjoyed receiving in the past? Define. Is the gift something they’ll enjoy for a long time? Something they can share? Ideate. Bounce ideas off friends and relatives. Prototype. In this case, this means getting the gift. Review. Did they like it?

“Get Fit.”

In this case, the review part is probably the most important part.

Marie Kondo asks “Does this spark joy?” Ask the same question of your goals.

Remember, design thinking is not just about talking, and sticky notes. It’s about getting in the right headspace for your users.

Design thinking matters—because everything we do, we do for people. Having the tools to see through the lens of those people will help you be a more well-rounded person.

Have you published a response to this? :

Responses

Scott Jehl

Oh wow, I am amazed. Thank you for this Jeremy :)

# Posted by Scott Jehl on Tuesday, March 5th, 2019 at 9:31pm

Šime Vidas

> If you can add async or defer to a script element in the head, you should do that. Sometimes that’s not an option though. I wonder about that. Based on info from addyosmani.com/blog/script-pr… I’d say critical scripts in <head>, non-critical scripts defer (not async) + end of page.

# Posted by Šime Vidas on Wednesday, March 6th, 2019 at 7:30pm

Scott Jehl

that seems reasonable if you have control over placement. Thanks.

# Posted by Scott Jehl on Wednesday, March 6th, 2019 at 7:56pm

6 Shares

# Shared by Chris Coyier on Tuesday, March 5th, 2019 at 9:28pm

# Shared by Scott Jehl on Tuesday, March 5th, 2019 at 9:29pm

# Shared by Matthias Ott on Tuesday, March 5th, 2019 at 9:36pm

# Shared by An Event Apart on Tuesday, March 5th, 2019 at 9:41pm

# Shared by Todd on Tuesday, March 5th, 2019 at 9:55pm

# Shared by Joe Hinkle on Tuesday, March 5th, 2019 at 10:02pm

23 Likes

# Liked by 🌙 Stephanie on Tuesday, March 5th, 2019 at 8:47pm

# Liked by Corina Rudel on Tuesday, March 5th, 2019 at 8:47pm

# Liked by Lynn Collette on Tuesday, March 5th, 2019 at 8:47pm

# Liked by Andrea Vaghi on Tuesday, March 5th, 2019 at 9:22pm

# Liked by Scott Jehl on Tuesday, March 5th, 2019 at 9:52pm

# Liked by naahh on Tuesday, March 5th, 2019 at 9:52pm

# Liked by Matthias Ott on Tuesday, March 5th, 2019 at 9:52pm

# Liked by 🇺 | 🇳 | 🇦 👩🏻‍💻 on Tuesday, March 5th, 2019 at 9:52pm

# Liked by Patryk Andrzejewski on Tuesday, March 5th, 2019 at 9:52pm

# Liked by Beth Dean on Tuesday, March 5th, 2019 at 9:52pm

# Liked by Joe Hinkle on Tuesday, March 5th, 2019 at 10:27pm

# Liked by Todd on Tuesday, March 5th, 2019 at 10:27pm

# Liked by Peter Riley Osborne on Tuesday, March 5th, 2019 at 10:27pm

# Liked by Eric Claeren on Tuesday, March 5th, 2019 at 10:28pm

# Liked by yuanchuan on Tuesday, March 5th, 2019 at 10:54pm

# Liked by Michelle Barker on Tuesday, March 5th, 2019 at 10:54pm

# Liked by John F Croston III on Wednesday, March 6th, 2019 at 4:23am

# Liked by Dustin Cartwright on Wednesday, March 6th, 2019 at 6:59am

# Liked by Jimmy on Wednesday, March 6th, 2019 at 7:59am

# Liked by Scott Gruber on Wednesday, March 6th, 2019 at 3:31pm

# Liked by Marinda on Wednesday, March 6th, 2019 at 8:29pm

# Liked by Gunnar Bittersmann on Friday, March 8th, 2019 at 3:33pm

# Liked by Thierry Arzal on Saturday, March 9th, 2019 at 2:30pm

Related posts

Talking about style

The transcript of a talk.

The State of the Web — the links

A collection of hyperlinks for a talk.

Design Principles For The Web—the links

Hyperlinks to accompany a talk.

Putting design principles into action

There are observational principles, and there are imperative principles. Let’s put them together.

The Mythology of Design Systems by Mina Markham

A presentation at An Event Apart San Francisco 2019

Related links

“Evaluating Technology” by Jeremy Keith – An Event Apart video on Vimeo

This is a recording of my Evaluating Technology talk from An Event Apart in Denver just over a year ago. This was the last time I ever gave this talk, and I think you can tell that the delivery is well-practiced; I’m very happy with how this turned out.

In this 60-minute presentation recorded live at An Event Apart Denver 2017, Jeremy Keith helps you learn to evaluate tools and technologies in a way that best benefits the people who use the websites you design and develop.

Tagged with

LukeW | An Event Apart: The Way of the Web

Here are Luke’s notes from the talk I just gave at An Event Apart in Seattle.

Tagged with

Resilience: Building a Robust Web That Lasts by Jeremy Keith—An Event Apart video on Vimeo

This is the rarely-seen hour-long version of my Resilience talk. It’s the director’s cut, if you will, featuring an Arthur C. Clarke sub-plot that goes from the telegraph to the World Wide Web to the space elevator.

Tagged with

The State Of The Web on Vimeo

Here’s the video of my latest conference talk—I really like how it turned out.

The World Wide Web has come a long way in its three decades of existence. There’s so much we can do now with HTML, CSS, and JavaScript: animation, layout, powerful APIs… we can even make websites that work offline! And yet the web isn’t exactly looking rosy right now. The problems we face aren’t technical in nature. We’re facing a crisis of expectations: we’ve convinced people that the web is slow, buggy, and inaccessible. But it doesn’t have to be this way. There is no fate but what we make. In this perspective-setting talk, we’ll go on a journey to the past, present, and future of web design and development. You’ll laugh, you’ll cry, and by the end, you’ll be ready to make the web better.

I’ve also published a transcript.

Tagged with

UXLondon 2021

Here’s a great write-up (with sketch notes) of last week’s conference portion of UX Fest:

There was a through-line of ethics through the whole conference that I enjoyed. The “design is the underdog” is tired and no longer true. I think that asking ourselves “now that we are here, how do we avoid causing harm?” is a much more mature conversation.

Tagged with

Previously on this day

9 years ago I wrote The voice of MOL

Chipmunks in space.

9 years ago I wrote Moderating EnhanceConf 2016

I had the honour being Master of Ceremonies at the world’s first conference dedicated to progressive enhancement.

12 years ago I wrote Tools of the trade

Apps for designers.

21 years ago I wrote Paris in the Springtime

When I was in Arizona at Christmas time, the focal point of the seasonal celebration was the exchanging of gifts around the Christmas tree.

23 years ago I wrote Bag Tax

It’s about time: a tax on plastic bags is being introduced in Ireland:

23 years ago I wrote Macromedia Unveils Macromedia Flash MX

Flash 6 …sorry… Flash MX is about to be released.