News Room

 

At Roydan we are building our next-generation reporting platform, ViewPoint. It must embrace the features of its predecessor and address shortcomings. It must migrate the best of Bloodhound reporting. It must integrate with our existing ClientConnect portal. It must build out of and extend the new architecture of Contact Tracker. This is no small task. We need to deliver a product that is an order of magnitude better than our current offering. Only by doing all this will we realize value for our users.

Along the way, you can imagine, are a lot of decisions. Making a mistake is not just about adjusting a timeline to backtrack in our development maze. Flawed interaction flows which add time to task completion are multiplied at the scale of an agency. Or worse, are misleading and lead to error or compliance problems.

And so we take great care in choosing the right path the first time we meet a crossroads. But which is right? How can we confirm decisions and move toward goals?

Identifying Decision Points

The team confronts many decisions along our product journey. Our mission is to empower consumer collection agencies. Spending the right amount of time on each decision is key to delivering on this mission. To help decide which decisions demand more thorough vetting, we look across key dimensions.

Compliance with regulatory requirements is paramount to us. We understand how our software can affect the livelihood of customers and consumers, and so we build for tomorrow’s industry. Whether that’s listening to customers, or FEC and CFPB rulings, we ensure we map a safe way forward. In their book, Design For Real Life, Sara Wachter-Boettcher and Eric Meyer discuss what they call “stress-cases.” Stress-cases are the worrisome, worst-case scenarios that haunt the thoughts of anyone needing to make or execute a plan. They explain that product design should design for stress-cases, much like an automobile engineer designs kinetic crumple zones and side-curtain airbags. At Roydan, we strive to build compliance into the product. And while the happy path is easier to travel, we slow down when approaching curves.

Most features fall within existing standards that are already informed by our mission. This framework helps us stay within the guardrails. It’s when we must leave the well-trodden path that we must take a longer look. Our Bloodhound suite has been around for more than 30 years. In design terms, that’s beyond mature. Maturity means Roydan products already enjoy great breadth and depth of features. Down to the keyboard shortcuts. But like climbing a set of steeper stairs, muscle-memory can work against you. So, when deviating from an established pattern – we keep step-change improvement in mind. Could we depart from the the norm and improve the experience? At what cost? Do we need to analyze further?

Fidelity

Once we’ve identified which features and interactions need more careful design, we need to move toward action. We use the decision-making technique with the right fidelity to measure and choose the most successful option.

Product Planning and Daily Standup

Our team meets every two weeks (we call this a sprint) to discuss proposed features to build the next sprint. The short interval allows us to course-correct often. The meeting is an opportunity to take on work, clarify functionality, and generally make a case to do something. This tight feedback loop between product owner and the rest of the team ensures decisions don’t get stuck in a queue to grow stale. Each morning we have a standup meeting where we discuss progress and impediments. This is an even shorter feedback loop which helps us build toward a shared understanding of the product.

Whiteboard

A whiteboard with designs marked up and stitched together

A whiteboard with designs marked up and stitched together

When discussion doesn’t quite suffice, we often turn to a whiteboard. A whiteboard is a literal blank slate. With it we outline complex Client / Client Group publication concepts. Or stitch together separate screen blobs into a more cohesive whole. The low fidelity encourages everyone to take part. Often times a whiteboard is all we need. Or, it may just be a rough draft of things to come.

Paper Prototypes

Paper prototypes

Paper prototypes

While whiteboarding is quick and dirty, it can be hard to rearrange or iterate upon. If substantial changes to a large wireframe are needed, we need to erase and start over. Enter the paper prototype. By building small, reusable components out of paper, the team “builds” interfaces sort of like a LEGO® set. Changes, variants or wild new patterns are inexpensive. We mock animation and clicks by moving paper layers around. We print and cut out higher fidelity mockups to include alongside less-fleshed out elements. Don’t know how that fancy SEARCH WIDGET is going to look? That’s fine, let’s just put in a placeholder for it now. Paper prototyping seems to hit the sweet spot between fidelity, interaction design, and speed.

Wireframes and Mockups

A set of wireframes

A set of wireframes

Paper prototyping is great for internal or in-person design sessions. But to share concepts remotely or as a group we need digital representations. You might hear the terms wireframe or mockup used interchangeably to describe a picture of a screen. The main difference is fidelity. A wireframe is the lower fidelity composition, something rougher and drawn. Think grey boxes and rough edges. They help communicate the relationship between objects on the screen more than the objects themselves. Mockups are “pixel-perfect” representations of how the screen should look when visual design is applied. There is a time and place for mockups, but often they are expensive to create and maintain due to their higher fidelity. Both can be created with tools like balsamiq, invision, HTML, or even PowerPoint. An added bonus of software-assisted wireframes and mockups is that they can be linkable. This allows us and users to explore how different pages flow together. We often conduct user experience testing with linked wireframes to better understand if content is discoverable and intuitive with little to no training.

CodePen

Our technology stack for ViewPoint enables us to use modern web practices. That also means we can test components in isolation of our total product. CodePen lets us experiment outside of the confines of the Bloodhound application, but still leverage our established styling and markup. CodePen helps test a rich set of interactions at high fidelity. With it we build a more complete picture of the product visuals and interactions. Essentially, we create tiny prototypes without having to affect mainline development in the product.

Let’s take a look at a few CodePens. For example, when building preset publications, we wanted to experiment with a transition in the create wizard.

See the Pen Publication Transition by Brian Muenzenmeyer (@bmuenzenmeyer) on CodePen.

Or when designing the shell for ViewPoint, an essential set of interactions that harnesses the entire product. Building a small-scale prototype is perfect to confirm the right feel to users.

Or when designing the shell for ViewPoint, an essential set of interactions that harnesses the entire product. Building a small-scale prototype is perfect to confirm the right feel to users.

See the Pen curtain ui take 2 by Brian Muenzenmeyer (@bmuenzenmeyer) on CodePen.

Pattern Lab

A screenshot of the Roydan Design System built with Pattern Lab

A screenshot of the Roydan Design System built with Pattern Lab

And when it comes to making sure all our decisions remain part of a cohesive experience, we must have a system. Pattern Lab is a set of open source tools helping us “build thoughtful, pattern-driven user interfaces using atomic design principles.” The power of Pattern Lab comes when we want to create and manage interfaces as a whole and in parts at the same time. Maintaining visual cohesion throughout a large application is difficult, especially as new features are added over time. The toolset embraces the DRY (don’t repeat yourself) principle to let us build and tweak whole aspects of our solution at once. We can also annotate our usage of certain behaviors and strategies so we have a written and visual record of how components operate. Built-in tools help us test across many screen sizes too.

Listening for Feedback

Choosing and using the right tool to sculpt our decision points is only the beginning. Once made, we need to use our design assets to inform product decisions. Our support staff works with customers every day and channels feedback and observations into design input. Our management staff is also a deep font of knowledge, including President Dan Hornung, who’s worked in the industry more than three decades. Roydan’s beta program also lets us work closely with select customers to better understand, identify, and solve specific problems. Through regular meetings both parties can discuss the merits of our product’s journey. These meetings often use the techniques we outlined to communicate ideas. So far, the feature-set of ViewPoint is positively impacted by this close customer involvement. Lastly, our product owner, Joe, plays the largest role in decision-making. He acts as the consistent voice of the customer, trumping all other internal voices. He needs to rise above the fray of ticket-fixes and feature development and guide us toward long term solutions.

Trading Common Currency

It’s easy to feel lost when faced with many pathways, even paralyzed. Missed or delayed action is lost time. At Roydan we really try to dial-in on tools we need to reach design decisions. We form hypotheses, design to test our understanding, decide a course, and move toward that goal. We learn if our hypothesis is correct, we share, and we repeat. We move to learn. This is our common currency. Our ultimate goal is to keep moving us and our customers forward, improving each step of the way.