John Rhea joins me on episode 11 of Site Unseen to talk about the ways in which storytelling can apply to web design and development.

John is a modern day Dr. Jekyll and Mr. Hyde rocking both the developer and designer rolls. He’s your one stop shop of awesome. Not only that, he creates these websites and mobile apps with a story framework. Stories draw your clients into your brand and help them believe in your greatness.

John has a third half to his personality as a storyteller and writer, publishing science fiction stories and more on StoryLab, his story blog. (His math skills are not his strongest suit). He counts his words carefully at 8wordstories.com and chronicles the misadventures of deeply sad, but utterly hopeful Pineapple at pineapplecomics.com

John talks about himself in the third person on his websites and lives near Charlottesville, Virginia with his beautiful wife, five rambunctious kids, and a small army of pets.

Follow him @storykaboom and visit his website to learn more.

Episode Transcript

David Hitt: 00:18 Hello and welcome to another episode of Site Unseen. Site Unseen is the digital marketing podcast which covers issues related to the digital marketing studio and agency of today. On our podcast, we explore trending topics which lie at the intersection of design, development, and marketing. Today we’re going to be talking to a fellow by the name of John Rhea. John, did I pronounce it-

John Rhea: 00:42 It’s actually Rhea.

David Hitt: 00:43 Say it again.

John Rhea: 00:43 It’s Rhea. Rhea. As if it were R-A-Y.

David Hitt: 00:49 Ah. John Rhea.

John Rhea: 00:52 Yes.

David Hitt: 00:52 John is a Renaissance man, let’s just say. That is to say, if the Renaissance took place actually in the Gothic era in an obscure Eastern European location that was crawling with zombies. We’ll speak to that reference later on. Good afternoon, John.

John Rhea: 01:13 Good afternoon.

David Hitt: 01:19 I think I could explain that you are a man of many passions and talents, but why don’t you explain in your own words who you are and where your interests lie and what you’ve done professionally and how those all combine into the career you’ve fashioned for yourself?

John Rhea: 01:39 You want everything up to this point. I was born in … No. I’ve always been a nerd, always interested in movies and stories and books, and ended up doing computer science my undergrad. Felt like I wanted to do some more storytelling and some more artistic sort of things, which I hadn’t really done much of in college, so I ended up going to grad school for film.

David Hitt: 02:06 Let me just step back. Why did you major in computer science?

John Rhea: 02:12 Good question. Initially I was interested in possibly doing robotics or some type of other … I actually started as a mechanical engineer for a little while and was interested in robotics and robots probably because of my sci-fi interest. Then just like realized that the things that they wanted to teach me in mechanical engineering were things that I wanted to learn but not things that I wanted to put all the work in to learn.

David Hitt: 02:41 I see.

John Rhea: 02:42 I ended up switching to computer science, thinking I would still do some type of robotics thing. It was about probably junior year that I realized or understood that maybe this following this movie option or the stories option was something that could be done. By that time, I was so deep in the school that I didn’t really want to pull out. I did like computer science. Just I thought I wanted to do something different. I had looked at a couple other programs for doing something else after school. Grad school made sense. There wasn’t really a major at my college for something like filmmaking, at least that I could find, so it wasn’t really an option to switch to there and I didn’t really want to move to a new college to do it too. I just looked for graduate program.

David Hitt: 03:31 Did you move straight from undergrad to the graduate program? Or were there a few years?

John Rhea: 03:36 I ended up taking a year off because my wife hadn’t graduated yet. She wasn’t my wife then, but my girlfriend who I later married was not graduated yet. I ended up taking a year doing IT work stuff and putzing around till she graduated, and then we got married and moved to DC where I went to grad school.

David Hitt: 03:59 Somehow or another, you have made the transition from having a background, a formal academic background, in computer science and filmmaking to applying, it sounds like, some of the concepts and ideas one learns as a storyteller or a filmmaker to the world of website design and development. How did that transition take place?

John Rhea: 04:26 A lot of it was pragmatic and practical. By the time I was done-

David Hitt: 04:34 Oh no.

John Rhea: 04:34 By the time I was done grad school-

David Hitt: 04:37 Perish the thought.

John Rhea: 04:37 By the time I was done grad school, I had one kid already and another on the way, so the life of a starving filmmaker was not really something my wife was up for. I was thinking about how I could bridge that gap, and websites was a great place to do it. I had already been teaching some like Dreamweaver courses and some stuff in workshops and things in grad school as I was making ends meet and stuff. It was a natural fit for me to move into that. I had done some Flash work as well, building a game.

David Hitt: 05:09 How much front-end code did you study in your computer science curriculum? Because I know that … I know a lot of software engineers, and they ultimately end up working in web development. But they actually are taught languages that are nuclear bombs to the flyswatters we tend to use in the form of HTML, CSS and JavaScript.

John Rhea: 05:28 It’s true. I think the answer is none. I did have some HTML and maybe some CSS in high school. I like to say that I’ve been making websites since the last millennium, though there’s a couple breaks in there. Not really much at all. I remember applying for a PHP job after I got out of school. I was like, “The things translate, right?” They’re like, “Maybe.”

David Hitt: 05:58 We’ll see.

John Rhea: 05:59 Then I didn’t hear back from them, which was probably why from their part. I didn’t know what I was doing at that point. Not so much on the computer science. But it did teach me a lot of the practices and philosophies of code and how to use it with it. [crosstalk 00:06:20].

David Hitt: 06:19 I understand that if we’re lucky as undergrads we get taught a foundation of skills that can be applied differently depending on the circumstance under which we’re required to apply them. I’m not a programmer by training, but I’m a designer of websites myself and my graduate degree is in landscape architecture. It seems like a convoluted trail from there to here, but we actually were taught … The only thing I missed in terms of a fundamental design training was topography. That’s the only thing that wasn’t really relevant to landscape design. Everything else is completely relevant. I understand. At the outset of your career, the best you can hope for I think is a framework that you can apply.

David Hitt: 07:09 But, moving on, you’re here because I read an article you wrote in Smashing Magazine. It turns out you’ve written a couple of articles and you maintain several websites and there are some themes that are consistent across all these online channels that you have. Just list them all and tell us a little bit about each one of them. Your final challenge is to tell us how they all relate thematically to one another, how they unify your brand.

John Rhea: 07:47 That’s a good point. Perhaps there should be some brand work done to try to figure that out. About in 2012, I had a number of stories that I had written, a number of things, and I thought … I had read some articles that were talking about how people were making their book free and how it just led to a bunch of sales and that sort of thing. I ended up synthesizing that into building a story blog. I was certain that my book deal would come within six months, and yet seven years later I have yet to get that book deal. But building this, Story Lab is what I ended up calling it, because I wanted to also experiment.

David Hitt: 08:33 What kind of book deal were you looking for?

John Rhea: 08:36 At the time I just thought any book deal would do.

David Hitt: 08:39 I’m sorry, but you write so many different types of things. You write how-to guides and fiction. Were you seeking to be a fiction writer?

John Rhea: 08:48 Yes. It was mainly fiction at the time. For both good reasons and bad reasons, I was like, “I’m just going to write any genre.” While that ended up being great for me in that it allowed me to explore things and figure out what I did like and what I wanted to write, it was also bad because I really couldn’t build an audience or have any consistency in the things that I published. While I would say you don’t have to stick to a genre, there are downsides to not sticking to a genre when you write.

John Rhea: 09:21 Initially it was much more about fiction, and still is. I hope someday to publish a novel and short stories and things. I did end up publishing one short story. Story Lab ended up being really a lot about storytelling and my interests there and experimenting with story and other mediums. I’d already been-

David Hitt: 09:44 Describe Story Lab for us.

John Rhea: 09:48 Right now it’s a story blog focusing mainly on sci … Excuse me. Focusing mainly on science fiction stories. A little bit of fantasy too and some superhero and that sort of stuff. But it’s mainly focused on sci-fi.

David Hitt: 10:01 Is the format a serialized, longer form story that you release in segments?

John Rhea: 10:09 Both and. It depends on the story.

David Hitt: 10:14 Where does the lab part come in?

John Rhea: 10:18 Give me a second. I’ll get there. A lot of it is what stories … I’ll look at what stories I have that I think are ready to be published. If it’s a longer story, then I’ll break it up into multiple parts. If it’s a pretty short story, then I’ll just put it up whole, depending on how things will go. But as part of that, I also thought about doing website-based stories or other stories that were not necessarily fitting in the box of a typical narrative in text. I do have, there’s not a lot of them, but there are some picture-based stories. I did do a number of website-based stories.

John Rhea: 10:59 Probably the first one I did was rrremail.com. It’s three Rs, email. It is about reducing, reusing, and recycling email and faux plays with the idea of a service that would write emails for you using emails that you’ve already sent. It gives examples and things, and does a terrible job of actually showing your voice or whatever. But it was just this hopefully funny idea of reusing email.

David Hitt: 11:34 Funny but directly relevant to the algorithms that are essentially manning chat bots these days.

John Rhea: 11:42 That’s true too. That’s true too.

David Hitt: 11:45 You’re probably only about three months away from a tool that’s going to be released that basically going to attempt to do what it was that you were just speculatively and playfully thinking of.

John Rhea: 12:03 That’s true. I hadn’t thought about that. But you’re absolutely right. We’re on the edge of that. [crosstalk 00:12:11].

David Hitt: 12:11 There’s Story Lab. Tell us about your other web properties.

John Rhea: 12:16 A lot of that experimentation and thinking about stories outside the box is what has pushed a lot of the other properties that I play with. 8 Word Stories is another one. Its 8wordstories.com. I guess I should also say storylab.us is the Story Lab page, if you were interested. 8wordstories.com is just what it sounds like. Eight words. I publish one a day.

David Hitt: 12:42 One word a day or one story a day?

John Rhea: 12:46 That would be even longer. One story a day. It has to be eight words. You are also welcome to contribute stories if you want.

David Hitt: 12:54 Why eight words? Is that some antiquated format or something? Is this like … I’m thinking of haiku.

John Rhea: 13:05 There’s a lot of some literary focus on six word stories. You think of the classic one, I think it’s been attributed to Hemingway, though I don’t know if that’s true or not, but, “Baby shoes for sale, not used,” or something like that. Within that six words, you get a full story. The goal, because I like speculative fiction, science fiction, those sorts of things, that’s really, really hard to push into six words. I was like, “Well, I’m going to give myself a little bit of extra.”

David Hitt: 13:40 So you gave yourself a two word breathing room.

John Rhea: 13:43 A two word breathing room. That’s where eight comes from. Then I just had fun with eight words.

David Hitt: 13:52 What else? What other? I know there’s more that you’ve got out there on the web because I did my research.

John Rhea: 13:59 There is a probably terrible web comic called pineapplecomics.com

David Hitt: 14:04 Actually I didn’t research that, although I came across it.

John Rhea: 14:07 It’s okay. It might be better for you that you didn’t.

John Rhea: 14:08 Depending on whether you like my sense of humor or not. It is basically a pineapple and he just loves the world and is completely oblivious to most things. Hopefully it’s a fun little thing. It allows me to do some more art and make edits to photos. It’s fun in that way. I’m trying to think of what else there is.

David Hitt: 14:39 The Undead Institute.

John Rhea: 14:40 Oh yeah. The Undead Institute is my attempt at making learning fun. One of the many things I do is I teach web design at a community college. Out of those thoughts about how to teach and how hopefully, when you’re having fun, hopefully learning is easy, and how dry and boring most coding textbooks are. I thought, “Why not pair zombies and code and just have fun with it?” The reason I chose zombies ended up being, so back in 2013 I was working on a talk and as I was working on it, it just came into, “Well, if I made this about zombies it’d be really funny.” From that point on, I had thought about that and had it in the back of my mind about making something about zombies. About last year I actually started writing books. I’ve got five books out now and one coming hopefully soon.

David Hitt: 15:50 Interesting. We’re going to revisit the idea of The Undead Institute because I did visit and read content and downloaded one of your books and I thought it was great.

John Rhea: 16:03 Thank you.

David Hitt: 16:03 You raise some interesting questions as it relates to design problems that we face on a daily basis, that we’ll come back to in just a couple minutes.

John Rhea: 16:13 Sounds good.

David Hitt: 16:14 I stumbled across you because you wrote a couple of stories in Smashing Magazine. Essentially, you wrote these articles which applied the concept of story structure to website design and development. That, as I understand, is an idea borrowed from a very long treatise written by Joseph Campbell in 1949 called I think The Hero’s Journey. Is that right?

John Rhea: 16:50 That’s correct. The book’s called The Hero with a Thousand Faces, but the hero’s journey is context of that.

David Hitt: 16:59 Hero with a Thousand Faces. I shamefacedly was not aware of the influence this book has had on literary figures, but apparently it’s been mighty influential and I guess heavily influenced George Lucas in the development of the Star Wars narratives from what I read. Tell us about that and tell us what led to the affiliation or the linkages that you see between it and the process of designing user experience.

John Rhea: 17:39 I learned about the hero’s journey when I was in film school, and they did tout how George Lucas was heavily involved, heavily …

David Hitt: 17:47 Influenced.

John Rhea: 17:48 … influenced, thank you, by it. It’s basically what Joseph Campbell did is he took a whole bunch of old stories and a wide variety of stories and looked at what was common among them, because there are similar structures, sometimes even similar characters, with how stories are told. Often the best stories are the ones that fill out this structure in the best way. Now, there is some concern that you will then have stories that are the same and boring because you already know the structure. At the same time, we all have a very similar skeleton but we all look very different. It’s a similar thing with stories and with the hero’s journey. The hero’s journey is just takes a look at what a hero does, usually the main character of the story, and just the things he hits along the way, fighting the villain and finding a mentor sometimes, like Obi-Wan for Luke, et cetera. It just provides a structure and a [crosstalk 00:19:01].

David Hitt: 19:02 I actually have your article here. I like the use of this metaphor because it imposes something that already exists, which essentially it seems like you’re identifying the challenges that a hero in a piece of literature or a website visitor within the context of our world faces. You talk about his starting point, the challenge he faces, how he rises to accept and confront that challenge, and ultimately resolves his challenge in one way or another. You suggest that this is an apt structure to understand a user’s journey on a website.

John Rhea: 19:53 Absolutely. If we look at the user of the website as the hero, they are entering into the story. They have a problem they need solved, which every hero has a problem they need solved and that’s what the point of the story is, to solve that problem. If we look at the user as the hero, we can then see how they interact with your site and where they might be, where their head space is, even if we look at the structure of the hero’s journey and where they are in the process as to how they … what they’re feeling when they’re there using the website, what they expect, and also just what the phases are. If I have finished, the purchase processors for instance, what am I as a user thinking about in relation to the company or relation to the website based upon where I am in that process?

David Hitt: 20:57 I found the article really useful. It’s interesting to me because I think you pointed out it’s not just the fact that you overlaid this narrative journey onto a web visitor, but you talk a lot about how less than optimal user experiences fail to bear in mind where in the journey web visitors are. I think what the story did for me was, and this is a big point of emphasis in our work too, is contextualizing the environment and the experience that your visitors are within.

David Hitt: 21:47 I think the emphasis on storytelling is really about emphasizing the very fundamental reality that so many brands forget, which is that it’s about the customer. I mean it all gets back to understanding that you are curating another individual’s journey. It’s what great writers do and it’s what great user experience architects do. It’s about taking that journey in another person’s shoes. I found the article really useful in that regard. You’ve written a couple for Smashing. Just as a another … I don’t know who listens, and it’s a varied audience, but how did you land that first story in Smashing? I’d be curious to know what you did to land that, because there are a lot of people that would like to get published in Smashing, myself included.

John Rhea: 22:45 It’s actually not as hard as I thought it was. Smashing is actually always looking for authors and actually most most websites will have, or most magazines or whatever, will have a how to submit to it. I just followed their guidelines and-

David Hitt: 23:05 Did you have to submit an actual story or a pitch?

John Rhea: 23:11 It was an article.

David Hitt: 23:12 But you submitted the article rather than an idea for an article.

John Rhea: 23:16 Yes. What happened was, I had written most of the article, or at least the first version, which, I can be honest, was kind of terrible.

David Hitt: 23:25 That’s okay.

John Rhea: 23:26 It got a lot better in the process.

David Hitt: 23:26 That’s what first drafts are for.

John Rhea: 23:31 I think Smashing typically takes pitches before they take articles, but I think they’re also happy to look at articles. It just depends on their submission criteria. I think A List Apart would like more of an article than a pitch, whereas Smashing is fine with a pitch. It just depends on the publisher.

David Hitt: 23:55 Why this particular article, or Smashing? Or was it just that that’s what you had been thinking about and so that’s what you submitted to Smashing at the time that you wanted to submit something to Smashing?

John Rhea: 24:06 The first one had been something I’ve been thinking about for a long time and is also story related, though not the one that you necessarily found. That was my second one on this story structure. But it had been something that I had been thinking about a lot and I had submitted a talk to a couple of places as the genesis of this. As I was solidifying my ideas in order to talk about it, I was like, “This could be a good article.” I then started putting it more in article form and had a draft that I then submitted to Smashing. They were kind enough to take it.

David Hitt: 24:48 It’s understandable why they took it. I read the story articles.

John Rhea: 24:52 Thank you.

David Hitt: 24:52 They were both very well written.

John Rhea: 24:54 Thank you.

David Hitt: 24:54 Tell us a little bit about The Undead Institute and how that came about. I know you already mentioned that the idea is you’re providing instructional content wrapped up within the playful metaphor of zombies and undead themes.

John Rhea: 25:18 When I was working on the books, what I realized is that just talking about zombies, while fun, is not going to support an entire book necessarily, even if I’m including the HTML, CSS, and stuff like that. One of the things that I wanted to make sure I did was have analogies that made concepts clearer while also being about zombies. The goal was to try to, again, make learning fun, but also use the zombie references both to make jokes and to have fun with that, but also to really drive the material home and to be helpful in getting people to understand.

David Hitt: 26:07 So the books came first?

John Rhea: 26:11 There was a talk in 2013 that came first. Then I did an email course that I would say I did poorly, and my editor definitely helped me figure out. My first email course had zombies but it also had pirates and ninjas and stuff, which was fun but was too much and didn’t focus things well enough and went all different places rather than focusing on-

David Hitt: 26:39 You created a multiverse right off the bat.

John Rhea: 26:43 That is my tendency. Luckily, my editor was like, “You need to tamp that down.” She also told me what jokes weren’t funny, which there were a lot of them.

David Hitt: 26:56 That’s what editors do.

John Rhea: 26:58 That’s true. She’s worth her weight in gold.

David Hitt: 26:59 Joy killers of the literary industry, I suppose. For the writers at least.

John Rhea: 27:05 But their work gets better afterwards. My work is definitely better afterward.

David Hitt: 27:08 Hopefully.

John Rhea: 27:12 Just trying to make it not only palatable but fun and really [crosstalk 00:27:17].

David Hitt: 27:17 On The Undead Institute you have a bunch of downloadable, reasonably short guides, I would say, that are all related to website design and development and focus on different topics. We’re getting close to the end here, but I actually I downloaded and read your usability book, beginner usability book. I just wanted to have a designer to designer discussion because … I’ll just read the quote. In this book you wrote, “Every rule you break adds a bit of cognitive dissonance. Users have to think a little more and work a little harder to do what they want to do or find what they want to find. Since the goal of websites is generally to help users complete the task they want to complete, the faster we help them do that the better.”

David Hitt: 28:17 You wrote that. Then, the next couple of pages of your book you delve into details related to things like contrasting text color with background color, the advisability or lack thereof of floating text over background images, letting font size, et cetera. All of this just got me thinking about things like rules and when to break them and how difficult it is to teach design and how … I am a person that came to design from a non-design background originally. I got my master’s degree with … I had gone back to night school. I had taken some architecture courses. Then I was just immersed for three and a half years as essentially a non-designer in a design curriculum. I started from scratch. How much, in your experience as a teacher and an educator, how do you teach design?

David Hitt: 29:33 You express all of these ideas, but at the end of the day you cited … You sort of say, “Here’s the rules. This is the rule. You’ve got your Rule A, Rule B. Oh, and by the way, you can break all of the roles.” What I always struggle with is, I just eyeball everything and everything I do now is done by instinct. But it’s not really instinct because it’s learned. Or is it learned? How much teaching can you do in design?

John Rhea: 30:09 I would say a lot.

David Hitt: 30:11 I think so too, actually.

John Rhea: 30:13 I also come from a non-design background. Computer science was my goal because I didn’t think I had any design skills. Hopefully I’ve proved wrong, but you can look at my stuff and see if you agree. But I think there’s a lot, not only just specific rules like the rule of thirds for photography or some of those sorts of things. I think there’s a lot of instinct and people come with different amounts of instinct. Some people have that talent, a lot of it, from the cradle. But as someone who I think has gotten a lot better at design as I have gone on, I think a lot of it can be taught. There’s plenty of times …

John Rhea: 30:58 I’m reading a book now, I’m blanking on what it’s called, Art Direction for the Web, from Smashing Magazine. There’s a lot of just simple tricks that he’s talking about. I’m like, “Oh, that’s why that works.” Or, I’ve been doing that kind of right, but not quite right. Here’s how to get it right. I didn’t understand why this was a little bit off when I do it this way or why I couldn’t copy this designer when he was doing it that way, because I didn’t measure it properly or whatever. I think there’s a lot that can learned.

David Hitt: 31:34 I agree with you. It occurred to me reading, thinking about what you were writing and my own experience, I think what we’re learning how to do is see. I think we’re teaching our students how to see. Even with my clients, I frequently … They often tell us how to design. They’ve often even designed. They’ll give us something, and the only way you can address a client respectfully when they’ve produced a big pile of dog shit is to show them examples of design or alternative approaches that look better and let them decide for themselves. Invariably, through a process of teaching them to observe, they’ll come around to your way of thinking. I think that’s what we’re doing with students too. You can talk about rules up the wazoo, but at the end of the day it’s like, “Does this look good?”

David Hitt: 32:35 Then you overlay the structural user experience related. Are you guiding them on a journey? Are you presenting them with guideposts through which your user can achieve whatever goal it is you’re seeking for them to achieve? I’m sure as a writer, I’m not … I don’t write as much as you do. But I suspect that listening is also one of the most important tools that you can … Listening and observation are equally important for the tasks of both writing and design.

John Rhea: 33:11 Absolutely.

David Hitt: 33:13 John, it has been great fun and we’re just about done. I was hoping that you could just spit out your name and any other relevant contact information for all of the different pots you have your hands in these days. We thank you again for being our guest. Take it away.

John Rhea: 33:42 Thank you. It was great to be here. My main website, or my design website, is johnrhea.com. That’s J-O-H-N R-H-E-A dot com. You can find or contact me through that if you’d like. I also have undead.institute, which is the zombie books. I actually created a promo code just for your listeners so they can get 10% off if they use-

David Hitt: 34:05 Thank you so much.

John Rhea: 34:06 … the code siteunseen, that’s one word, at checkout. Please have fun with that. One of my newest projects that I’d love to just … Again, it’s about stories, is illustratedscifi.com. It is the first issue of a highly designed magazine. There are five stories to start with, all have individual design, an individual look and feel. Perfect enough, the first issue’s theme is unseen.

David Hitt: 34:39 Great. Thank you so much.

John Rhea: 34:42 Thank you. That was great.

David Hitt: 34:43 Yes, it was. Thanks, John.

John Rhea: 34:45 Thanks.