My Role

What I was responsible for

Recurly app, a robust recurring billing solution, felt dated at the aesthetic level. Myself and 3 other designers decided to create a new visual foundation to build upon. I worked on design visuals down to the nitty gritty details of implementation. I focused on identifying and establishing design patterns. Coordinating across teams to ensure consistency between design and implemented UI.

Time spent

Pattern Library40%
Visual Design40%
Prototyping20%

Pattern Library40%
Visual Design40%
Prototyping20%

Goals

Finding the balance among user, design, and business goals.

Be a 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.

Accounts list screen prior to the redesign

Challenges

Finding opportunities in obstacles

New front-end code

The client-side team decided to leverage Angular.js and React.js. This created excitement within the company, but raised questions for the design team. We knew we'd have to learn some of the technical constraints for us to work through.

API-dependent

The new app would be API-driven, taking advantage of Angular.js' abilities. This meant understand what is feasible and what was a stretch goal. We would need to design for the future, then scale it back to make it work now. What API endpoints weren't available would need to be built.

Strategy

A tactical approach to redesigning software

Slow is smooth, smooth is fast

Good design isn't obtrusive. This is where we needed to take extra caution in our redesign efforts. The redesign shouldn't interrupt workflows that are critical to our amazing clients.

Cross-team collaboration

Accomplishing this redesign wasn't going to be easy. We designed across and worked with the Core and Platform teams to make sure we're hitting the mark. We needed to identify opportunities at the client-side down to the platform layer.

Pattern recognition

Identify and isolate UI elements to adopt as design patterns. Establishing design patterns was going to be a key tactic for future iterations. This meant that we'd be able to iterate on individual patterns without affecting others.

Iterate, then validate

Quick iterations and immediate validations were going to play a huge role. We decided to design in the open with a handful of clients to gather feedback and insights along the way. The dialogue between the design team and our users proved to be a huge wealth of insights that guided us.

Results

Paving the road ahead

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.

A glimpse of the future

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.

Retrospective

Learnings from a tactical redesign

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.