A mission–critical redesign

Recurly is an enterprise–class subscription management platform helping businesses harness the power of the recurring revenue model.

Recurly

Businesses around the world rely on Recurly's deep expertise in the payments industry to provide robust subscription billing management software flexible enough to meet the demands of an evolving industry.

The Challenge

Recurly app, a robust recurring billing solution, felt dated at the aesthetic level. The design team was tasked with creating a new UI to serve as the new foundation for the future.

I worked on design visuals down to the nitty gritty details of implementation. I focused on identifying and establishing design patterns, while coordinating across teams facilitating design intent and engineering concerns.

The legacy monolithic app boasted an outdated UI that served thousands of business owners.

The Approach

Be breathe of fresh air

The old Recurly app looked dated and felt static. We wanted to improve on the experience by evoking a more modern feel. Doing so meant thinking beyond where we were and to look forward where we wanted to be.

Lower design debt

Find experiences a long the way that we can improve on without much effort. Just like every engineering team, design teams also incur design debt. This was our chance to reduce our debt and finally scratch that itch.

Create more consistency

Recurly app had a few eye sores where inconsistency in visual elements and design patterns. We needed to identify and tackle those inconsitencies with new established patterns. Creating consistency within the app will also help lessen the learning curve for new users.

Do no harm

First rule of a redesign: Do no harm. This is especially try true when you're redesigning mission critical software. We decided to move mountains with a spoon, one scoop at a time.

The building blocks of tomorrow

We established a pattern library for both Photoshop and Sketch. I worked with the client–side teams in implementing patterns into Angular components.

The Snappy UI Kit captured the initial set of patterns required to create features and flows supporting the business owner's mission critical tasks.

Methodical iteration

Rallying support and excitement is much easier when you can show results. Once we had an internal beta of our new client–side interface, the momentum began to build. We knew this was just the beginning of changes to come.

Every piece of mission critical software deserves an elegant interface.

The Takeaways

Power in patterns

Identifying and establishing patterns is critical in creating consistency across teams. Design patterns allowed us to iterate on ideas, experience flows, and visuals with velocity. Focused and isolated changes were essential in tactical design iterations.

New ways of writing client-side code

I was still ramping up on Angular.js at the time. However, I saw great value in understanding the fundamental concepts of such frameworks. Knowing the constraints of each will allow for proper innovation in future challenges.

Previously

Tango Out

Voice calling for iOS & Android

← View case study
Up Next

Sketchpacks

Sketch plugin management

View case study →