Platform Refresh

  • AWS
  • Capistrano
  • CSS
  • foreman
  • Heroku
  • JavaScript
  • jQuery
  • Less
  • Merb
  • Mixpanel
  • MooTools
  • NewRelic
  • Nginx
  • Optimizely
  • Postgres
  • Rails
  • rbenv
  • RSpec
  • Ruby
  • Sass
  • simple_form
(7/13-12/13)
  • Frontend

Summary

As the F2E in team of five, helped deliver a major update to the company’s flagship product.

Overview

This was an enormous effort to overhaul a product whose UX had not been altered much in five years.

We took a piece-by-piece approach to swapping out components because of the complexity of the legacy behemoth. First, we refreshed the views in the legacy app, which involved changing styling in three different places (because the app had grown "organically" over the years, taking on three different styling paradigms: styling was defined in custom stylesheets, in Less, and inline.)

In parallel, part of the team started building out the new peer Rails 3 app, the eventual destination for all views, complete with the company's brand-new proprietary SSO solution (also built in parallel.) Finally, routing was updated to send all traffic to the Rails app.

Forming

Between August and September of 2013, we coalesced as a team under the project champion, the company's CTO, and began formulating what the new UX should be and do.

Below is a screenshot of an example of the dashboard as seen by the end user (Merb, built in 2008):

Before

Below is a screenshot of the progress of a microtask job, also as seen by the user (sensitive information redacted):

Job Status

Norming

Between September and October of 2013, we cranked out the new experience.

Based on a design concept by the other F2E in the team, we began restyling low-risk interfaces of the system. The new design was not simply a reskin, but involved introducing a similar-yet-improved information architecture, an example of which can be seen below:

Newly-evolving UX

Following are a few more example screenshots demonstrating the evolving look-and-feel:

Configuration Panel
Listing

As we were tackling the UX, a backend engineer in a peer team was working in parallel to create a custom role-based SSO system that we would leverage for enforcing authentication and authorization in a new way for the company.

Shortly before the conference, a decision was made to go with a second design concept, not entirely different from the original, but a little more polished. A designer was requisitioned to provide the new design. From that point forward to product launch, we mostly fine-tuned the details.

The following screenshot demonstrates not only the new design but also the use of the new SSO solution, which can be seen where certain UI elements are disabled based on the user's permissions:

Roles Enforced

To QA the new experience, we ran it in alpha against production data repositories just prior to the conference.

Performing

After the launch, we maintained the product, adding features we had not been able to squeeze in.

Below is an example screenshot of how the final product shaped up:

Finished Product


anthony at bluxomelabs dot com