Repainting the Plane…at 30,000 Feet

Andrew MortonSenior Engineer, Recurly@drewish

Andy MontgomeryHead of Design, Recurly@mntgmry

Background

Provide a significant visual overhaul.Don’t disrupt customer workflows.

But… People Don’t Like Change

Limited Design Resources

The Elements of User Experience

Visual Design Interface Design

Interaction DesignInformation Architecture

Visual System and Style Guide

+JSON API

Front-end team started running into “issues”

PROBLEMS• Many edge cases to consider

• Duplicating a lot of Ruby logic in JavaScript

• JS folks didn’t fully understand all the Rails app’s functionality

• A *lot* of pages to move into an Angular app

API team also started running into “issues”

PROBLEMS• Wanted to build a production

grade API

• Needed to build 90+ API controllers

Changing Course

Simplifying Scope

Factors in Decision

CHANGING COURSE

We wanted to:

• Stay with Rails

• Develop new UI in parallel

• Use the HTML components

• Keep webpack as our build system

Rails Engine

What’s a Rails Engine?

RAILS ENGINE

“Rails::Engine allows you to wrap

a specific Rails application or

subset of functionality and share

it with other applications or

within a larger packaged

application…”

Benefits

RAILS ENGINE• Allowed a parallel set of views,

styles and JS — only added to the view path when user toggles a session variable

• Allowed use of webpack — assets are statically compiled in the gem

• Decoupled the UI changes from the API work

Drawbacks

RAILS ENGINE• Created an implicit interface

across two projects

• Was hard to test in isolation — thankfully our QA team likes Selenium tests

Summary

RAILS ENGINE• Worked well, but not a long

term solution

• Planning to deprecate the engine and move contents to app

Next Steps

FUTURE WORK• Improve site navigation and

structure

• More creative/intuitive interaction design (minimize clicks)

• Focus more on React components than AngularJS apps

Want to Help?

https://recurly.com/jobsjobs@recurly.com