Google Apps Hosting Package

Case study: UX research and UI design

A one-stop-shop for your web presence

In response to user demand for a better, cloud-driven email product, Media Temple in 2014 introduced the Google Apps for Work bundle. The idea was to create a one-stop-shop for setting up your web presence. Through a single purchase from the Media Temple control panel, a user could set up both a website and their company’s Google Apps service at one time, all with a unique domain name.

The product called for an on-boarding experience and control panel UI, through which the user would: 1. select a domain to use with their Gmail address and 2. create and manage Gmail accounts for their team-members. A major goal of the product was to transition customers that use Media Temple’s aging proprietary email service to the industry-leading Gmail, while improving their workflow. We built the on-boarding and control panel experience using the Google Apps reseller API.

Researching the product requirements

The UX process started with the user stories necessary to ship an MVP. This was a new product for Media Temple, and before we committed to an expansive list of features, we wanted to prove our hypotheses — that existing users want to migrate to Gmail and that new customers want our one-stop-shop solution.

I started by breaking down user stories into features, and mind-mapping them into what I considered intuitive groupings. In the on-boarding experience, users only had to select the domain they want to use and then create their first administrator account. In the control panel, users were limited to creating, editing, and deleting Gmail users and groups.

Features mind-mapped on a whiteboard.

Sketching and iteration

I already knew a few things as I started crafting the experience:

First, I wanted the on-boarding process to be linear, conversational, and short. I wanted to conserve the user’s cognitive bandwidth (and patience) for tricky steps like updating DNS records.

Second, I wanted the control panel to include as few distinct screens as possible. This was an MVP and we certainly weren’t recreating the wheel Google built. We used Angular.js to create an app-like experience that revolves around three screens: user management, group management, and company/organization management.

I started exploring the user flow by consulting with both Media Temple and Google engineers to understand how our provisioning systems work together. I stressed that we do as much as possible for the user on their behalf, especially when it comes to filling out form fields or polling their DNS records.

Above: Whiteboard sketch of the purchase and on-board flow.

Above: Some initial thoughts on organizing the control panel, sketched on a whiteboard.

The biggest challenge — typical of UX design for web hosting — dealt with guiding the user in updating their DNS records in order to use their personal domain name as their Gmail address. We wanted to make this as easy as possible by providing a step-by-step flow as well as links to the Media Temple KnowledgeBase for additional help.

Sketches of the DNS flow that I put together with our software developer, Nate.

With the Media Temple and Google engineers, I got into the technical details of both Google’s reseller API and our own provisioning system to determine the best flow for account creation.

The user flow from start to finish.

Wireframing and prototyping

I used UXPin to create high-fidelity wireframes of both the on-boarding experience and control panel UI, with extensive notations. This included a multi-step tour of the product’s control panels. UXPin wireframes are web-based, and I prefer them as deliverables since stakeholders can easily share or comment on them.

I conducted user tests to validate the painstaking work we did in our on-boarding flow to make DNS migration easy. Using InVision, I created a simple, clickable prototype of the domain search and purchase process, user on-boarding, and a short tour of the control panel. I recruited five people from various departments, including support, sales, and HR and offered them Starbucks as a thank you for participating. We made some immediate improvements based off their mostly positive feedback.

Above: User management in the control panel.

Above: Notations that detail a user interaction in the wireframes.

Visual design and UI

I worked closely with our visual designer Ryan Morgan as he transformed my wires and prototypes into full-fidelity mockups. From the start, we wanted the visual design to stress simplicity.

Above: Steps in the on-boarding process.

Above: Control panel for managing Google Apps users.

Scroll to top ↑