Hi, I'm Tony.

Pingdom: Web Performance and Digital Experience Monitoring

Research and Discovery, User Interface and Interaction Design, Testing and Iteration.

Pingdom is a trusted provider of easy-to-use and powerful web performance and digital experience monitoring — giving actionable insights into web application's health and performance, helping businesses deliver great digial user experiences.

In other words, Pingdom is a tool that can help make sure that your website or application is available from all over the world, that all your critical pages are loading quickly, and that all your vital site interactions, like signup, login, and checkout flows are working correctly. When something breaks, it immediately lets you and your team know and gives you the information you need to get to the root of the problem and resolve the issue.

The Challenge

Every time a website or application is down or running slow, there is direct impact on the business, either in reduced productivity or lost customers, and, as a result, lost revenue. But it is not just about the availability. It is about the performance and resulting end user’s experience. Customers need to be able to monitor user interactions and critical business transactions and get actionable insights to be able to fix issues before the end user feels the impact.

Our task is to build a product that solves some of the most complex website performance and reliability issues, make it easy to use, and do it at an affordable price.

My Role

I am Senior UX Designer and Team Lead at Pingdom, working on research and discovery, user interface and interaction design, testing and iteration. My team is part of a larger, distributed international team, and I collaborate with product managers, researchers, designers and developers in Västerås, Kraków, Brno, Portland and Austin to build products for a global audience.

Design Toolkit

The Process

Although no two project are ever alike, they all include more or less the same steps. First, make an assessment of the current situation and identify a desired end state, come up with different strategies for reaching that end state, evaluate each strategy and select the one believed to get you there, see if it works, and if it does not, figure out the reasons why, and try again.

Sounds straightforward? It rarely is. The problems can be complex, difficult to understand and it can be hard to make sense of the tangled mess.

So what does this process actually look like?

Ideas

Everything starts with an idea. An idea that things can be different from how they are now. This idea can come from a need discovered while interacting with users, it can come from the realization that the market space is changing or that technology is evolving. The idea is clarified by asking questions like; Where are we now? Where do we want to be in the future? What is the goal and why is it important we reach that goal? I like to be part of the early conversations around strategy and vision because it helps me understand the business context and reasons for a particular project.

Business Goals, User Needs and Technical Constraints

This is usually the time where me and my team get involved. The first step in the design process is to understand the business goals, the user needs and the technical constraints. We talk to product managers, developers, support and sales to get different ideas, insights and perspectives. We work with researchers and meet with users, either in their working environment or via remote sessions. When we can not interact with users directly, we do desk research. We look at user analytics data to find patterns in behavior, review support cases to identify pain-points and we study competitors' approaches and look for solutions to similar problems.

Concepts and Prototypes

When we feel we have a good understanding of the goals, needs and constraints, we start exploring different solutions for the problems. We brainstorm, create paper sketches, wireframes and map out user flows. We try to get a sense of what is possible and strive to come up with different alternatives that we can evaluate and test.

Experiments and Learnings

We put designs and prototypes in front of users as quickly and often as possible. We do this early to get feedback and to find out if the solution solves their problems and meets their needs. We also do it throughout the projects to make sure that we are on the right track and to test the usability of our designs. Many of the tools we build and solutions we create are used by people within our own organisation. This is fantastic because it means that we can get face to face with users quickly. We also work with UX researchers to test our designs with external users and potential customers via remote sessions.

Implementation and Documentation

At this stage it is about finalizing the implementation-specific details. We document interaction patterns and specify behaviors. We make sure that we have considered all the "happy paths" but also that we have proper error handling for the "not-so-happy paths". We prepare graphical assets such as icons and illustrations. We work closely with product owners and developers throughout implementation and in quality assurance .

Evaluation and Iterations

We take an iterative approach to most projects. This means that, as we test our ideas, get feedback and learn about what works and what does not, we adjust and do it all over again. Sometimes this can even mean throwing everything away and starting over. This continues until we reach a solution that is desirable, usable, feasible and viable.

Designs

Below you will find a small sample of designs from various projects that I have been involved in during my time at Pingdom.

Onboarding

We knew people use Pingdom to feel safe that their websites or applications are working as intended and to be notified if something breaks so that they can fix it. We wanted to create a solution that help people get their monitoring set up as quickly and easily as possible and make them feel that they can trust the system. We also knew that some of our customers were not using all the different features that was included in their subscription — and were not getting the full value of what they had paid for — so it was important they understand the value proposition quickly.

We created a simple onboarding flow where people can learn about the benefits of the different features and can set up their first monitoring and alerting in just a few clicks. They receive immediate feedback that their site is being monitored and an email or text message is sent which confirms that their alerting working properly.

The onboarding only appears the first time people go through the flow but does not prevent them from continuing through the flow.

Monitoring Business Critical Assets

Monitoring a website or application can happen in two ways. Either via Synthetic Monitoring, i.e. scripted tests running on a schedule, simulating an action or path someone would take on a site, or via Real User Monitoring i.e. collection of data or recordings of visits from real people on a site.

We worked on a number of analytics dashboards and reporting tools that allow people to know exactly how their site or application is performing and what the experience is like for end-users.

Data on the Real User Monitoring dashboards can be filtered allowing people to get a better understanding of how visitors from different parts of the world, on different platforms, browsers and devices are experiencing a site at different times.

Pages (URLs) can be grouped and used as filters, making it easy to see how certain sections of a site or application is performing.

Shareable online reports allow people to share data with customers and stakeholders without compromising the security of their account.

Information on the analytics dashboards are loaded gradually, a little at the time. Loading large data sets can sometimes take several seconds, but we did not want people to have to sit impatiently waiting for pages to load while staring at a spinner. To give a sense of progress and to set the right expectations, the basic elements of a page are loaded first, then as the rest of the content is loaded, it is populated on the screen.

Single Sign-On

Pingdom is part of an ecosystem of four more or less integrated products. Initially these were four standalone applications with no real connection between them. People who wanted to use more than one of these products had to create multiple accounts and log in to each product individually. Together with four different product teams, we created a solution that allows people to sign up to a single account and log in once and instantly get access to all four products.

We made it easy to navigate between the different products via an "app-switcher" and to start a trial for products not yet used. People without access or permission to activate new products can send a request to the administrator.

Subscriptions and Upsell

Being a subscription-based business model, Pingdom offers a number of different plans, suited for small businesses to large enterprises. We created a solution that makes it easy for people to manage their subscription, explore new services and stay in control of the spending.

On top of the various plans, people can customize their subscription to match their budget or monitoring needs by changing the number of checks, users and pageviews they want to have included in their monthly or yearly plans.

There are a number of features that are only included in the higher plans. We wanted to be able to upsell these featuers without interrupting the regular workflows. When a feature is not included in the current plan, a lock is displayed on certain elements in the interface. These locks indicate that the feature is not currently available. People can interact with these locked elements to learn more about the feature and have the possibility to upgrade. Smart and well timed "toast" notifications are also used to make people aware of these features.

Would you like to know more?

If you would like to know more or just want to chat, email me at tony@neuromodule.com.