Pantheon & the Global CDN
Pantheon is a website management platform for Drupal and WordPress that provides developers, schools, and agencies with container based hosting and powerful developer tools. In order to be a best in class web platform, Pantheon upgraded its infrastructure to provide sites with a global CDN and free HTTPS.
The challenge
Pantheon's upgrades improve site speed and provide one of the highest levels of security for its users. It seemed straightforward enough to create a new design to take advantage of the upgrades, so we established an initial goal for the global CDN feature work: Create a product experience to secure or retrofit domains so that developers can upgrade their sites to the new infrastructure.
My role
Originally the project was spec'ed to be simple interface design work, however once I started designing I realized there were a lot of problems that needed more fully realized design solutions. I embedded myself in the engineering team to help refine the product goal, conduct research, define requirements, and design the interactions and interfaces.
Research and discovery
I used various research methods to learn about Pantheon's HTTPS and domain tools: I created surveys, audited competitors, interviewed customer support engineers, and reviewed tickets. The research surfaced that the product had a number of usability issues when setting up domains and HTTPS on Pantheon. In order to successfully get users to upgrade to the global CDN, we needed to reduce some of the friction setting up domains and securing them on the platform.
Usability issues with the original Domains tool and HTTPS tool include:
- SSL certificates entries were rejected unless they were perfectly formatted (and there were no entry validation or guidelines supplied)
- not pointing their domain records to the new load balancer after an SSL certificate is entered
- accidentally creating domain redirects loops
Original Domains tool
Original HTTPS tool
Re-evaluating goals
I worked with the product manager and engineers to determine how we would measure our design's performance and fulfill our product goals. We revised our product goal to the following:
Improve how domains are launched and managed on Pantheon- improve the usability for users setting up and securing domains
- lower the number of support related tickets around setting up DNS records
After the goals were refined, I created wireframes to start prototyping the product experience for user testing. I integrated feedback from the usability sessions to refine the product screens to adopt the Pantheon product styles and interactions.
Designing a better domains list
The original site domains list reflected of what domains were added and routed traffic to a Pantheon site. Since we identified that users don't always know when a domain is working (or not), we redesigned the domains list to display a summary state of their domain(s).
Early wireframe of the domains list
Iteration on the domains list
The summary states help surface information for developers so they can tell at a glance if a domain is: in need of HTTPS upgrades, provisioning certificates, required additional setup, or launched. The designs were usability tested and iterated further, incorporating a summary status to help the user understand what actions need to be taken on a particular domain.
Final domains list design
Domain states and details
The original domain tool displayed every domain's DNS records in the domain list, which lead to several tickets where users didn't know how to setup domains or setup redirect loops. New features were designed to help a user identify what name server a domain name pointed to and what records they pointed to. Since the new infrastructure used a shared SSL certificate we could link and provision HTTPs with a properly configured site.
Early wireframes of domain details
Iteration on domain details design
In order to further push the design towards a usable/understandable design I held critiques with various teams who dealt with training, documentation, and customers to help evaluate the design. I continued to usability test and iterated on consolidating the information into a table to create better hierarchy of information and display what was happening with each property on a domain, and what they needed to do make it right.
Final domain details design
Designing for multiple states
I worked with engineering to create a flexible interface to display domain properties: Pantheon DNS records, current nameserver address, nameserver DNS records, HTTPs status, and platform health. We defined all the permutation states the properties could be in, then created a summary status that would inform a user how to get their properties functioning and their domain running.
HTTPS provisioning
Error state
Unregistered domains
Upgrading existing sites
Conclusion
The project was originally thought to be a behind the scene infrastructure change with minimal design asks. However there was real opportunity and product value in redesigning every customer's experience setting up their websites and securing them. It's a major win and I'm proud of how the team adopted a more rigorous user centered design process to transform an arduous and blackbox sort of process into something powerful and simple for our developers.