Menu
AppDynamics provides solutions for monitoring and managing the performance of application software. Clients include large organizations and businesses such as airlines, banks, and retailers.
I joined the Marketing team in January 2015—a time when the company needed a much stronger online experience to keep pace with its exponential growth, evolving products, and ambitious sales targets. As the first and only designer on the web team, I developed new workflows to establish design as a collaborative discipline at AppDynamics. I also implemented strategies to address the challenges unique to B2B marketing of a technical product, such as making content accessible to a wide audience and framing a complex product in visually appealing ways.
Over the course of my two years at AppDynamics, I led user experience strategy and design across the web ecosystem, including the main corporate website, 4 international sites, landing pages, event microsites and the blog.
Our combined efforts as a web team supported AppDynamics on its path to filing for IPO and to a surprise acquisition by Cisco for $3.7 billion in January 2017.
"We're the most successful company that no one's heard of."
— a common phrase from stakeholder interviews early in the redesign process
For AppDynamics, the website is a key platform for communicating how its product suite can help enterprise clients achieve their business goals.
When I was brought on board, the company did not have any resources dedicated to the web or to the brand. Over time, a piecemeal approach to implementing templates (created by an external agency) led to a subpar user experience. Top pain points of the website were inconsistent messaging, large blocks of text filled with jargon, and a monotony of intricate product shots that were difficult to parse. After the agency contract had expired, it was unclear how to scale the website design for new content and user flows.
These issues led AppDynamics to form an in-house web team to work more closely with the business, build brand credibility, and create a scalable web experience.
How the AppDynamics website looked in early 2015
Through ongoing conversations with stakeholders across Marketing and other departments, the web team consistently prioritized 3 objectives:
I worked with a tight knit group consisting of three developers, a producer, and a marketing technologist. As the company prepared to go public, demand for web projects invariably grew faster than the capacity of our team. This challenged me to take on many roles and gain experience in all aspects of the design process. Because we were the first in-house web team at AppDynamics, I had the opportunity to establish new workflows for how design should intersect with content strategy, development and production. I feel fortunate to have shared this experience with an amazing team of people who were truly invested in creating the best web experience.
Over 2 years, I worked on 2 major redesigns and several rounds of iterations in between:
First redesign (early 2015) - began with a 6-week refresh of the website's core pages to ship in time for the annual company kickoff event. We rolled out changes to the rest of the website (impacting 5000 pages across 5 websites) over the next 7 months.
Key pages from the first redesign
Second redesign (late 2016) - a more focused update to unveil a new product story and brand during AppDynamics' 2016 user conference, coinciding with the anticipated IPO filing.
As a web team for a late stage B2B startup, we faced a number of obstacles:
Inaccurate and untrustworthy data
Tech debt
Luckily, our team understood the importance of collaboration and we regularly had conversations on how to best use our time. It grew into a series of experiments with JIRA dashboards, urgent-important matrices, and all kinds of to-do apps.
But the most useful “tools” were learning how to read between the lines when a last minute request came flying in (if I only had a nickel for every time…) and to keep asking questions (why is this project important for the company, will this enhance the user experience, who should handle this task?)
Understanding the product space and integrating with larger digital marketing strategies were ongoing challenges that involved research and many conversations with executives, product managers, customer support reps, and users.
The first major redesign began with a comprehensive review of the existing AppDynamics web experience against user needs and business objectives. From this audit, we identified three main issues:
AppDynamics has a broad client base across several industries but primarily targets 3 main audience groups: DevOps/IT engineers, CIOs and CTOs, and product managers/marketers.
For messaging and UX considerations, we bucketed these personas into 2 groups: practitioners and non-practitioners. A more granular approach (persona and vertical-based content strategies) developed over time as Marketing implemented the technologies and content workflows necessary for a dynamic site experience.
We chose to focus energy and time on work that has the highest impact on driving pipeline, growing the brand, and increasing user satisfaction.
Spurred by the constant shifts in team structure, marketing philosophies, and management styles, we gravitated toward a core set of principles to stabilize a shared vision and decision making process:
The highest priority for the website was to generate leads through conversions on free trials and other offers (see the case study). Many rounds of whiteboarding and testing helped us determine key variables in the user flow, including: the optimal number and order of steps in the sign-up process, the ideal amount of information to collect from users, and the most effective visual design for conversions.
I also made clickable charts that provided both a high-level and step-by-step view of different user flows. This allowed me to get meaningful feedback on how proposed designs fit into other digital campaigns and how they would be implemented by developers.
Sign-up flow for free trials
With constant changes in the product messaging impacting over 5000 pages, we needed to develop scalable and repeatable processes for company-wide collaboration in design, content creation, development, production and testing.
Working with our Product Marketing team to better understand the content needs, I created a flexible, modular system that resulted in faster turnaround times for new content and a better user experience. With standardized templates and components, users don’t have to constantly reorient to new concepts. It's also easier to scan dense, technical information when content is structured in a consistent manner with natural breaks (via headings, spacing or bullet points).
Taking inspiration from Daniel Mall's article, "Content & Display Patterns", I devised a system for mapping content to visual styling for each web property. This enables a multitude of content patterns to be rendered by a finite selection of display patterns.
The system is particularly useful in cases where the same types of content may appear on each page but vary in terms of the amount of information to be displayed. For instance, a customer story may sometimes include a logo, an image, or relevant statistics. Implementing one block (instead of multiple) that can be customized for these options saves development and production time.
Core components for the main website
In an industry where content tends to be lengthy and full of technical details, we knew we had to leverage visual techniques to make concepts accessible and to humanize our brand.
Through several rounds of experimentation—with assistance from creative directors and junior designers—this intention manifested in the following ways:
Photography
We opted for true to life images that relate to the everyday experiences of our audience (DevOps practitioners, IT executives and product managers). Natural poses and cool toned lighting were preferred. Composition (depth, angle, crop) varied to complement related copy and CTAs. Subtle color gradients provided visual unity and also improved the legibility of text placed on top of an image.
Colors
Prior to the first redesign effort, several executives commented on feeling a disconnect between the existing neon color palette and the brand personality that AppDynamics should embody as a mature industry leader. To address this issue, I decided to try a strategy of minimalism and restraint, shifting the color palette to a more restricted one. This enabled us to establish the rules for a few components before expanding to others.
With blue and green serving as primary colors, we continuously experimented with different secondary palettes but typically made use of black, white, and grays. Over time, the attempt to get away from the neon palette led us too far in another direction. New managers began to describe the website as too dark, even "Darth Vader-like". During the second major redesign, I tried to recalibrate by testing a lighter look with a limited selection of gradients and color bursts.
Color palette evolution. Left to right: old design, first redesign, second redesign
Product shots and other imagery
The main product screen—the "aha" moment for most users—is a flow chart of their business' application environment. It's a complex diagram whose meaning is not immediately obvious to new users. And while a number of visually appealing dashboards do exist and continue to be developed, several of the most important product screens are filled with rows of numbers, code snippets and technical jargon.
We needed a way to showcase the product without overwhelming users. I tried out a range of techniques to distill complexity and to highlight important features:
Depicting the product in context
Zooming in on UI elements
Illustrating complex technical concepts
Humanize the technical. Make the abstract accessible.
After an inordinate amount of time manually creating specifications for different breakpoints during the first redesign project, I decided to evaluate different tools to speed up the handoff process. I eventually came across Webflow, which allowed me to build fully responsive prototypes and export production-ready code.
With aggressive scope and tight deadlines, I thought it would be valuable to have a way to quickly test new layouts and copy in high fidelity without requiring development time. Using Webflow, I created a pre-staging environment with a repository of all designs and a style guide.
The pre-staging environment made it easy to share designs with stakeholders and developers. It also enhanced collaboration with content authors by allowing them to directly edit copy in the context of the actual design.
Overall, this system resulted in a faster prototyping process, greater consistency in design deliverables, reduced front-end development time, and increased quality of published pages/assets.
Key pages from the second redesign
AppDynamics has seen tremendous results from the redesigns. Not only does the new website reflect a mature brand, it has also proven effective in generating leads. The foundation for this platform is a scalable and flexible design system that will continue to evolve as the company grows.
Increase in free trial conversions
Increase in no. of pages per session
Decrease in front-end development time
As the sole designer for the web experience, I learned many things, including how to:
© 2017 Uyen Phan
