Today we're talking with Nick Disabato of Draft, a small interaction design consultancy in Chicago. His previous clients include Gravitytank, New Music USA, Chicago Magazine, The Wirecutter, and too many other attractive, intelligent people to count. We spent quite a bit of time talking about his work designing a delightful user experience for Cards Against Humanity.
We discuss...
Links:
PS: Be sure to subscribe to the podcast via iTunes and write a review. iTunes is all about reviews!
Transcript
Recording: This is the Unofficial Shopify Podcast with Kurt Elster and Paul Reda, your resources for growing your Shopify business, sponsored by Ethercycle.
Kurt: Welcome to the Unofficial Shoplift Podcast. I'm your host, Kurt Elster and with me today is Nick Disabato from Draft. Nick, how are you doing?
Nick: Doing fantastic. How are you, man?
Kurt: I'm well. Where are you at?
Nick: I live and work in Logan Square, a neighborhood in Chicago and have been here for the past seven years. I've been independent for the past 3-1/2.
Kurt: That's good. I'm about right miles from you in Park Ridge. It's funny we're doing this over Skype but we're like a bus ride apart.
Nick: We are. We're probably a short L ride apart.
Kurt: Tell me, who’s Nick D?
Nick: Nick D is me as I exist on the Internet and I run a small design consultancy called Draft as you mentioned and we do a lot of things. I publish books. I do monthly A/B testing for people. I run the world's stupidest newsletter but what I think we're here to be talking about is my one-off interaction design product, just more typical client work, more consulting work. I've done it for a variety of e-commerce clients and solved a lot of really interesting problems for both mobile and desktop and I think about these sorts of things a lot. That's kind of ...
Kurt: For the lay person, what's interaction design?
Nick: Interaction design, it's the process of making something easier to use and it involves hacking out the layout and behavior of a product. That can range from prototyping something and running it by users to see how they enjoy using it or whether they're successful at completing goals within it.
``` It can range from promoting certain design decisions and hacking out functionality. It can involve figuring out edge cases like if you type in a really long response that doesn’t belong in a certain form field, what happens? If you click here, what happens? It's figuring out to choose your own adventure capacity of going through a technology product of any type.
I've worked...
```
Kurt: It sounds like you're a problem solver for your clients. Give me a good example of a problem you solved with interaction design.
Nick: We'll talk about e-commerce stuff. One of my biggest clients over the past few years was a board game company called Cards Against Humanity.
Kurt: I dearly love Cards Against Humanity. Tell us about it.
Nick: For your audience, if you do not know Cards Against Humanity, it's similar to a card game called Apples to Apples where I'm a person judging a card and everybody else plays another card only it's usually quite inappropriate. You have weird poop jokes or [scathalogical 00:03:03] things.
Kurt: The favorite combo I ever got, the winning combo I ever got out of Cards Against Humanity, I will never forget. It was "Santa gives the bad children genital piercings." That was genius.
Nick: My personal favorite is 'What's the last thing Michael Jackson thought about before he died?' and somebody played Michael Jackson.
Kurt: That one is layers on layers.
Nick: Oh my God, I still think about it. It's amazing. I've worked with them to define all of the layout and behavior for their e-commerce system. They now have, in addition to Amazon, you can buy stuff directly through them. You go through and they run through Stripe. It's not through Shopify but it's entirely independent and entirely custom.
``` What they wanted was something that worked pretty well on mobile and they wanted something that was a little more unconventional to fit their business's needs. Cards Against Humanity, for those of you who don’t know, they’re a relatively unconventional business just in terms of their tone and in the way that they carry themselves and the way that they deal with their customers.
```
Kurt: That has totally differentiated and set them apart.
Nick: Yes. I think a large part of Cards Against Humanity's success is their marketing and their outreach. They do a terrific job of both of those but they do a very ...
Kurt: I've seen their marketing and it's amazing. They do one-off promo cards. I've got their House of Cards promo set that they did co-branding with Netflix. What kind of outreach do they do?
Nick: They do a lot of ... They'll reply to people on Twitter. They'll follow along with people's activity. They'll pay attention to what people are talking about and they'll try and be a little bit proactive about it. As far as their site is concerned, their tone is very distinctive. It's ...
Kurt: Absolutely, it irreverent.
Nick: Yes, it's irreverent. It's a little bit standoffish, a little bit jerk but fun jerk. It's like [inaudible 00:05:09].
Kurt: Yeah. You love them for being mean to you. It's like Ed Debevic's..
Nick: [Crosstalk 00:05:10]. Yeah, it is like Ed Debevic's a little bit which is a diner in Chicago that ...
Kurt: Right, [inaudible 00:05:15].
Nick: It's definitely one of those things where they own their voice and they know how to do it. If you go through the prompts on their Website, if you go to ... I believe it's store.cardsagainsthumanity.com. You can go there and buy stuff and they ask you what country you're from right away. We can go to a UX teardown of why that is but I'll give you the high level. They go to country [crosstalk 00:05:40] right away.
Kurt: I'm already there.
Nick: If you choose I live in the rest of the world like not US or Canada or UK or something like that, they'll be like, "Begone foul foreigner" or something like that." They'll just make fun of you. "Send us an e-mail for when Cards Against Humanity is available in your inferior country" or something like that. They're just totally blanked up.
``` UI Copy was definitely an enormous component of it. It's part of why I'm getting to this because I wrote a fair amount of the UI copy that is still on there right now. Another thing that you'll see on the page if you go through it while you're listening to this podcast is you'll see a row of information at the top of it.
You'll go and buy something, you'll hit Pay Now and you'll see country recipient, e-mail and shipping and what it says is ... It says USA. It'll try and geolocate you and then it'll say, "Not right." You can tap back to that and two things are happening there. You can edit your order as you're going and it reads the order back to you.
One thing that you see in Shopify in particular or in e-commerce in general like Amazon or anything like that, it reads your order back to you before you hit Place Order. That's an extra click that you don’t necessarily need because you could get this kind of inline feedback. There's no reason why you couldn’t get inline feedback.
I built the interaction model to fit that and people liked it. There were two things that people called out – the way that the feedback was being read back to you and the way that it was auto-correcting as it goes. If you type in your zip code, it autocorrects to your city and state and is usually accurate. That's pretty cool and it does have for both USPS and Canada Post. It requests little information from you, moves you through the process as fast as possible at the minimum of clicks.
I wrote a book that called about interaction cycle, Cadence & Slang. One of the things I say is reduce the number of steps to complete a task. I tried to make this kind of exemplar of that principle by making it as efficient as humanly possible.
The other thing that people talk about is when you actually go buy something, which I see you're tapping through that right now, Kurt, that I would ... Once you finish the transaction it says, "Now, go outside" and makes fun of you about the fact that you're on the Internet and it links ...
```
Kurt: It shames you for your order.
Nick: It already has your address and if you click "Now, go outside," it searches on Google Maps for parks near you.
Kurt: [Crosstalk 00:08:07]. This is incredibly clever stuff.
Nick: It's thinking like, okay, I'm on a computer and I'm refreshing it whenever an expansion comes out or I'm doing all these other things and it just wants ... It's like, "Oh, by the way, you're on the Internet. Now, you don’t have to be on the Internet anymore. You gave us money. Just go away."
``` That's most of the design decisions behind this. I feel like a lot of people just reinvent the wheel with e-commerce. They want to do something safe. One of the great things with Cards Against Humanity is they don’t want safe. They don’t care. They want to get the orders okay but if you're messing it up, it’s not their fault. It's your fault for this particular organization. [Crosstalk 00:08:56].
```
Kurt: Yeah, like the whole ... the entire experience ... Like it's easy to use and it's great but at the same time the game ... It starts with a product. You've got this incredibly irreverent game and then that gets extended to the messaging and the copy and the positioning. Then amazingly where everyone else would have stopped, they moved it into the actual user interface. The interaction itself is irreverent.
Nick: There are a couple of people at Cards that handle a goodly amount of the logistics in getting the cards printed and shipped and everything. To use a developer term, they are a full-stack operation. They deal with the printer. They deal with Amazon. They deal with the warehouse. They want to build a vertically-integrated system for [crosstalk 00:09:40].
Kurt: I was going to say that sounds like a vertical integration.
Nick: They're a good enough business and are popular enough that they can get away with it. They could ... If I did that ...
Kurt: It's a great product. People love it. It's a catch-22. People love it because of these irreverent decisions but at the same time, are they able to make those irreverent decisions because people love it? It's like where do you start with that?
Nick: I would be putting words in their mouth but I suspect it's kind of a feedback loop. They make these decisions and they realize they're getting rewarded for it by having more business and so, they end up making more irreverent decisions in more irreverent ways.
Kurt: Why, yes. You're right. It does. It rewards itself. Anyone could start trying this and if it doesn’t work out, you shouldn’t do it.
Nick: Yeah. I run a large part of my design practice as A/B testing. You could build this and run half of your users through it and if your conversion rate drops, either try and tweak it or throw it away. That way you're not losing an insane amount of sales on your testing idea. You're vetting whether it works for you. I suspect at least certain conceits of these like auto-complete and providing this feedback. I don’t see any personal reason why that couldn’t exist in other e-commerce context. I really don’t.
Kurt: Yeah, absolutely. You mentioned split testing. Tell us briefly, what is split testing?
Nick: It's essentially you have an idea and rather than fighting about it internally about whether it's a good idea, you let people decide and you're letting real customers decide. This can be anything. This can be a call to action button. This can be a headline. This can be a person on your homepage selling the thing. It can be whether a video autoplays or not.
``` It can be any design decision you want and you have a control page which is your original page. You send that by 50% of your users and then the other goes to the other 50%, whatever you're varying and you're measuring success in sales, signups for your mailing lists, whatever have you. It can be anything that you want.
```
Kurt: As long as it’s a measurable goal.
Nick: You have a goal, right. You can do this with multiple variations. Most of my A/B tests are in fact A-B-C-D-E tests where I'm vetting many different variations of something and many different permutations of something and testing it with real-life people. It reduces risk because you're running many variants.
``` You're optimizing the page slowly and you're throwing away what doesn’t work and learning what does work and where you want to be putting more of your efforts. Even a failure, which is a plurality of your tests are failures or inconclusive, you're still learning where you don’t want to be putting your efforts, like you don’t need to be fighting over that link, that sort of thing. I always try and frame it in a very positive way.
```
Kurt: It's interesting. The way you brought it up is you don’t have to fight about it internally. It's a great way to talk about it because in our design practice that's generally how I bring up the idea of split testing is when the client pushes back on something or they attribute some loss in sales to a change and I say, "Actually, we don’t have to guess about it. We could split test it and know for certain." It's usually how I introduce that concept.
Nick: Yes.
Kurt: As soon as you say, "We can know for sure and we can know scientifically," then people become very interested in it. What's your favorite tool for split testing?
Nick: I give all of my clients ... I have a monthly A/B testing tool or a service called Draft Revise where you pay me a certain amount every month and I run tests for you and write up reports and that's it. You never have to worry about the practice of doing this.
``` I use something called Visual Website Optimizer. It shortens to VWO. You can go to vwo.com. For a few of my clients, I use something called Optimizely, if you go to optimizely.com. Both of those are terrific. They have very small differences at this point. It's like Canon and Nikon. They're just snipping at each other and it's making both of them much better.
```
Kurt: I've used them. I've personally used VWO. I really liked it. I used the Google split testing tool. That thing's a nightmare.
Nick: Yeah, it’s changey. I would pay the money for V. If you have enough scale to get statistical validity out of the A/B tests which typically you need at least 3,000 or 4,000 [uniques 00:13:53 ] a month to be doing that for whatever goal you're measuring, usually it's more, you're probably making enough money that you can afford Visual Website Optimizer, no question or Optimizely. Don’t do the free Google stuff. It just sucks.
Kurt: The amount of time I wasted messing with that wasn’t worth it. VWO is so much easier.
Nick: Yeah, don’t bother.
Kurt: The support is really good. I'm not condemning Optimizely. I've literally just never used Optimizely. That's a good way to get into it for our listeners. If it’s confusing or they don’t want to deal with it, your service is great. I've seen the reports you run and I'm not even plugging it. It's just genuinely good stuff that you do.
Nick: Thank you. It's one of those things where a lot of people don’t know how to start and they don’t know how to do it and I have two different offerings. One of them is a one-off like I give you a guide and I give you a lot of suggestions for what you can test and what you can change things to, things that I would change. You're getting a UX teardown and a write-up of how to put into practice but I find that a handful of those come back to me and they're like, "Can you just do this for us?"
Kurt: Essentially, what you've said to them is like, "Here's a plan for immediate success based on my vast experience and you could do whatever you want with it." I imagine a lot of people are going to be, "All right, fine. You know what you're doing. You just take care of those for me."
Nick: Yeah, and they’re already used to paying me and I give them a discount on their first month. If they pay me $900 for Revise Express Report and then they sign up for a 2000-dollar plan for Draft Revise, you're paying only $1,100 for the first month which at that point you're not getting charged twice. You're able to hit the ground running.
``` I signed up a Revise Express client recently for Draft Revise and it's been going well. We went from not having anything together to contract signed and A/B tests running on their site in three days because I already knew it.
```
Kurt: That's good.
Nick: I wrapped my head around it. It was great.
Kurt: When you're wrapping your head around it, how do you approach optimizing a site?
Nick: It depends on the site. Let's say it's like a typical SaaS business. I look at the things that I know changing them will yield a lot of fruit and that can be common elements to optimize like your headline or your call to action or testimonial quotes, stuff like that which is very optimizing 101 type stuff. Or I'd look at things that I see are clearly bad like if you have an e-mail list signup form and the button says Submit. Unless you are [crosstalk 00:16:39].
Kurt: I look for the stuff that just like, "This is painful. This goes against every best practice. Let's fix this first and get our baseline back to zero."
Nick: Yeah. I break things into two categories. One of them is one-off design changes which are beyond the need for testing. Things like if you make your button Submit. Unless you're an S&M site, you have no business making your buttons Submit, all these other things. Then I also look at things and suggest "Let's test this because I'm not sure."
``` The difference between those two is confidence. I'm still changing things. I'm changing elements on the page but I'm not fully confident that changing your headline to this one thing is going to speak to your customers effectively especially because I've been working with you for only three days if I'm doing these teardowns.
It's very like intuition at that point. I will check everything within ... If you're a SaaS business, call your conversion funnel like your homepage to your pricing page to your signup page to your onboarding to all that and then you get converted from a trial into a paying customer eventually.
There are a bunch of pages that you have to go through in that flow to actually figure that out. I try and vet all of those and figure out if I were building your site and figuring out your marketing page and trying to figure out a really good way to speak to people, would I do this?
I bring in my experience working with dozens of SaaS businesses and e-commerce sites to bear on that and eight years of interaction design experience. That's often something that they can't get internally because I don’t know any actual fulltime UX employees who’ve worked for as many individual clients as I have.
```
Kurt: They couldn’t possibly. Earlier you had mentioned to me the other day that you're working on something with Harper Reed.
Nick: Yeah. I did it for six weeks. It was a one-off project with Harper Reed. For those who don’t know, he elected the president at the beginning of ... starting at the beginning of last ... No, two years ago. It was 2012.
Kurt: The way I view it is Harper Reed personally defeated Mitt Romney.
Nick: His tech team certainly did. He built the team that ... It almost feels like that. If you read the teardowns of it, they're amazing but he has a startup now which is essentially a mobile e-commerce startup called Modest. It's at modest.com and first project that he did was a storefront for a toy and game manufacturer called [Choonimals 00:19:04], if you go to Choonimals Website.
``` He's a friend of mine. He works and lives in Chicago. He works in Fulton Market. They had me come on and just be another pair of eyes on their UX. They already had a lot of interesting UX ideas there. I'm not going to take remote amount of credit for some of the most novel and fascinating parts of it but I agree with the conceit.
A lot of the things were already coming together like scanning your credit card with the iPhone's camera is one of them and Uber does that. There's a JavaScript library called card.io that lets you do that where it just turns on your flashlight and lets you take a photo of your credit card and it scans your number in so you don’t have to manually type it and reduce the error [inaudible 00:19:52].
He has a thing where you can buy stuff and it's basically buy with one touch and then if you ... You get a grace period where you could undo that. You can un-buy something and then ...
```
Kurt: The easier you make something to buy, if people aren’t used to that standard yet, I think there is a lot of that ... I wouldn’t call it cognitive dissonance.
Nick: I think you're just thrown off expectations-wise. There's a mismatch.
Kurt: Yeah. Or it becomes too easy and suddenly, it's frightening. You have to have that grace period, that undo.
Nick: I did not come up with these ideas to be clear. I helped refine them and offer my own ideas about them which is just like fit and finish. The idea of un-buying, you might tap something and it says Buy. It’s very clear you're buying something but you don’t even get an undo button in the app store if you buy something. You tap it on your iPhone.
Kurt: Yeah. I bought a lot of silly things. I wish there was an undo button in the app store.
Nick: I don’t let myself check the app store while I'm drunk anymore because I just threw up and buy some 30-dollar application that's just ill-advised but this is like they're not going to ... It’s a physical good usually. They’re not going to ship it for another day at least or five hours if it's [overnighted 00:21:08] or something like that. At which point, you have a chance to take back that notion and edit your order. You barely get the chance to edit your order or merge orders on Amazon as it stands.
Kurt: With Amazon, it's a scam. You could cancel an order while it's in progress but once you put cancel, it says, "We’re going to try to cancel it" and it's like less than 50% of the time that it actually manages to cancel it.
Nick: Right and if you're Prime, they probably already have it sent on a drone to you so you don’t even know. It’s one of those things where it just seems obvious that you should have an undo button when you're buying something.
Kurt: Absolutely. You've got a lot of experience with this. Give me one tip for – obviously this is tough because it's general – one tip for an e-commerce store owner who's looking to grow the revenue.
Nick: I'm going to drill down into this tip. You need to make it as easy for the person to buy the thing as possible and easy for them to back out of it and so, cutting down the number of steps.
``` If you're asking for any extraneous information, if you are deliberately asking for both billing and shipping address, if you're splitting the person's name into three different fields, if you're not supporting auto-complete, those are all different forms of the same problem which is you're making the person enter more data than is necessary.
Make the person input les data. Nobody likes to fill out a form. You don’t want to feel like you're in a doctor's office buying a product. That's the one tip that I've got.
```
Kurt: I guess it's pretty common with Shopify store owners. They want to do less work personally. They want like or go, "Can you make it ask them X, Y and Z thing?" and we'd say, "Sure, we could build out these product options for your products." Then when we do it, their conversion rate plummets and they're like, "Why did that happen?" Well, because you just made it really hard to buy from you.
Nick: Yeah. Doing this auto-complete ... Going back to Cards Against Humanity, doing the auto-complete for your address and address validation and making it as fast as it is on that site is tremendously difficult. It is not easy programming to be putting in. Doing this focus is really hard but their sales bear out how they're doing. It justifies that decision.
``` It almost says the amount of work that you put into the site and making it smarter, making the defaults easier and making it easier for the person, that's hard work but it directly connects to your conversion rate and if you're delighted about it ...
I can't tell you how many positive twits happened when the first storefront came out that talked explicitly about the user experience and shared that out. It said, "Oh, you have to buy something." Who says "Oh, you have to buy something" about an e-commerce store?
```
Kurt: You have to experience this.
Nick: You have to experience getting sent to a park nearby you. That's very unexpected.
Kurt: People are just ignoring the product itself. They'll just buy it for the sake of the purchasing experience.
Nick: Right.
Kurt: People don’t think ... They would never think twice about someone making the interior of a retail store nice, making it easy to buy something there but as soon as it comes to e-commerce, then suddenly it's like the strange thing that no one wants to spend money on.
Nick: It's funny because Apple's retail stores are beautiful and amazing and their UX is incredible. If you go in person, they swipe your card there in front of the computer and somebody walks the computer out to you and ...
Kurt: Have you ever paid with cash in the Apple store?
Nick: I have not.
Kurt: It's same deal but the cash register is hidden inside one of the display tables. Just like the face of the table pops open. The cash box was in there the whole time. It's clearly on remote. They still use their iPhone and then the thing pops open.
Nick: Right. Their UX is amazing but I bought an iPhone. I bought the new iPhone from the Apple store online the other day.
Kurt: Did you go with the 6 or the 6-plus?
Nick: I have 6.
Kurt: You don’t have monster gorilla paws is what you're telling me.
Nick: No, I have normal human being hands and I don’t need a Phablet. I have an iPad Mini. Anyway, I was going on it and I was on the Website, not the app just to be clear. I think the app is better but it was not fun. It sucked. It was really flunky and weird and it could be better. You're selling ... You're the biggest company in the world. You can fix that.
Kurt: I noticed that they do one clever thing. You can choose multiple payment methods. I don’t think I've seen that anywhere else.
Nick: Amazon ...
Kurt: If you were to max out your credit card and then finish up with a second credit card, they will let you do that.
Nick: Or if you have one of those crappy gift cards that you get from the grocery store, like somebody gives you 100-dollar gift card and you have 18 cents left on it and you feel bad wasting that 18 cents, you could put that on the card.
Kurt: You could do it.
Nick: Right. That's edge [casey 00:25:58], feasible.
Kurt: That's an argument I have with people is about edge cases where it's like, okay, we could fix this problem that one of 100 people have but what's that impact on the other 99 out of 100 people? I think Apple has walked themselves into that.
Nick: Yeah. They can accommodate edge cases. I know that Amazon used to accommodate that sort of edge case and then they got rid of it for whatever reason. They probably saw that it wasn’t diminishing returns or something but anyway.
Kurt: That's a thing you could split test.
Nick: Right, yeah. I'm sure Amazon does. Amazon A/B tests everything. I get bucketed into A/B tester of their pages all the time. I find it redesigns itself and I refresh it and it goes away [crosstalk 00:26:42].
Kurt: Or open an incognito window and it's a different site. Yeah, I've had that happen.
Nick: Yeah.
Kurt: If I wanted to learn more from you, the best way would be to do what?
Nick: You should subscribe to my mailing list because it’s funny.
Kurt: I subscribe to it. I enjoy it, lots of good Chicago references in there.
Nick: There are a lot of good Chicago ...
Kurt: Like the hotdog story.
Nick: There was a story ... It's a dog stand that's very popular here. It's closing this week. That is a very good way to get to know me as a person. If you want to know more about interaction design, I would go to cadence.cc which is my book, Cadence & Slang, and grab a copy. It is generally considered one of the more important texts on interaction design by people far more famous and important than me which is terrifying.
Kurt: I have read it. It is genuinely good.
Nick: Awesome, thank you. That's the best way to get to understand the kind of stuff that I'm talking about with e-commerce. It's applicable to any technological project but the ultimate goal is just to make things more efficient and pleasurable to use.
Kurt: Fantastic. That's great. Thank you, Nick. Thank you for joining us and have a great day.
Nick: Thank you so much. Take care.