Building an InVision Competitor on WordPress with Andre Gagnon

Intro: Hey, everybody. Welcome to episode 116 of How I Built It. Today my guest is Andre Gagnon of Project Huddle. We’re going to talk about pretty traditional software development today, but a lot of what we talk about has more to do with the research process and getting an MVP out there. How he learned the skills that he needed to help develop this product. So he talks about how he has a bias towards action, how an MVP is better than something you write down. How an MVP is all, you need. Don’t make perfect software, but I don’t want to spoil this whole episode. So I’ll just let you get right to it. Of course, before we do that, we need to go to a word from our sponsors.

Break: This episode is brought to you by Plesk. Do you spend too much time doing server admin work, and not enough time building websites? Plesk helps you manage servers, websites, and customers in one dashboard. Helping you do those tasks up to 10 times faster than manually coding everything. Let me tell you, I recently checked out their new and improved WordPress toolkit, and I was super impressed by how easy it was to spin up new WordPress sites, clone sites, and even manage multiple updates to themes and plugins. With the click of one button, I was able to update all of my WordPress sites. I was incredibly impressed by how great their WordPress toolkit is. You can learn more and try Plesk for free today at Plesk.com/build. This episode is sponsored by our friends at Castos. Castos is a podcast hosting platform built specifically for WordPress. Their Seriously Simple Podcasting plugin lets you manage all of your episodes and podcast RSS from your WordPress site, but have your files hosted on a dedicated media hosting platform. If you use WordPress, this is by far the easiest platform that I have used for podcasting. I also really love how the Castos team takes a commonsense approach to their pricing. You can create as many episodes and podcasts as you want and you don’t have to worry about how much storage you’re using or bandwidth restrictions. If you’re like me and you already have a ton of episodes from an old host, they’ve got you covered. Castos will import all of your podcast content into their platform completely free of charge. It’s literally one click of a button in your WordPress dashboard. I could not believe my eyes when I saw this in action. It’s stuff like this which is why I built my own podcasting course on top of Castos. They have put together a really special opportunity for the show today. You can get 50% off your first three months with the code BUILTIT19. Just head over to Castos.com/HowIBuiltIt to learn more.

Joe Casabona: Hey, everybody. Welcome to another episode of How I Built It, the podcast that asks “How did you build that?” Today my guest is Andre Gagnon. He is the self-described abstract concepts coordinator of a very interesting looking WordPress plugin called Project Huddle. Andre, how are you today?

Andre Gagnon: I’m great, thanks.

Joe: Awesome. Thanks for being on the show and for– I finally got into the habit of asking people how to pronounce their last name. So, I’m glad I asked for you. I was able to write down the phonetic spelling. But that’s not what– We’re not talking about my adventures in mispronunciation. We are talking about your plugin. So, why don’t you tell us a little bit about who you are and what you do?

Andre: Currently I’m working full time on Project Huddle which is a WordPress plugin for getting design feedback from your clients. The best way I can describe it is it’s like sticky notes on your designs and web projects. Before that, I was doing a lot of WordPress themes on Theme Forest, and part of that was I had a freelancing business, which is how I decided to create Project Huddle. Like a lot of guests on your show, you end up creating things that scratch your own itch, and it seems to work out.

Joe: Yeah. That’s fantastic. Again it sounds really interesting, and I was checking it out a little bit before this show. You were a freelancer first, you were doing things on Theme Forest. So maybe, and I could probably guess a little bit, but how did you come up with the exact idea for this? You mentioned that you were scratching your own itch. A lot of people do that on the show, but what made you think “Sticky notes for my design projects?”

Andre: It’s a great question. There’s a lot of tools out there that already do this, I think people that are in the design realm are familiar with InVision is a big one for design, and there’s BugHerd and a few other ones for website feedback. But at the time, running my freelance business, I had what I like to call “SaaS fatigue.” I had all these micro-services I needed to subscribe to run my business, and if I decided I wanted to switch or customize, or I didn’t want to pay for one, all of my data was gone. Which was a huge bummer. I did a lot of research, and I couldn’t find anything self-host or white label that did something as simple as just point click feedback, so I decided to create something. I was heavily involved at WordPress at the time, and perfect timing is when WordPress came out with their REST API which made it more than just a blogging platform and started to become more of an application platform. That’s how it started, I could get more into the tech details, but maybe we will save that for later.

Joe: Yeah, we’ll definitely touch on that during the title question. Because that, again, sounds very interesting. I love what you said there, that you had “SaaS fatigue.” I think that’s something a lot of us are experiencing even more today. Because we’ve got all these services, all these SaaS products we’re paying for. A lot of them are integral to our business. We also have– I don’t know about you, but I subscribe to Netflix and Hulu, and Disney is launching their own within the next year or so.

Andre: No way.

Joe: I am 100% paying for that. There’s no way I’m not going to be able to pay for that one, I have a child, and I am a child. I love Disney. So, we’re just in a situation now where everything is subscription-based. Including WordPress plugins.

Andre: Exactly. Even researching a few these tools, there was a couple that just went down and never came back up. There was a very popular one that I forget the name of it. About a month ago, everybody lost everything, and they decided they were going to shut down the business. So, when you’re subscribing to these services not only are you locked in cost wise, but you’re partnering with a business that may not be there tomorrow or next month.

Joe: Yeah, absolutely. And then you’re also subject to things that the platform host wants to do. Famously over the summer, or maybe over the spring, Medium decided that they were going to change how their paywall worked. There were people, maybe 25% of their income relied on that. Just on a whim.

Andre: Absolutely. That’s a prime example not to hinge your business on someone else’s proprietary platform. I think that’s why people love open source and self-hosting and doing that stuff. Because they’re limiting that risk and they’re in control of everything. That’s a really good example.

Joe: Yeah. Thank you very much. I remember that, and I was like “This is the reason that you should self-host. Or, you should at least be able to get things easily out of the platform.” That day I made a video, and I’ll link it in the show notes, on how to connect Medium and WordPress. So no matter where you posted, the two websites would sync up.

Andre: No way. That’s a really good solution.

Joe: Right? I was thinking that, too. It’s a pretty popular video. I hit the nail on the head sometimes. So, you started to mention researching, and you mentioned InVision and BugHerd, but that there was nothing for the self-hosted person. What was your research process like? Were you looking at and trying other things, were you talking to people?

Andre: I didn’t talk to anybody. That would have been a good idea. I talked to maybe a couple of friends. I have a bias towards action, and I think even an idea can sound great on paper but then executed it could be completely terrible. I’m like, “Just get an MVP up and see if we can get people to buy it, and that’s the only way you’ll know if it’s going to work.” So that’s exactly what I did. I built the first version of the plugin, which was only feedback on mockups, which are like static images and designs. Something very basic, just put it out for sale and see if people bought it. Sure enough, they did. So I knew that there was value in it enough to keep investing.

Joe: That’s incredible. “I have a bias towards action.” I like that because you can go up to anybody and be like “Do you think this is a good idea?” And they’ll be like “Yeah, sure.” This exact thing happened to me at a Word Camp recently where I was like “There should be a place where people can go and upload talks, like rejected talk ideas to Word Camps.” So, I propose a talk, and it doesn’t get accepted, but now I can record and put it up on this website. Maybe an annual subscription is $20 dollars a month. It took a couple of my friends to be like, “Why? How much are you paying the speaker for uploading this?” And stuff like that. So, I’m glad I didn’t put any work into it.

Andre: I can’t take credit for all that. I think Tim Ferriss has a quote that “You don’t ask people if they will buy it, ask them to buy it. And that’s how you’ll know.” Even if you don’t have a product yet, I think you can sell preorders or something like that, to know if there’s value.

Joe: Gotcha. I think that’s a really good point. Troy Dean talked about that too. He put up a pre-sale page for his first webinar, and if it got less than some amount of subscribers, or buyers, he wouldn’t do it. I think that’s a really good point. I like that. When you were trying to figure out the feature set, was it basically what you saw in these other products? Or was it stuff that you knew that you wanted?

Andre: That was an advantage I had. I can look at all these other products, and I was the customer, so that made it easy to pair off features based on the products I was working on. I could decide to add a new feature because it was so small, it was just me. And of course, it’s changed. My opinion on adding new features has changed, but I think at first you have to throw a bunch of stuff at the wall and see what sticks. You end up cutting some stuff, and you end up adding things. But then the most valuable feedback I think you can get– And I learned this doing WordPress themes too, is you have an idea of how people are going to use something. But then when they download it and use it, there’s all these other ideas and use cases that you didn’t think about, and there might be some really large ones that just totally you didn’t even think about. So listening to customers and even anecdotal feedback right away is super valuable too.

Joe: Yeah, that’s a fantastic point, and you’re absolutely right there. “The way I would use it is maybe not the way most people would use it,” or something like that. I like that. That’s a lot of really good advice there. So, as we’re talking, let’s get to the title question. We have a good idea of how you researched this and where the idea came from, but in the pre-show, we were talking about getting technical. You mentioned the REST API. How did you build Project Huddle?

Andre: This is exciting for us. I never get to talk about the tech side of Project Huddle on a lot of these podcasts. So, first of all, I used WordPress in a white REST API, and the reason I chose WordPress is there’s a lot of developer familiarity, it’s easy to install things, and it has everything you need to build a web app. It has a lot of really neat JavaScript frameworks and tools that ship with WordPress. Project Huddle was built with Backbone, and the REST API has a– Or, WordPress has a Backbone client that automatically turns custom post types into models in your Backbone app. So all that configuration is done for you. Then there’s a few other tools that are used. There’s subview manager which Mark Jake was head of a Word Camp talk about the subview manager that was extremely helpful. I think all these things are bundled with WordPress and people don’t know about them, which I found interesting. I think there’s a lot of popularity for the newer frameworks, like React and Vue, and those are awesome frameworks, but I think Backbone is underrated. Because it’s so non-opinionated, you can do whatever you want, and then there’s some other scripts that didn’t ship with WordPress that it needed to make it happen. There’s one called X domain, which is needed. Project Huddle by default, you can use it on other WordPress– Or, other sites, not necessarily WordPress. You can use it on a Squarespace site or Shopify site, and it communicates across domain. X domain lets you do that through Post Message, which is neat. You don’t need to do any special server configurations or anything like that. I think there’s a lot of really nice open source software that lets you build this stuff, and it’s like we’re at the prime time of open source software. Anybody can build anything, and all these things are available, and people are just putting it out there for people to use, and I think it’s a cool time in tech.

Joe: That’s great. I love that you’re giving me a lot of really good pull quotes for this episode, “We’re at the prime time of open source software.” I’ve been saying this to my students a bit for a while because when I started, there was no CodePen, there was no GitHub. There was just looking at people’s websites and trying to figure out what they did.

Andre: Yeah, me too.

Joe: Nowadays it’s like, “Here’s CodePen. I could fork this and see what happens,” or, “Someone has a gist on GitHub that allows me to take a look at some generalized code.” So, I think you’re absolutely right. People are willing to share more and open source has– Microsoft is doubling down on it. They bought GitHub, which I think a lot of people forget.

Andre: I didn’t forget.

Joe: Yeah, I didn’t forget either. Well, I forgot for a little bit. I was talking to somebody, and they were like, “Sometimes I forget that Microsoft bought GitHub.” And I’m like, “Yeah. I forgot about that until just now.” It is a really good time for open source. So, you built this with Backbone? I have a technical question for you now because as we record this WordPress 5.0 isn’t out yet, but Gutenberg is heavily– Is all React.

Andre: Yeah.

Joe: Are you going to make any architectural changes because of that? Or are you going to stick with Backbone for the foreseeable future?

Andre: I don’t have any plans to change, I mean Backbone has worked well for me. Especially with the Backbone client, WordPress still has an investment in it. The Backbone client’s part of core. I can see the benefits of going to something like React, but what’s nice about Backbone– It takes a little bit longer for me to write, but to extend it, and there’s a child template system within Project Huddle that you can modify. Ease of use makes it super easy to do that stuff, rather than if you were to do something with React and you’d have to do it all in one file, and you’d have to write JavaScript. If you’re not familiar with JavaScript, it can get a little bit complicated. But PHP developers can extend Project Huddle without knowing hardly any JavaScript, just because of a Backbone setup. So, I rather like it, but I can see the benefit of being like “There’s going to be more React developers and more expertise there.”

Joe: But that’s a really good point because up until advanced custom fields announced that they were making it so you could define blocks in PHP, a lot of PHP developers who don’t know JavaScript were freaking out. I’m not a JavaScript expert, and I know enough to be dangerous. I can definitely break the front end with some JavaScript, and I don’t know React, and I was like “I need to learn React, and maybe now with advanced custom fields I can still do stuff, but maybe delay that.” So your point is a very good one. Backbone is relatively lightweight too, and it’s extensible for PHP developers. I think you’re making a good choice. As long as WordPress doesn’t announce that they are removing Backbone from core in the near future.

Andre: Yeah.

Joe: You’re good.

Andre: Yeah, exactly. Which I can still ship my own version.

Joe: Yeah.

Andre: In the end.

Joe: Yeah, exactly.

Andre: But it’s like a lot of these frameworks are, React is more opinionated, but Backbone is very similar. It just doesn’t have– If people are familiar with the two-way data binding, the models aren’t automatically updated with Backbone. You have to add listeners and update what you want, which gives you more control. But you have to write more code.

Joe: It sounds a little bit like Angular. I hitched my wagon to Angular–

Andre: Yeah.

Joe: A couple years ago, and now I’m like “Now I’ve got to unhitch it and move to React.”

Andre: You’re going to be moving that hitch around a lot in the next couple of years.

Joe: I know, that’s why I’m glad I didn’t hitch it to Vue earlier. I was like, “Vue seems easier. There’s also JavaScript, and I like that.” And then if I want to stay in the WordPress base or develop in the WordPress base, React is the one I should learn. So I have Wes Boss’ course, which I will link in the show notes. He is very good.

Andre: Yeah, that just came out, didn’t it?

Joe: He just updated it. I have his node one, and his React one, and–

Andre: Have you taken any of them, or done any of them?

Joe: I took his free JavaScript 30 course, and as a course developer myself I love his style. We have very similar styles. He is pretty relaxed. I think he does a good job of demoing code because it’s hard. Talking about code in a course, I’ve done it, and I think I’ve done it somewhat successfully, I’ve gotten good feedback, but that’s a hard thing to do, and he does it very well. So, I appreciate the work he’s doing, and I’m happy to support it.

Break: This episode is brought to you by Pantheon. Starting a new project? Looking for a better hosting platform? Pantheon is an integrated set of tools to build, launch and run websites. Get high performance hosting for your WordPress sites, plus a comprehensive toolkit to supercharge your team and help you launch faster. On Pantheon, you get expert support from real developers, best in class security and the most innovative technology to host and manage your websites. You can sign up a new site in minutes with a free account, and you only pay when it goes live. That is my second favorite feature to Pantheon, only to the easy ability to create dev staging and live servers, and push to GitHub. It’s very easy to set those things up on Pantheon. You can head over to Pantheon.io today to set up a free account and pay only when it goes live. Thanks so much to Pantheon for their support of this episode and this season of How I Built It.

Joe: So, that’s cool. Are there any other notes on how you built Project Huddle before we move on to the next set of questions? Because I know we touched on a couple of things, but I feel like we could go pretty deep if you want to.

Andre: Yeah, I guess there’s something there if people are interested in this, but I never get to talk about it, so I’m super excited.

Joe: Awesome.

Andre: With website commenting there is a huge challenge. If you’re commenting on an image, you can, “This is the x y coordinate with the image.” But if you’re on a website and it works responsively, sometimes things move around. They disappear. That was a huge challenge to figure out how to stick a pin on a website and have it stick. Even when content changes, because it’s a feedback tool. You put a pin-down, it’s likely that content is going to change. I used something called Levenshtein distance, which is like– It does a percentage match between two strings. How it works is it stores the HTML that was clicked when the comment was left, and then when it needs to find that again, it checks the original CSS selector and figures out if it’s a good match. It’s not continuous up the [inaudible] tree until a good match is found, so what’s nice about how that works is if you move sections around on a page, or content changes or you look at it in a different device. The pin will 99% of the time stay where it’s supposed to stay. That was super hard to figure out. That took probably six to eight months to figure that part of the equation, and the rest was pretty easy. It still has some bugs here and there that are working on fixing it.

Joe: Yeah, I mean that’s what they say. “The last 20% of the project takes 80% of the time to do.”

Andre: Totally true. Yeah.

Joe: I loved that. I’m glad I didn’t just lead you to that question, and you brought it up because I was curious about that. Because doing that is hard, and what you just described is a very academic computer science-y questions. We talked about that, and I have a masters in software engineering, so “How do you math nodes and things like that? And find points and process images?” It’s not something that you get to talk about in the WordPress space very often.

Andre: Not at all, no.

Joe: That’s cool. The thing you said you used was Levenshtein distance?

Andre: Yeah. It’s very basic. Just give it two strings, “How close of a match are they?” It fuzzy matches them.

Joe: Nice. So, that’s a library and not an algorithm? It’s a library–?

Andre: It’s an algorithm.

Joe: OK, cool.

Andre: Somebody made into it, again, more open source software. Somebody made it into a JavaScript function for everybody use.

Joe: Nice.

Andre: Didn’t have to do anything super tricky on my end, just had to figure out what pieces to put together. Like adult Legos in a way.

Joe: Yeah, without a doubt. I love that. I had a student working on mapping shapes with JavaScript canvas to musical notes, because he needed some assistive technology, and we were in a web design class. The things he was doing was super cool, and we got to a point where he’s like “I have a question about this.” I’m like, “I know. I have to research this. I don’t just know the answer to this one off the top of my head, but I’ll see if I can dig up that project too.” But it was very cool, and we were working completely in CodePen which is an incredible learning tool for the classroom. So awesome.

Andre: I think it’s a sign of a good teacher when the student stumps you, and you have to–

Joe: Thank you. That’s what I told myself. I’m like, “If they only know as much as I know, then I haven’t taught them how to learn, I just brain dumped on them.” So, yeah. Cool. Very cool. I love that, and I could talk about that all day but we are coming up on time, and I do want to talk to you about your plans for the future. Now I will say that I used to have a question like, “How has this evolved?” And we generally talk about that in the first half of the show, but we did not talk at all about pricing, and I’m always curious about that. So, maybe we could talk in your plans for the future, and how things evolved, how did you come up with the pricing? And what are your plans for the future?

Andre: The pricing– That’s going to be the hardest part of selling digital products. That was just a shot in the dark. Looking at other plugins that weren’t even in my space. Figuring out what people buy and then probably increasing a little bit, because I was probably a little low at the time. But the current plan is there’s a base version of Project Huddle, which is going to get a lot of the core features, and that’s it. $89 dollars. And then there’s going to be some add ons that are coming like right now there’s a file upload add on that lets you upload files right into the comments. It’s great if a client’s like, “Let’s swap out this image. Here it is.” And they can upload it right in the comment. So that’s the next pricing tier, which is currently at $109 but will go up when more add ons are added. And then there’s– So, those are all yearly fees. And of course, like with any WordPress plugin, if you decide you don’t want to pay or you can’t pay, or you don’t want to renew, the plugin will keep work. It’s not like you don’t have access to any of your data anymore, you renew when you want a feature update or support.

Joe: That’s probably the best part about things. It’s almost like every year screen flow, or Camtasia comes out with a new version that you have to pay for. But if I don’t want to pay for it–

Andre: Exactly. It’s like how software used to be. You’d buy it, and it would come in a box.

Joe: Yes.

Andre: With a bunch of CDs, or whatever. I don’t know how old people are. Maybe a floppy disk.

Joe: I remember CDs. I remember being baffled by Zip drives like I was familiar with floppies and CDs.

Andre: Yeah, I forgot about Zip.

Joe: I’m like, “Zip drive? How does that even work? It doesn’t fit into my floppy drive, and you need a whole separate thing.” The computers in the 90s were a crazy time. But that’s cool, and I like that because you’re absolutely right. Pricing digital products is so hard. There’s no manufacturing costs.

Andre: Nope.

Joe: It’s just my time. And how long does it take for me to get my time paid for? How many do I have to sell, and then when I sell that many, I’ve made that money back. I’ve been told simultaneously that my prices for my courses are too high and too low. It depends on who I want to cater to. Do I  want to cater to the person who’s only willing to pay $10 bucks for a course that’s going to make them thousands of dollars, or do I want to raise the prices and sell fewer? It’s a very interesting problem, and I like getting different perspectives on that.

Andre: I’m sure there’s people way more knowledgeable about this than maybe you and I, but when I first released it people were saying it was too expensive. And now they’re saying, “Wow, what a deal.” So it’s like, “Maybe it’s too cheap now, I don’t know.” As more features get added, there’s more value. I don’t know how it works.

Joe: Yeah. And it’s finding the right person, the right persona I guess. Because I was having this conversation with a few folks and basically catering to people specifically in the WordPress space is very hard. People in the WordPress space think that they should get a lot of things for free, and they don’t necessarily see the value of things. This is not a knock on everybody in the WordPress space, and I’m in the WordPress space. But it is harder. Maybe a better analogy would be Android versus iOS users. iOS users are willing to pay for apps way more often than Android users are, because of the open source mindset. It’s very tricky waters that we’re in.

Andre: That’s a good example. I was just about to mention that. I even think like WordPress is the new Android, Google Play store in a way. There’s so many themes, so many plugins, and it’s becoming such a commodity to a really weird different space than when I started.

Joe: Yeah, absolutely. I would agree with that. Sure, we both have now ten years of insight to work on, but it is easy to see the change. I’ll leave with one more anecdote before I ask you what trade secrets you have, but I was doing– I was writing an in-person course. A four-week in-person training that I was charging $200 bucks for. The people who came were people from the enterprise space who wanted to learn about WordPress because $200 dollars in the enterprise space is stupid cheap.

Andre: Yes.

Joe: Then there were people who were like “Why would I pay you $200 bucks when I can just go to YouTube?” I’m like, “These are not the people that I want to work with if they don’t see the value in being in the same room as me for four weeks for $50 bucks a week? That’s crazy.”

Andre: That’s cheaper than a gym membership in some places.

Joe: Yeah, absolutely. And I’m teaching you how to use a thing that will absolutely make you money. I guess you’re a bodybuilder or a model a gym membership, but–

Andre: You can make more money on WordPress than being a bodybuilder.

Joe: Yeah, right. I don’t want to be winded when I walk up the stairs. All right, thank you for letting me rant about that. I do want to ask you my favorite question, which is, do you have any trade secrets for us?

Andre: I don’t know how people usually answer this question, but it’s maybe not a trade secret. It’s like a motto I live for, that done is better than perfect. When I used to– When I first started, it was always, “It’s not ready. It’s not perfect. This could be better. Everything works great, but I’d love if it could do this.” But you have to get it done. Release it and then iterate. So, Done is better than perfect is my trade secret.

Joe: “Done is better than perfect.” Remember those words, everybody. Those are very important words. I think this, everything you’ve said up until this point, harkens back to that. You said, “You have a bias towards action, an MVP is better than just writing it down.” If you spend so much time making sure it’s perfect and release it and nobody buys it, that’s a big blow. But if you get it out, and it’s not perfect, you get feedback and if people don’t buy it– If I do a course in a day and nobody buys it, that’s one day. If I spend a year developing a course and nobody buys it, I’m like “I just lost all of 2018. That’s it.”

Andre: Yeah, that’s huge.

Joe: So, done is better than perfect. I love that. Andre, thanks so much for your time. Where can people find you?

Andre: Find me on Twitter @ProjectHuddle is a good one or my personal one which is at @AJGagnon. It’s my name.

Joe: Nice. I will be sure to link both of those in the show notes, and then, of course, you can find Project Huddle at ProjectHuddle.io?

Andre: Yeah. Perfect.

Joe: All right, cool. I will link all of that and more in the show notes. Andre, thanks so much for your time. I appreciate it.

Andre: Thanks for having me, it was a pleasure.

Outro: Thanks so much to Andre for joining me today. I hope that you enjoyed the interview as much as I did. His trade secret, as I alluded to in the intro for this episode, was done is better than perfect. Something that I need to remember from time to time as I build software or a website or a new project. Get that first iteration out there and start getting feedback. So, thanks again so much to Andre. My question of the week for you is, “What is a project that you just need to launch?” Let me know by emailing me Joe@HowIBuilt.it or on Twitter @jcasabona. For all of the show notes for this episode, you can head over to HowIBuilt.it/116. Thanks again to this week’s sponsors, Plesk, Castos and Pantheon. This show would not happen without their support, and support from you the listener. If you liked this episode head over to Apple podcast and leave a rating and review. It helps people discover us. Until next time, get out there and build something.