Design-lead transformation

At Fastly, I had the fortunate position of reporting directly to company leaders, including the founder, the CEO, and Chief Product Officer. I advocated for several transformational initiatives based on research, gaining buy-in for a company-wide push to launch design-lead improvements. Design influenced initiatives included dark mode, universal search, improved onboarding, and a new scalable left hand navigation. 

Executing on a vision

The team

I hired a team of designers to execute on the vision for a new scalable customer interface that would allow Fastly to grow its product portfolio. When I joined Fastly there was only one designer. I started out as a hands-on designer while hiring and growing the team to a design staff of six. At Fastly, I currently manage an organization of 11 UX professionals, technical writers, and learning specialists. As part of my charter I established career frameworks for all disciplines and advocated and promoted staff within my team regularly.

The process

Discovery

As Fastly grew from a CDN-only business to an edge computing and security platform, we needed a more scalable and flexible customer experience. I kicked off a round of discovery, by interviewing stakeholders, customers, and conducting competitive analysis. We established a set of core personas defining Fastly’s highly technical user base. I worked with product managers to define customer journeys for each of product line from discovery, purchase, and renewal phases.

Ideation

We held card sorting workshops to help identify the best core categories for our navigation structure. We also held a few design thinking workshops to create an align on the best solutions. We brainstormed ideal future states for the integration of the customer interface with our documentation.

Designing the new experience

I worked with our product designers to define several approaches to Fastly’s scalable platform challenge. We were concurrently designing for a new authorization system, a new navigation, new data visualization experiences, and a new search platform. We built and vetted several prototypes with customers before landing on a collapsible left-hand minimal navigation bar with a fly out drawer. We ran the new design through user testing via a functional prototype, and then ran a three month internal preview of the navigation with employees before launching a public beta. Along the way we captured feedback and iterated on the design. I also conducted quarterly satisfaction surveys to measure customer reaction to the changes.

Getting feedback with the voice of the customer

Using customer satisfaction surveys executed via Pendo in the context of the user interface, I measured user happiness over a three year time-frame. The open-ended question in this survey revealed a trend of performance problems within the user interface and API. We worked with Engineering on a series of page rendering improvements, including skeleton loaders and progress indicators to improve the perception of responsiveness. Simultaneously, back-end engineers worked to improve overall API performance. As of 2024 our satisfaction rating increased 10% and complaints about performance were virtually eliminated. I worked with Customer Support and Product Management to track all feedback from these surveys in our Voice of the Customer tracker. This survey was used to gauge the effectiveness of our large scale navigation improvements.

We tested our new designs directly with customers and UserTesting.com for prospective users. We launched the new navigation as an opt-in beta with feedback forms built into the experience. After two months of feedback we felt comfortable launching the new designs to all customers. I continue to measure customer satisfaction quarterly to verify our rating did not weaken. As of Q3 2024 our satisfaction was up 7% since the launch.

Building a scalable design system

We worked on a scalable React-based design system with engineering and rebuilt the customer experience, upgrading from the previous Ember framework.  Using design tokens that connected to Figma via an API the design team was able to keep the customer interface in lock step with our evolving brand guidelines.

Accessibility

When I joined Fastly the customer interface and documentation site were full of accessibility issues. Large fields of red were used along side white text with poor color contrast ratios. HTML was lacking semantic mark up to assist screenreader technology. Keyboard navigation support was spotty. Using the IBM audit framework I audited our interface and documentation, and worked with designers and engineering to improve the overall accessibility. Today, Fastly’s interfaces and documentation are nearly free of accessibility errors, and support pausing of animations, text alternatives to data visualization, and are responsive to multiple screen sizes.

What I learned

The full process to launch the redesign of the Fastly customer experience took three years, from inception, research and discovery, gaining executive buy in, prototyping designs and delivering the solutions with engineering. Many aspects of the project took longer to execute on than expected. I would have tried to buffer expectation on how quickly these projects could be delivered, in retrospect. Our ambition to deliver quickly didn’t always account for the complexity of changing so many moving pieces at once. I am impressed by the team’s fortitude and willingness to stick through the work in the face of these obstacles and see our vision realized. Read more in our blog post.

Fastly now in light mode