Made by
Made by
Developers need your site to be useful and informative; they don’t want to negotiate endless click-throughs or deal with bad marketing. Claire Giordano shares some tips from Citus Data’s redesign in this lightning talk from DevXCon San Francisco 2018.
So I’m here today to give you a five-minute lightning talk. I wanna try to keep within my time limit, so I’m gonna jump right in. I’m gonna tell you a before versus after story about redesigning my website at my company to make it useful and informative to developers.
So first, really quickly, a little bit about me. And…oh, can you hear me in the back? Am I speaking properly? Good. Cool. I started off my life as a developer working on source code management tools, you know, where you could create a work space, make edits to your source files in private and then resolve conflicts and merger changes back in to, you know, collaborate with your teammates. I’m glad to say those kinds of platforms still matter today to the world of developers. And then I’ve done a whole bunch of other things in my career including being an engineering manager for many years. But now I’m on the marketing side of things. And so I get to apply all my experiences as an engineer and as an engineering manager to what I do today.
The story I’m gonna tell you is about the before versus after. Not on our whole website because I only have five minutes, but on our homepage. The key thing to notice in this picture is that it used to be a lot shorter and now it’s a lot longer. It used to answer many fewer questions. Now it tries to answer a lot more questions that people might have when they come to our website.
I’m gonna walk you through a little bit of the process that went into that, and the assumptions that we made, and the decisions that we made in redesigning it. The first set of assumptions were about developers and what developers cared about and what their mindsets were. The first assumption was that they’re busy and they wanna find what they’re looking for as fast as they can. And so what that meant is I had to make sure that the pages were scannable and browseable and that you could find what you wanted without having to go through a series of clicks to find some hidden content. We also assumed that our visitors were sceptical. And so that meant we had to provide examples and proof points and give credibility and evidence for the information we were sharing. And then, I think, Erin…I wasn’t here yesterday, unfortunately, but I think she talked about how developers have low tolerance for pretty much anything and everything. Did I get that right? That’s what came through on Twitter. Our assumption was that they have low tolerance for bad marketing. Some of my colleagues say they have low tolerance for any marketing. But my job title says marketing in it so I’m going with bad marketing. And so that meant that our copy had to be in plain English and really written clearly and easy to understand with no unnecessary fluff or adjectives. So that’s what we did.
And then we had to think about the jobs to be done. What were the things that our website visitors were trying to do when they came to our website? So we figured out what all those things were, and we went ahead and put ’em into three buckets: things they might do when they’re first discovering us, things they might do when they’re kicking the tyres, downloading open source, or things that they might do when they’re ready to take action. Once we had all those things figured out we had to dissect the page that we had, understand its analytics, understand what its components were and what it was doing well, and then figure out what was missing.
These are all the things that were missing. I don’t have time to talk to you about all of ’em because I just got a one-minute flag. I’ll tell you, like, one of them, for example, Citus has a pretty unique relationship to Postgres, and we weren’t telling that story on the homepage. Citus is Postgres. It’s not some new-fangled database. And so we had to find a way to add that section in, for example, along with all these other sections and along with the Elicorn. And then we had to improve our UI. And our number one goal there in working with the designers is to make sure that we have responsive design so that the page would work well, regardless of whether you were on your phone, on the train on the way home, or on a tablet at home while you’re taking care of your kids, or on your desktop at the office. And we wanted to have more content on the page, so content wasn’t hidden behind clicks, hidden on subpages.
We love coffee. So I had to put this picture up there. Our main goal was to use design, use layout, use information architecture in order to make it a more delightful experience for our developers with the guiding principles of making it useful and informative. So everything on there had to be helpful in that way. So we came up with our requirements. I had to write up requirements for each and every blade that we were adding on the page so my designer knew what he was designing for. He created multiple iterations of wireframes. We finally picked one and then three different iterations of design mockups. And interestingly enough, not unlike engineering, we ended up picking one that we thought would do the job, that would get us to the finish line more quickly.
The one in the middle was really playful and everybody liked it. But we realized that all those little drawings were gonna take a lot of iteration to get right to make sure it didn’t offend anybody, to make sure they didn’t accidently mimic somebody else’s drawings. We went with the approach on the right and now we’ve got a living, evolving website. We launched it last fall, and we continue to update it based on feedback we get from developers.
My number one message to all of you is if you ever need to embark on redesigning a website to make it really valuable to developers, have empathy. That was our guiding true north the whole way through. And that’s what caused us to focus on being useful, being informative, having a conversational voice throughout, and making sure that everything on the page has some valuable purpose.
I hope this is useful. I have some socks for those of you who like socks. Thank you very much for your time today. Ciao.