December 29, 2016 | Citizen Inc.

Citizen Inc.

The Problem

The process of a mature brand adding a new modality to its existing business model is similar. If it is done without a true understanding of the brand, existing customers could be turned off and new ones could fail to connect. In short, you have to read the book to make the movie. When Ruby Receptionists™ — a company with a reputation for customer service excellence — reached out to Citizen to rethink its native phone applications, we recognized the challenge and happily got to work.

There is an honest belief in the company and its offering that starts with its leadership team and applies to every piece of the organization.

Ruby Receptionists, based in Portland, serves a great and growing number of clients with professional virtual receptionist services. Ruby focuses on providing stellar, friendly help to clients, rooted in a throwback take on service, with core beliefs centering on “Fostering Happiness” and “Practicing WOWism.” These terms (affectionately referred to as “Ruby Speak”) might seem trite in another organization, but not here. There is an honest belief in the company and its offering that starts with its leadership team and applies to every piece of the organization. Furthermore, Ruby embraces the idea of a receptionist itself as someone related to the offices of the 1950s and, with its mid-century-cool branding and sense of style, capitalizes on it. It has been rated one of the best workplaces in the U.S. for four years running.

At the beginning of our engagement, every aspect of Ruby’s brand and business model was already as buttoned up as one of Don Draper’s suits. Everything, that is, except its mobile app. Ruby’s mobile app hadn’t had a major update since it first launched, it was confusing to navigate and featured an antiquated look.

The Solution

To fully express the company’s brand in a digital tool, the app would need to be stripped, retooled, and rebuilt to embody the image and values at the heart of Ruby’s service. To understand that image and those values, Citizen dispatched UX designers to Ruby’s offices to observe how their receptionists worked and behaved, providing them with credentials to utilize the services themselves.

Armed with the insight of primary research, our designers were able to grasp first-hand the service and its value, translating those observations into profiles of unique receptionist styles, which informed the work we developed.

Ruby Receptionists | Citizen Inc. | Portland, Oregon

Initial onsite planning

This kind of research is essential to the work that we do at Citizen. Design has become increasingly commoditized over the past decade, and Ruby could have turned to any number of assembly line-style providers for asset creation and development. But apps are nothing without human insight to drive them, and there is no replacement for the thought process that takes a simple idea and transforms it into a success with consumers. We work hard to differentiate ourselves by legitimately caring about our clients, seeking to understand them, and working with them to bring unique solutions to the work we produce with them.

In addition to immersing ourselves in the Ruby’s services and culture, we also dissected it’s existing app alongside many competitor apps. Doing so furnished us with a set of principles we would hold true to throughout concepting, design, and development.

Ruby Receptionists | Citizen Inc. | Portland, Oregon

Ruby Receptionists | Citizen Inc. | Portland, Oregon

Visualizing our persona thinking

Ruby Receptionists | Citizen Inc. | Portland, Oregon

The Process

Based on that detailed research, we created user personas and journeys. These, and our research-guided receptionist profiles, shaped our initial wireframes and hero flows which were additionally informed by an urge to inject “the digital equivalent of Ruby Speak” into every corner of the experience. This is perhaps most clearly evidenced in the app’s thumb navigation, which echoes the dial of a vintage rotary phone. Functional but fun, interactions like this bring the “wow factor” of Ruby’s service offering into the digital realm while remaining true to its roots.

Ruby Receptionists | Citizen Inc. | Portland, Oregon

Rough Wireframes

The development of the experience through motion and visual design was a process of coating every available pixel with Ruby’s personality. The essence of the brand is one that connects deeply with its base, and making sure that same feeling emerged in the digital experience was our primary goal. Page transitions and touches were accentuated with an organic, responsive physicality, making the app feel inviting and positive.

Ruby Receptionists | Citizen Inc. | Portland, Oregon

Hi-Fidelity wireframes, capturing the UX

In the development process, Citizen constructed the front end with Ruby simultaneously working on the back end. We reconfigured our process to focus on short, direct feedback loops and parallel building. This setup of direct and rapid communication with core team members is something Citizen now engages in on all development projects, and something that empowers our work to get done faster and better than our competitors.

Citizen ultimately delivered on-time iOS and Android versions of the Ruby app to widespread approval.
Ruby Receptionists | Citizen Inc. | Portland, Oregon

The Results

Citizen ultimately delivered on-time iOS and Android versions of the Ruby app to widespread approval. We got there through a careful process of identifying Ruby’s essential attributes – the key features of their story – and distilling them into a unified experience that delivers on the brand’s promise.Put another way, we helped their beautiful novel make the jump to the big screen. This involved as much research as it did design — just as making a movie involves as much storyboarding as it does filming. Different projects require different focuses – research, design, and development among them.

When working with a client like Ruby, the most important focus is listening: listening to their story and and fully digesting it in order to preserve what makes it special while translating it to digital media.

Citizen Inc.