What are we looking at here?

Malwarebytes makes a suite of software to help secure the internet. I worked on the website, account management portal, and technician toolset. This is about the website.

 
 

What was the problem?

How could the Malwarebytes website encourage businesses to use the business product line, explain the product offerings clearly, look legit, and rapidly test new ideas?

 
 

What happened?

202% increase in lead volume for the business product
Won the american in-house design award
Increased PC downloads by 15K at launch
created component library
Zero other KPIs were negatively impacted by the redesign
Achieved consistency and heirarchy
Some stakeholders didn't enjoy the minimalist asthetic
After launch there was a dip in lead volume which we quickly fixed
 
 

Before

The homepage before the redesign.

After

The homepage after the redesign.

 

Objectives

  • Clearly describe product offerings

  • Modernize and simplify the user experience

  • Create consistency across entire site

  • Improve SEO

 

Establish a starting point

When I first started at Malwarebytes, I started working on the website rebuild. As a first step, I created a map of all the pages I could find.

 

 

I looked for patterns in the pages and established which areas of the site were controlled by which technologies. Understanding the technical limitations and stakeholders allowed me to figure out what was possible.

 
 

Stakeholder discovery

In order to build a sustainable and sturdy architecture, I looked at the patterns and behaviors that lead to the site we were trying to redesign. I learned that people often requested new pages because they didn't know of other options and just needed a quick solution. These important lessons lead to a later step: creating a design philosophy.  

I interviewed each person that the website affected in order to establish the requirements. With each new discovery, I was able to craft a simpler and simpler architecture. I also surveyed sales and support to see if there were low-hanging fruit the website could help with. For example, a support survey uncovered confusion users were experiencing when accidentally downloading the PC/Windows version on a Mac.

 

Once we had a final, approved structure, we moved forward.

 

Develop proto-personas

Since I was the only designer fully dedicated to the website. Many things that are ideal steps in the redesign process had to be cut short due to a tight timeline. One of these steps was persona creation. I used the research done previously to develop quick and un-validated proto-personas. 

 
 
 

Map out flows

With personas in hand, I mapped out flows for different personas.

 

Build a design philosophy

In order to prevent back tracking into patterns that created the site we were trying to improve, we agreed on some core principles:

  • We use atomic designeach page is made of modules which are made of components. Each module follows a similar pattern of certain components only differing if it serves clarity.

  • We remain consistent - instead of changing one button on one page, we would change all the buttons. If screenshots are displayed in a grid in one area, they will be displayed in a grid in another area unless the change increased clarity. 

  • We have one objective per module - each module has a single objective and that objective aligns with the page objective. That way, we avoid cramming multiple ideas into one small area. 

  • We have one objective per page - each page has a carefully chosen objective, this objective aligns with a larger marketing and corporate strategy. 

  • This website aligns to a larger strategy - in an effort to create consistency and unity, our website must align with larger messaging. Does what we say on the website compliment what sales says or hinders it? Does this website support the business model?

 
 

Wireframe

Using the architecture and requirements gathered during discovery, I created wireframes of all pages with "MVP" modules and components.  

 
 

Create lo-fi mocks & tested them

Using Notable, I drafted a quick click test to see if our elements made sense.

One of the obstacles we faced during this process was an extremely accelerated timeline. Usability testing and validation are essential to an ideal process but with an accelerated timeline and limited resources, I did as much as I could.

 
 

 Establish look n' feel

I created a mood board of different pieces of design that I liked and from that figured out what would resonate with our users and embody the Malwarebytes brand. 

 

From there I began to dabble into different looks. Exploring a bunch of different looks helped me gauge what fits with our culture, brand, and user base.

 

 

As I explored with the team, I tried to come up with what I wanted users to feel when they visit the site. I also wanted to match the style of the product so there wasn't a gap between what users saw before they entered the product and what user saw after. I researched competitors and brainstormed what we wanted to do and what we didn't want to do.  

Where we landed:

  • We aren't dark and scary

  • We aren't generic

  • We are friendly and playful

  • We are trustworthy

  • We are a utility

  • We are honest

 
 

Review, review, review, iterate, iterate, iterate

Each week, we reviewed the mocks with stakeholders to make sure I was satisfying the requirements and gathering feedback. 

 
 

Create a prototype

Using the free version of Invision, I created a very basic prototype. I sent that to stakeholders for review and critique. Until that point, we had reviewed static (often printed) mock-ups. After reviewing the prototype with stakeholders, I continued refinement based on their feedback. 

 
 

Create & spec components

Each module is made up of components. I created and spec'd how each component would be on mobile and desktop. 

 
 

Add content & refine

In order to save time, we sent in the components before the final design and content were complete. That way, our development team already had a large portion of the coding done by the time we submitted something "final" 

We used Invision's liveshare and comment features to merge content and design.

 
 

Draw icons

 

Launch

On time. We launched the new site. 

Here is what happened, the good and the bad.

1. Consumer PC downloads went up.

2. Consumer Mac downloads stayed about the same.

3. Lead volume dipped (no indication of how yield or quality of leads did). So we launched a new flow that had more emphasis on business.

This is a screenshot the development team sent me about the performance post-launch

This is a screenshot the development team sent me about the performance post-launch

The ability to quickly adapt when we saw numbers decline was intentional. I built a structure and foundation that can quickly and easily adapt to change. 

4. Purchases (consumer and small business combined) stayed the same


What's next?

This is the roadmap I created for the next phase of the website. I did a lot of the PM work for the website.

 

Conclusion

This website redesign was a success because:

  • Usually numbers plummet after a redesign, but for this one the only number that dipped was lead volume and we were able to bring that back up without impacting the other numbers

  • I established a clear hierarchy with type and imagery

  • I established consistency through visual language

  • I removed some complexity out of cyber security by creating a design philosophy conducive to simplicity

  • I built a system that can be optimized in a sustainable way

Aside from the performance, the most rewarding thing about the redesign was seeing how much the foundation, modularity, and architecture lead to easy changes and tweaks. I intentionally wanted a site that can support sustainable, rapid change and testing. I wanted to create a hierarchy and style that anyone can follow. One of the directors in the marketing department even remarked that changes we made post-launch in a few hours would have taken much much longer to create in the previous site.  

As we move forward with this new site, I hope to see our team creating content and imagery that works together. My hope is to generate an arsenal of modules that we can reorder and test to see which order makes the most sense for our users. We will make the site more usable, clear, and enjoyable than ever before.  

The main thing I learned during this journey is how to include a large group of outside stakeholders in the design process. I also did most of the project management at the same time I was doing design. I definitely learned how to juggle the two tasks.

What I would do differently

Despite weekly reviews of the mocks, I definitely felt that stakeholders were not given ample opportunity to voice their concerns. I would have made more time to explore the ideas that seemed out-of-reach or different than what I was thinking. I would have made more time to explain my design decisions clearly. These important lessons have taught me how to move forward in a more effective way, in a more open way.

 

More Case Studies

UpGuard CyberRisk.png

UpGuard CyberRisk

An honest case study about how I designed UpGuard CyberRisk.