Working in PKI (Public Key Infrastructure) , a lot of big stuff goes down. When there is a newsworthy even, it’s usually something fairly global and deals with a major breach in digital security. The Flame Malware/Virus of Summer 2012 was one of those.
As UX Managers at Venafi, Bryan Lence ( www.blence.com @bryanlence) and I took it upon ourselves to capitalize on this breaking news. We were batting around ideas in an unrelated meeting, and Bryan says to me dramatically “What is Flame? Dot com!” As a joke, since I’d been adding “dot com” to a lot of our Venafi UX idea names. Suddenly, I go “We should register that domain…” 5 minutes later it was registered, and now we had to do something with it.
Want to skip ahead and see it right now, click here!
Whatisflame.com is born
We decided to develop one of those super long info graphic pages. The ones that sort of take you through a story trying to explain an arcane or convoluted topic. How the Flame Malware/Virus worked couldn’t be more arcane or convoluted. We’d need to define our persona, research the subject exhaustively, and then finally make it consumable to the persona.
Come to find out, even the people that are PKI and encryption professionals, steeped in the industry, have a hard time explaining it (or really understanding it).
How this project relates to User Experience
This landing page isn’t interactive. It’s not an app, it’s not software, it doesn’t even really have a UI. Or does it?
I would propose that it has one of the most complex UIs of all – the human mind. In the case of this project, the human reading it is literally the interface. We present the information on the screen, and it is up to their individual minds to access, compute, and assimilate the data.
On of my key principles and values in user experience comes from psychologist and scientist Herbert A. Simon
What information consumes is rather obvious: it consumes the attention of its recipients. Hence a wealth of information creates a poverty of attention…
Even though I am guilty in my blog posts of information gluttony, I knew I couldn’t afford to be with whatisflame.com.
The Persona Assumption
Like any good UX endeavor, we had to have a persona. Since this was half marketing, half education, we knew who we wanted to reach with this. We wanted to make this something that the average person working for a technology industry company could grasp. They would need to know a little bit about computers and at least what encryption is. We imagined maybe a C-level executive or Director at a company that is concerned with digital security. At the same time, we had to include a second persona, the PKI administrator or engineer, who would know enough to understand what we were talking about, but also enough to pick apart and see the errors or flaws in our graphic.
The subject matter is so arcane that we had to be sure it wouldn’t just lose people the instant they started seeing big words or concepts that had literally never thought of before. Like that old myth about Columbus’ ships on the horizon being unrecognizable to the native’s (of what we call the Caribbean and North America) because they had no concept of these big, ocean-faring craft. They could see something out there, big on the horizon, but there was no mental model to compare it to. A big animal? A large floating dead tree? Something supernatural?
Our assumption was that our readers wouldn’t have any mental model for a few key things:
- Signing or hashing algorithms, or hashes in general
- Why the hashing outputs are all unique no matter what inputs you use
- How a hashed signature could be forged of the above was true
Not even Bryan and I knew how this really worked when we started. We knew what had happened to make the Flame malware possible in an attack sense, but we really didn’t know how. And the “how” is what this infographic was about.
Research and Iterate
This part was easy – we had access to some of the world’s biggest brains right in our company. Over the course of a week or two, we tapped the vast knowledge that Venafi had about encryption, PKI, and Flame specifically. We’d build a prototype of the design, run it through the critique machine, and come out with a mountain of notes. Our initial designs don’t resemble the final product at all. From the design to the text, almost everything was changed. And I’d bet the same could be said for the 2nd or 3rd iteration as well.
Prototype, gather feedback, iterate, prototype again. We were moving quite fast, we wanted this out in a matter of days, a week at most. So I’d spend my nights designing and emailing and working with Bryan to refine this thing down to something that would be consumable to our audience. At one point, our key section featuring computer geniuses and pioneers Alan Turing and Alonzo Church actually used Thomas Jefferson and John Hancock instead, two men who has uses signatures in a major historical way. We even had Thomas Jefferson wearing a villainous fake goatee when he was forging Hancock’s famous signature. But it just wasn’t right. It was one of the Venafi executives who suggested we use computer scientists instead, keeping the reader focused on the subject matter and in the right mental space. A wise choice.
What we came to was the concept of a story. What story were we telling, and how were we going to lead the reader through the different sections introducing new, prerequisite topics and moving them to the next section. It had to flow just right and not have any slow spots or places where people would lose interest and decide this wasn’t worth their time.
We eventually came to a point where this thing was roughed out in 1st draft form, and it was time to test.
How we tested this
Ad hoc testing is a beautiful thing. We didn’t set up any AB tests or complex plans. Time was of the essence. So we took our prototype 1st draft and sought out representatives of our two personas; corporate execs/directors, and PKI mavens.
The results were astounding. We had missed so much in both the flow of the story, and the technical accuracy of our data. We knew that we couldn’t go into gory details, but it had to be accurate.
This resulted in a twofold problem. We had to fix the story flow and make the transitions from each section, and topic within sections, easy and seamless. This also meant correcting the technical information and figuring out how to make it understandable so it didn’t blow up our story. This was the hard part.
I wish I could say we had some sort of silver bullet for this. Nope. Just a bunch of lead bullets. Bryan and I would take our new information, and just sit and think and think about it, trying to include what was essential and nothing more. Like Dieter Ram says “Design is honest.” Our story had to educate on a high level and provide real information.
So we’d take iteration after iteration to our internal audience until we finally arrived at something people could say “Yeah, that’s basically it.” Remember, Venafi has some of the world’s most knowledgable people on the subject of how PKI works and the actual implication of Flame (although on a few matters, you could tell they knew we’d never be able to distill it down and just let us get away with a few stretches of artistic liberty).
The Final Smoke Test
Seeing as this wasn’t really our day job, we wanted to get it shipped. Once we had that “near shippable” draft done, we took it to the layman. Just random friends or family. Surprisingly, it fared a whole lot better than we thought it would. People understood it at a very, very high level. Forged signatures, bad people intercepting communications, and the havoc that forged documents that are near-perfect clones of the real thing can wreak.
In order to ship it, we just posted it all as big image files, there’s no real text in there. This was our biggest regret. I really should convert it to HTML and get that juicy SEO going…
HTML issues aside, we were satisfied. Get it shipped.
What we learned
I don’t think I’d ever done something quite like this. And I certainly didn’t understand just how long it would take to get right. I am famous for my “I need like one day” estimates. Turned out this took about two weeks of part time work. Probably 30 hours. Most of that was spent in getting the story right and the technical aspects accurate. The most salient points were probably:
- Story matters. If it don’t flow, it don’t go. We had a sales exec read it, and he stopped at a part and just went “This part is boring and really slows it down. It lost me.” We didn’t argue or try to explain it away, we just took his comments, noted them down, and tried to remedy it with a new iteration. Sometimes this only took a few minutes to type it up, hit save, and say “try again.” It was like angels singing when he read through the whole thing in about three minutes and said “Yeah, that flowed well, it didn’t lose my attention.”
- Delightfulness matters. Our initial concepts were just text. People read it and critiqued it, but without the delightful nature of an infographic that is meant to entertain and educate, it just wasn’t resonating. It wasn’t until we finally started getting some character and life built into this design did it begin to matter to people.
- Honesty matters. This is the one that took so much time to satisfy. The topic had to be conveyed to the audience and personas, simple enough to understand but accurate enough to be a legitimate educational piece. As much as we wanted to take shortcuts with flawed analogies and hand-waving explanations, it just wouldn’t cut it. This infographic is the only one of its kind and is based on a extremely serious, worldwide topic.
Overall, this was one of the most enjoyable design experiences I’ve had. I got to combine my penchant for graphic art with real UX. Personas, research, rapid prototyping, testing, iterating, and that satisfaction of shipping a project that had been given some real UX rigor!
We think it paid off, too. It’s gonna a fair number of visits, and even got a informal stamp of approval from a Gartner analyst.
I hope I was able to illustrate how this project was just as much a big UX endeavor as it was a design one. It never would have worked without the UX steps Bryan and I took to make sure it was right.
You should check out http://www.helloerik.com/whatisflame and tell me what you think!