The following is my recollection from my first major website overhaul(s) for the cybersecurity startup, UpGuard. As one of my first major projects, I had a lot to learn and, through this projects and my many projects since, I think I’ve learned well.
I understand better now the importance of planning, of stakeholder buy-in, of designing to be “cool” as well as “functional,” and, while I’m proud of the work I did, I think that I’ve generally made leaps and bounds as designer since then — developed my skills and competencies as well as my aesthetic.
I did my best to detail everything from the process here… for which I apologize… so please enjoy skimming through! I hope you take the time to glance at my process photos, uncross your eyes after my GIFs, and play the first 5 seconds of my interaction videos.
In the beginning, there was… something…
When I first joined the UpGuard team even I, so naive with such a limited understanding of what “design” meant back then, knew it needed work. Lucky for me and for UpGuard, with the addition of a new lead designer came a new brand and the website was among the first in her cross-hairs. And thus begun my web design trials by fire.
‍
Redesign 1.0
Now that’s a pile of gloves!
The first step was to show stakeholders “the pile of gloves.” The old site had grown bloated, as “redesigns” were mostly cosmetic and pages were added left and right at the behest of sales, support, marketing, the pizza guy, the CEOs, etc. So I mapped each page out, categorizing and connecting them all. It was important to capture the general look of each page to clearly identify brand discrepancies.
‍
‍
Seeing it all printed and mapped out was a convincing message to stakeholders that screamed “CHANGE ME!”
Less is more
We reduced the total number of pages significantly for our first redesign, keeping it as simple as possible. The goal was to put it all out on the table, giving quick access to whatever info for which visitors might be looking.
Sample of redesign 1.0
I learned a lot over the course of that first redesign about analytics, stakeholders, and business needs. In the realm of design, we aspired to give stakeholders the “pop” they requested with animation instead of slinging color around, trying to keep our brand neutral and use color more purposefully. I volunteered as tribute for the animation work, so amidst my large web design trial by fire, a mini trial by fire in the form of animation. I discovered that I loved it, and made a number of different abstract animations to represent complex ideas conveyed in our site.
‍
‍
Swing and a miss
The finished project was not ideal. Over the course of the month we took to plan, design and develop it, we let complexity creep back in, leaving what we believe was too much information directly available from the homepage. This confronted visitors with a paradox of choice. The numbers reflected it, as the click data was underwhelming.
Luckily, a new business strategy necessitated a new site structure, and our design team, now 3 strong thanks to the addition of a talented new intern, took the opportunity to go in a bold new direction.
Redesign 2.0
Game plan
The new business strategy was going to be a two product website. This meant we would need three different web experiences — one for corporate pages about the company, one for our Configuration & Compliance product offering, and a third for our self-service Cyber Risk product.
Determined to do it right this time, we put our heads together and established a roadmap for the project, defining the requirements, goals, plan, purpose, and KPIs for the new site.
The big picture
A designer’s purpose is to understand, sympathize with, and defend the user. The first step in the new project was then to define who the target users are and what motivates them. What do they do? What are their challenges and their fears? Where are the places that people typically exit the site?
‍
‍
Based on the Key Drivers we identified, our goal was to tell them exactly how UpGuard’s Config Management component helped to keep their system stable and stabilize it when things went wrong, how compliance and cyber risk helped them to prove their stability to higher-ups. More stability means less down time, less fire-fighting, decreased likelihood of exposure/breach and, ultimately, less chance of them losing their jobs (don’t you hate when that happens?).
Sitemapping
Now, with the goals and problems defined, we needed to map out the necessary pages for the new site. Working with Demand Gen and Product Marketing, we used post-it notes to define what pages we needed to create and what we could recycle to save ourselves the work.
‍
‍
The funnel
With the necessary pages laid out, we needed to figure out how each page fit into the marketing/sales funnel and that we designed them to encourage (not trick!) users to move on to the next step. We met with Product Marketing and Demand Gen to discuss the proper funnel structure.
‍
Gettin’ sketchy
Next, the team split the pages up to sketch wireframes.
‍
Some snapshots from my notebook during the rough sketching phase.
From sketch to Sketch
After running our designs by the team, we selected a few of the best wireframes to do up in Sketch. And, of course, finding the appropriate ways to motivate ourselves and celebrate the smaller victories along the way.
‍
‍
Lorem ipsum onay oremay!
Working closely with Product Marketing, we dispelled with the Lorem Ipsum (Khaled Ipsum and Hipster Ipsum in some cases). We split the mocks, passing our Sketch files back and forth and making additions. I can’t take credit for all of these beautiful graphics, I was merely a consultant to our talented intern Talie. I spent most of my time cleaning up mocks, clearing up inconsistencies, preparing a prototype for review and making interaction/motion graphics in Principle.
‍
We created simple and clear tracks to follow through the site with a bold new look that used color to distinguish the products and their respective pages. We presented the problem, the solution, and UpGuard’s role as clearly and succinctly as we could, providing more detail in a Use Case library so that visitors could understand on a more technical level what resources we had to offer.
Our About page mocks were more human than the current bare-facts page, prominently displaying pictures of the team intermingled with facts about the company.
Prototypist
Our team used InVision to iterate on and prototype our redesign, aided by the handy Craft plugin for Sketch, which allowed me to prototype largely right in our mocks and export them, walkthrough-ready, into InVision.
‍
‍
Screenshot of one of our mocks in Sketch with InVision’s Craft plugin prototyping tool active
Transitions
With UpGuard’s new two-product approach, we wanted to allow for users to quickly and intuitively switch between tracks. The “nav bar” along the side of each product page allowed them to easily navigate the site as if it were a single surface, taking visual queues from interactions and transitions to give them a sense of their “physical” location on the site.
The nav icons at the top left of each page were another way that was proposed to indicate where on the site a user was and allow them to switch. This interaction was nixed because we felt it was redundant and not as effective as the side bar.
Video displaying various interactions and transitions within site prototype
Cloud Scanner
Central to UpGuard’s Cyber Risk product is the Cloud Scanner. The Cloud Scanner has always existed as a separate website that users can visit to scan public websites and APIs, running a series of checks on the site and returning a score (like a credit rating) that is indicative of the site’s security.
We proposed having the Cloud Scanner operate within the marketing website, drawing it more tightly into the marketing funnel. The Cloud Scanner is just a piece of a much larger puzzle. Allowing visitors to use the Cloud Scanner within the product page allows them to get a taste of what the product is like and engage more deeply with the site.
‍
Check yourself
One concept for the Cyber Risk product included a self-service checkout. Carts are hard for us, but easy for our users. Allowing them to self checkout saves our time and theirs. Plus, who wants to talk on the phone to a sales person? I know I don’t. I can say that. Some of my best friends are sales people.
Props for the beautiful layout of this page goes to our VP of Design, Ann, who handed it off to me to work on the interaction.
‍
Ay lemme getcho numba
As an alternative to the self checkout, I developed a progressive and gentle lead form, which collects information two pieces at a time. Each set of fields is accompanied by microcopy explaining why we’re collecting the data and how we’re going to use it. I also implemented a progress bar so that users would not fear that they’d fallen down an endless data collection shaft. The progress bar also serves as a positive feedback mechanism. Who doesn’t like checking boxes?
‍
I really enjoyed doing these — focusing in on how to use motion to convey information a user will innately understand. Figure out what a user would expect to happen and how to set that expectation and fulfill it.
Goin’ mobile
I was also responsible for creating mobile mocks and prototypes for each page. Web traffic is increasingly coming through mobile devices. UpGuard’s traffic is about 80% desktop, but you can’t abandon 20% of users to a bad experience. My pride would never let me.
‍
Since we had to stack the two home cards, we had to dispense with some of our cool transitions.
Mobile can be tricky since users interact with it differently than on desktop. Sometimes it’s as simple as stacking the elements up, but there are complicating factors. Visibility above and below the fold changes, you can’t rely on hover states to demonstrate something is clickable, copy or design elements that laid out nicely on a desktop can look like crap on an iPhone, etc. So with this in mind, I prototyped the mobile version of our site, interactions included.
Less is more… and also less
We received approval for the prototype and were ready to pass it to our awesome Developer. I prepped all the assets for Developer Dan and he was off to the races. I made myself available to Dan, ready to answer any questions he had, fill in any gaps, and generally make his life easier any way I could.
However, one week into development, the Design Team was none-too-pleased to be told that the corporate strategy was shifting again. Half the site that we had created was no longer necessary and would be ripped out. Dan, on the other hand, was very pleased, since his workload was halved.
3… 2… 1…
With the Design Team scrambling to fill gaps and make changes on the fly in accordance with the new strategy, development slowed down. Unfortunately a good chunk of the designs were left out for launch and the site and company have undergone significant changes, you can see the influence of our initial design remains.
Results and Retrospective
After this project and continually as I do other projects, I see the value of a tight symbiosis between Design, Eng and Marketing. UpGuard’s design team was great for its ambition and insistence on involvement in every project. Where I think we may have been lacking was in openness. We were also too design-centric, insulated from Marketing and Eng, often putting design goals ahead of business goals, insistent that if we built it well, business would come. Ideally this is how it should work, but particularly for scrappy startups, it doesn’t always pan out that way. Being more flexible, malleable, and results-driven would’ve benefitted myself, the team, and UpGuard greatly. While there’s stuff I’d change, I’m still proud to look back at the work we did together.
‍
‍
‍