Amelia Wattenberger Breaks The UX Mold

Kent C. Dodds:
Hello friends, this is your friend, Kent C. Dodds and I'm joined by my friend Amelia Wattenberger. Is that how you say your last name, Amelia?

Amelia Wattenberger:
Yeah, that was perfect.

Kent C. Dodds:
Oh awesome. Normally I ask before and then as I was saying your name, I was like, oh, I didn't ask. Hopefully I get this right.

Amelia Wattenberger:
It's both a very straightforward name but then it's long so you have time to wonder if you're saying it correctly while you're saying it.

Kent C. Dodds:
Yeah, exactly. That is precisely how I felt as I was saying it. Amelia, you're just such an amazing person. I don't know how I didn't know about you until I think it was your hook's post and then I looked at some of the stuff that you've done before and you've just done some really awesome stuff in the design space and data visualizations and stuff. Your website is definitely something to spend some time on. And so yeah, and it's been a pleasure to know you and follow you on Twitter as well and watch the other things that you've created. I'm so happy to have you on to chat with you. It's just an honor to have you. I'd love for the audience to get to know you a little bit better. Would you like to spend a minute or two to just talk about yourself, explain some of the things that are important to you and just tell us who you are.

Amelia Wattenberger:
Yeah, yeah, sure. I'm happy to be here. I guess I can start with how I got into tech. Both my parents were actually programmers and when I went to college I said, "I don't want anything to do with that." I didn't want an office job. That sounds really boring. I was planning to become something like a prison psychologist. I studied psychology and neuroscience in college. And then after I moved down to Texas to work in a research lab and in order to become a psychologist, you usually have to go through some kind of PhD. or assignee program. And so I hung out with enough grad students that I decided that, hey, maybe I don't do this. I guess I taught myself how to code and it really just came out of going through Codecademy courses, which I think was the main player in the space at that time. Or if not the only, and redoing my website enough times that and then I got a job as a front end developer at a startup working on some kind of analytics dashboard.

Amelia Wattenberger:
And I actually really love working in a startup and I think it was really important for me to start my career in a startup because you get to try on a lot of different hats and you get to kind of work across the stack in a way that you might not have the ability to in a bigger company. I was working on things from the design, to DataVis design, to DataVis development, to front end, back to the query layer. You really just get to sample it all just out of need, this has to get done, someone has to do it. I've been working at startups basically in the analytics space for I think about eight years now.

Kent C. Dodds:
Wow.

Amelia Wattenberger:
And it's something I really enjoy. I'm actually starting a new job soon at the Pudding, which is a really awesome kind of like data journalism company that tries to, oh they have some tagline, hold on. I'm going to look it up. It's basically they try to write articles in a way that utilizes data and presents it in a visual manner. I'm super excited to get more into the data journalism space. It'll definitely be different than product work, but it has the same themes of data visualization, being creative on the web and front end development. And I'll have to learn a lot more about storytelling, journalism, all those kinds of things. That's something I'm really excited about.

Amelia Wattenberger:
But other than that, I guess my main interests are front end development in pretty much everything about it. I also really like to do design and I really enjoy doing both development and design because sometimes I'll get burnt out on one kind of work and then need to do something more creative or something more logical. It was really nice to kind of straddle that line and bounce back and forth.

Kent C. Dodds:
Yeah, absolutely. It gives you all of this stuff is not easy. Design is not easy. Development is not easy and so when it is just, when you're really burnt out, having something as a reprieve is really useful.

Amelia Wattenberger:
Yeah, yeah, for sure.

Kent C. Dodds:
That's amazing that you started out in psychology and you were going to go to prison psychology. What led you to that? Or what drew you toward that?

Amelia Wattenberger:
I just think people are really interesting. It seemed like a job I would never get bored of and I don't know, it was such a long time ago at this point.

Kent C. Dodds:
Maybe the job would have been okay, but getting through with a doctorate program maybe not so much.

Amelia Wattenberger:
Yeah, it's a long road for sure.

Kent C. Dodds:
Yeah. Well that's awesome to hear a little bit about your story getting into all of this and if people have not, you listening right now, if you have not gone to wattenberger.com, definitely go there because there are some really awesome visualizations and interesting, one thing that I was looking at pretty recently was you had this sketch thing, you did 33 of these daily sketches. Which are just really fascinating to look at. What is it about this kind of abstract design or just kind of, I haven't seen anything quite like some of these things. What is it about this that draws you or makes you interested in creating this?

Amelia Wattenberger:
Yeah, that's a good question. Those sketches thing as doing a while ago and I really liked them because I was going to do one a day and I think I was doing this two or three years ago and there's currently 33 of them so I clearly haven't been doing one a day. But it was basically just, lets making something visual with code and this hooks into, I really liked the generative art space, which I honestly haven't gotten to dabble with very much but it's something that I really enjoy at least playing with in my own time.

Amelia Wattenberger:
And the sketches are a really nice way to say, "Hey I'm going to sit down for 20, 30 minutes and do something, think of an idea like hey these are circles bouncing around this rectangle." And then just put that up, figure out the best way to code it up. And then you have a very small chunk of work that you can isolate. And doing these sketches has, they seem really silly in the first place. Like oh one of them is just a bunch of lines. A lot of them are just circles running around, but these I've actually learned concepts or ways of doing things through these tiny code examples that I then use at work. Even though they're kind of silly and they don't look useful, they also taught me a lot just running through them.

Kent C. Dodds:
Yeah, I honestly would say that playing around with things in isolation like that for me teaches me more than banging my head against a bug in a production application. Not that there isn't value in that as well, but you can learn a lot just by playing with something in isolation and then trying to see how you can apply it to a production application later.

Amelia Wattenberger:
Yeah, there's something about you don't have to think about anything else. You just get to focus on this tiny piece of code. That just makes it really easy to focus and isolate a single concept. And another thing that I really like about these sketches is they kind of force, because they're supposed to be frivolous. They force kind of a playful state of mind when you're doing them, which as a professional programmer, you rarely ever get to have at work. At work you're focused on this form has to work for every user in every browser, every device with and they're very practical. You can't really mess up goals when you do work at work. To have something on the side where you can think about programming in kind of a light hearted, let's just play around way, I think it's really refreshing and kind of helps with burnout, at least for me. And I think you also learn different skills.

Kent C. Dodds:
Yeah, I can see that. When you're making stuff like this and for the sake of people who are listening, these are like, you kind of described it but they're circles or lines just jumping all over the place and yeah, generative art in motion. And so when you're creating stuff like this, do you find yourself having to use a bunch of math to figure out the position of all these things? Are you doing a bunch of four loops? What does the code typically look like for you to create this kind of thing?

Amelia Wattenberger:
Yeah, and I will say it's all on GitHub so if anyone's curious about the actual code for any of these, it's on my wattenberger-2019 GitHub repo.

Kent C. Dodds:
I'll put a link to that in the notes so people can find that.

Amelia Wattenberger:
And the code is very messy and that's intentional.

Kent C. Dodds:
That's kind of the idea. You don't have to worry about longterm maintenance of these things. And that's one of the refreshing parts of it.

Amelia Wattenberger:
Right. Yeah. Although I will worry when I have to rebuild my site sometime in the future. I've definitely had to brush off my trigonometry knowledge for these things. The number of times while building these that I have to say sohcahtoa in my head or look up some kind of trigonometry thing. It's way more than I would have expected to have to do in my adult life.

Kent C. Dodds:
Yeah. I know when I was doing math in high school and in college, actually in high school my dad just kind of rolled his eyes at calculus. My dad was a CPA so math was really important to him, but algebra, adding up numbers and he would just look at the math homework I was doing for calculus and just say, "Why would I ever want to know the area under a sine wave? That makes no sense to me. Why would I ever care about that?" But I guess it does have some application in creating interesting user experiences like this.

Amelia Wattenberger:
Yeah. Although by the time you use it, you've mostly forgotten everything anyway. I guess they kind of stick with you maybe.

Kent C. Dodds:
Yeah, yeah, maybe. Yeah. I guess if this was your full time job that you did day in and day out, then maybe it starts to stick. But the cool thing is that we have the internet, we have Google where you can create stuff like this even though you don't have a PhD in trigonometry.

Amelia Wattenberger:
Yeah, for sure. And one thing that I've, another really nice thing about these sketches is I've started to build up my own personal collection of utility methods or utility functions for convert an X, Y position to an angle or convert an angle into an X, Y position where I can just go grab those. And so those kinds of things really speed up anything in the future if this is a problem I've tackled before. Even as I'm doing the sketches, I'll put something into a function that I can then just grab in the future.

Kent C. Dodds:
Yeah. That's cool. Very cool. Have you ever been able to use one of these things that you create to enhance the user experience on something at work or when you're writing a blog post? Your blogs are very unique as well. Do you think that doing sketches like this or there are plenty of other things on your website we could talk about. But kind of help you to communicate the things that you're trying to teach people better.

Amelia Wattenberger:
Yeah. Probably not what you're getting at. But I've actually used the snake game that I created for a sketch on my company's public facing website. I did that, which was really fun, but I'm not sure it communicates a lot.

Kent C. Dodds:
It adds whimsy to the app and improves the user experience center.

Amelia Wattenberger:
Yeah. Oh no, I'm on a 404 page, but I can play snake so maybe I'm not as angry about it.

Kent C. Dodds:
Yeah, that's brilliant. I love that.

Amelia Wattenberger:
Yeah. As far as my blog posts go, I guess I'll go through one, a process that I generally go through with even problems that I need to solve with an interface at work, which might be different from ways that other people might approach a problem like this. I guess when I start, I'll sit down and I'll say, "Okay, what am I trying to communicate? What is my main goal here?" And I'll try to isolate what I'm trying to accomplish and what I want readers to learn in one to three bullet points. Maybe I'll use the CSS cascade post as an example or maybe the React hooks post as an example.

Amelia Wattenberger:
I wrote an article I titled Thinking in React Hooks, and this is just because I was using hooks at work and I had just, I had started using them, I don't know, a month previous. And when you first start using hooks, it's a lot like, okay, what is the syntax? What are the different hooks? How does what I'm doing now compare to this syntax that you want me to use in the future? And I had noticed myself kind of having a mindset shift from okay, this is how it relates to what I was doing in the past. It's just you use this new syntax to I was using hooks in a different way that I got to code in a different way.

Amelia Wattenberger:
To be more specific, class components have lifecycle events. They have component dead mount. I want a function to run when a component mounts, whereas hooks with hooks you could use something like use effect and then have an empty dependency array. And my mindset shift was more of instead of saying this should happen when the component mounts or when this prep changes, you should think of, I want this value to stay in sync with this other value. I don't care if it's when a prep changes or when the component mounts, you can use a used memo hook that runs any time data changes or the component mounts. Say when a store, some parsed data array, I just want to keep the parsed data right in sync with the data array. I don't need to think about do this on mount, do this when this updates, yada yada.

Amelia Wattenberger:
That was kind of what I was trying to get across with this article. I guess when I first sat down I said "Okay, this is my main thing I want to communicate." That was step one. And then step two is thinking, who am I communicating with? Who is going to be reading this? What context will they be in? Are they reading this on a phone? Or on the go? Or are they sitting down on their desk? With a blog post you can't really isolate one context. Someone could be on the go or they could be at their desk, but if you can, then that will help direct what the final product should look like.

Amelia Wattenberger:
And so just questions like, what does my user, what does the reader already know? If someone's reading this post, do they already know what hooks are? Do they already know what class components are? Do they know what React is? Where do we have to start when we're writing this article? That's usually my second step is figuring out where are we starting? What's the context for someone who will be interacting with what I create? And then also knowing what does the reader want to get away from this article? Their goal might be different than my main goal.

Amelia Wattenberger:
And then this isn't a formal process, but I've tried to formalize it. I guess then I'll just go and say, "Okay, what tools am I working with?" Really knowing your tools is really important to me because otherwise you're kind of just floundering around and you don't feel like you really have control over what you're building. Focusing on what is the goal and who is the user? I like to just sit down with a sketchpad and just sketch whatever comes to my mind. And for me I need to do this with my sketches with a very open mind because it's very easy for my own critical inner voice to come out and say, "Oh that's a stupid idea." And then I don't even like draw it, but often things that might seem silly in the beginning will end up interesting if you kind of iterate on them a few times. It's, I actually don't sketch as much as I would like to, but when I have sketched out ideas in the past, it's definitely led to a better final product than when I kind of go straight into implementation.

Kent C. Dodds:
Yeah. Actually, my wife and I recently changed the bedroom set up for our kids. We had some kids sharing and then we moved them around and stuff. And in the process she wanted to kind of change what pictures are on the walls and things like that. And my wife and neither my wife nor I are designers, interior or otherwise. And we actually struggled pretty hard making something look good. We know what looks bad but we can't create good designs.

Kent C. Dodds:
My wife decided to just write down some of or draw some of the ideas that she had for the bedrooms and it made an enormous difference. And so now I wouldn't say that it's going to win any awards or anything, but we look at the end result after she drew it and then we implemented what she drew and we're way happier with it. At least I can relate to that through my wife. That experience of actually drawing what you want to create first and I guess a drawing is a lot cheaper to create and scrap than implementation. That makes a lot of sense that way too.

Amelia Wattenberger:
Yeah. Yeah, that's smart. I should do that. I've been trying to learn interior design recently and it's so hard just to wrap your mind around these new concepts.

Kent C. Dodds:
Is that, I can see evidence of that process in this thinking in React hooks, blog posts and I can kind of visualize some of the things that you drew and maybe thought, oh that's maybe not a good idea and iterated on things a bit. It is, this blog, when I first saw it, it was so good. It communicates and it's still, it's even gotten better since the first time I saw it. But it does such an amazing job of communicating the things that I think are really important to communicate with people. As a teacher myself, I've struggled to make sure that people understand the differences between use effects and these lifecycle methods. And just as you said, it's not just about thinking about life cycle methods and like these two things don't directly correlate.

Kent C. Dodds:
And so just the way that you present this, even some things that are in one component did mount may end up in different hooks and that kind of thing or in no hooks at all. It's just so good. I think I can see that there are some areas. Let's just take a specific example that I just love. Right here, right at the beginning you show, here's the class version, here's the hook version. You have these really cool lines that show you where the code would typically go. And then I'm here you say, "Great. At this point you might be thinking, got it. So use effect is a new way to hook into life cycle events." And then as I scroll, this is so cool, as I scroll it has this squiggly line that goes through that and it says, "But that's the wrong way to look at it."

Kent C. Dodds:
Now, if I were writing a blog post and I wanted to communicate this idea, what I would do is I might have this text in bold, I might say, "Use effect is not the way to hook into life cycle events," or something and I just put it in bold and I continue with my blog post. But the way that you have it does such a good job of communicating that to people in a way that calls it out in, here's something that people just get wrong really easily. It's really easy to get wrong. So many people get this wrong so I'm going to give it some extra attention to make sure that people don't miss this. This is really important.

Kent C. Dodds:
Where in the world did you get that idea in how to call this out? Is it just because you're intentional and you're like, this is the thing I want to make sure people understand. You mentioned that what are people expecting to learn from this article? Versus what are my goals to teach them? And those things may not align so I'm going to focus some intent on how to communicate this. Where does this really come from for you?

Amelia Wattenberger:
Yeah, yeah. That's a good question. Part of it is actually I just don't like writing. While I'm writing something, my brain will be off thinking of like, oh, what's a way I can procrastinate writing? Wouldn't it be cool if we did this other thing that will take an hour to implement? And then I'll just go do that. But I guess another part of it for that specifically, I guess I've hung out with academics enough that I naturally stay away from things that are a little bit flashy or that seem a little bit gratuitous. Something like this, it doesn't initially look very useful. Oh, you spent all this time on making this scribbly animation as opposed to writing the article. But I always try to fight back against that instinct because when I always appreciate when I'm reading something and there's something kind of new and exciting to kind of draw my attention and also.

Kent C. Dodds:
That engages you.

Amelia Wattenberger:
Yeah. Yeah. And this is kind of like one of the main points of the article. I was also thinking people remember things better when they're a little bit novel or a little bit flashy. I was trying to emphasize, what's some way for me to say no, I'll like trick them into agreeing with me and then admonish them and make them feel bad about agreeing with me with something that moves on scroll. And I guess this also ties into something I think about a lot is I feel like we kind of just ported newspapers into web format. A lot of the internet and the internet was initially intended for documents. It makes sense and it's really useful and I really appreciate this, but I feel like we just put newspapers online and we were like, all right, we're going to call it quits. This is great. We can spread information everywhere.

Kent C. Dodds:
Yeah, just a static experience.

Amelia Wattenberger:
Yeah. Yeah, and it's also great because it works with the web screen where if there's text, it'll look good on a phone, it'll look good on the desktop. It's really easy to make good text on the web, but I also feel like the web is, browsers now are so powerful and I feel like most sites just don't do anything with all of that power. I feel like they're just like, all right, I'm going to make a blog post, I'm going to teach something. Let me just write up everything I think about it. And then how does a reader read it?

Amelia Wattenberger:
And when I write a blog post, I like to think about what are ways that I can use or abuse the web technology that we have now to make this stick a little better or be a little bit more entertaining when someone's reading it? Or, well, I guess the first blog post I wrote it involves a really long file of code that you kind of build up over the article. And so what a lot of blogs will do or articles will do is they'll have little code blocks in line, which is awesome. It's pretty easy to follow along with that, but it can be a little bit hard to know, okay, here's a block of text. How does that tie into what I just wrote? Or where in the file does this go? Or what file am I in?

Amelia Wattenberger:
Just thinking through that, I ended up with a sticky code sample on the right that as you scroll kind of changes and highlights the different lines that are changing. And so just thinking through, what is a different way, what are the problems with our current approach? And what are ways that we can try to solve those? I'm not saying it's the best example and it's also kind of slow and it's going to be a pain in the butt to maintain. But it was kind of a thought of, oh maybe we can do it this way. Let's see how this works.

Kent C. Dodds:
I just pulled it up and it's fantastic. It's awesome. Because I definitely have read those blog posts where it's a pretty big block of code and they'll just show you little snippets. And then sometimes it's in multiple files or something so they say, "Go to this GitHub repo to see it all together." But by putting it right there in line, it's almost like you've turned this blog post into a video. It's just one short step away from a video. Not to say the videos are superior to blog posts. What's cool about this is that it's really easy for you to keep up to date and you don't have to rerecord it or anything and it's easy for people to scroll up and scroll down and so it's a different medium entirely. But it has so many of the benefits of a video without many of the drawbacks.

Kent C. Dodds:
And that's just fascinating. It's really, yeah, I think that it does a really good job of communicating what you're trying to communicate, which accomplishes the goal here. Yeah, I think we're kind of coming down on our time here, but what do you think is the, I guess the change that you want to see in our world? Are you hoping that we can utilize this web technology more to do more whimsical things? Or are you hoping for just more better learning? Or is it better user experiences? What are you really hoping to get out of this type of thought process around design?

Amelia Wattenberger:
Yeah, I guess part of it is that I want the old web back. Remember when GeoCities was around and everything was a little bit crazy and we had maybe a 20th of the technology that we have today. There's like marquis and text. That was about it. I selfishly want that. And I also, I want to see more examples of people using the web to kind of push us forward to say, "Hey, let's use this technology and think of new ways to communicate." That's something that I would love to see more of on the web.

Kent C. Dodds:
Yeah. And a technology that comes to my mind is, my blog uses MDX. And that allows me to, I don't utilize this as well as I should and now I'm feeling inspired and I feel like I should do more with this, but it does allow me to have my content in a markdown file that is really easy to type in and keep updated rather than trying to put that in some JSX and that kind of thing, but it also allows me to throw in JSX in there so I can have these interactive things. And sometimes I'll put a little form as a demo of something in there, but I think I should do something more. The web can do more than what I'm doing with it. I'm inspired.

Amelia Wattenberger:
Yeah, I want to see what you come up with.

Kent C. Dodds:
Yeah, I'll come up with something good. But I think that we can improve the experience of our users or of our learners or whatever it is by doing some more intentional type of communication through the technologies that we have. And your blog is an excellent example. And as a mini homework for everybody, I want you, people to go see your blog and look at some of those posts because they're very, very cool. But the homework that Amelia and I decided before we started for you, listener, is do something unconventional. Whether you are a video screencaster, live streamer or blogger or individual contributor on a big project or something, think of something that you can do to enhance the user experience by stepping outside of the regular mold for building whatever experience you're thinking about building. And hopefully accomplishing your goals and the user's goals a little bit better. Do you have anything to add there, Amelia?

Amelia Wattenberger:
Yeah. And share it with us because I really want to see what people come up with.

Kent C. Dodds:
Excellent. Yeah. Love it. Cool. Amelia, what is the best way for people to get in touch with you?

Amelia Wattenberger:
Yeah, I am @Wattenberger, my last name, pretty much everywhere except for Instagram where someone who doesn't even have the last name Wattenberger stole my handle. But I am not bitter.

Kent C. Dodds:
That is the worst.

Amelia Wattenberger:
Yeah, the best way is probably Twitter, @Wattenberger on Twitter.

Kent C. Dodds:
Awesome. And we'll have a link in the notes. Cool. Thanks Amelia. I'm super stoked to try something out now and I'll let you know when I've got something. And yeah, thanks everybody for listening and we will be back with you next time. Goodbye.

Amelia Wattenberger:
Bye.