Pantheon

Pantheon is the website platform developers, marketers, and IT staff use to build, launch, and run Drupal & WordPress websites. In pure buzz words, Pantheon is a multi-tenant, container-based elastic hosting platform with developer tools so website teams to build, manage, and launch all of their websites from a single dashboard. Kind of like the Github of Heroku for WordPress and Drupal.

As the first product designer at Pantheon, I was responsible for: designing the dashboard's visual and product experience, conducting user research and usability tests, creating (the occasional) marketing and branding collateral, elevating design to contribute to product strategy, and refactoring the front end code for the product dashboard to create a front-end design system/code and interface pattern library.

Improving the First Time User Experience

Pantheon is a complex product with a particular and opinionated developer workflow for managing your website code. I created a first time user experience to teach new users the value in our platform when they use the Development, Staging, and Live environments to create and launch their sites.

The onboarding flow used a series of tool tips and diagrams about how a user deploys code between environments and can clone database files between environments to test out code with new content.

•••
•••
•••
•••

Creating the Pantheon Front-End Design System

As the product designer at Pantheon I worked with the engineering team to refactor our dashboard code, standardize our implementation, and create visual design patterns to create a more scalable system.

Our codebase was a mish mash of a legacy DIY front end code, over the course of several months I worked in multiple sprints to refactor and convert the codebase and standardize it on a framework. The first 2 week sprint I was able to reduce the CSS ruleset size by almost 50%, eliminating over 600 declarations and removing around 400 lines of code. The work converted the front end implementation to a more modern and standard approach would unify the designs with what would be implemented in code.

•••

Successful Site Migrations

One of Pantheon's challenges is creating a tool for developers that can work harmoniously with their unique codebase(s). Importing websites proved to be a challenge when imports would fail due to codebase irregularities and manual imports were tedious and not guarantee success.

I worked with product and engineering to create a directed flow that would utilize either a WordPress plugin or Drupal command line remove the gruntwork. The plugin required authentication tokens to be generated in order to access the site, which required was a fair amount of context switching. In order to solve the confusion, I created a flow that would spell out the steps for users to give them an overview of the whole process but also provide distinct directions for each step of the process.

•••
•••
•••

Fun with brand design

In addition to my product roles I also worked on visual and branding projects for Pantheon. I created a t-shirt design for DrupalCon based off of "razzle dazzle" camouflauge used on World War I War ships.

I created some game splash screens for our "Destroy the Dashboard" game, an April Fools Easter Egg we made for the product. Since the game was reminiscent of asteroids I wanted to emulate old arcade games and 80's retrofuturistic style.