The Harmony of UX and ROI in Design

How and Why We Redesigned our App

Payment data is our thing, but we are bombarded with data, analytics, and information all day, every day. It comes with the territory, yes, but it doesn’t have to be daunting or overloading.

We want to deliver digestible information, so that when business managers make decisions, it looks easy.

The Utility of Design:

When we started Control, the purpose of the product was to give our primary personas — small-medium business owners — the information they need when it is most needed, regardless of their location or device.

Why mobile first? Because mobile is immediacy. If a business is getting attacked by a fraudster, for example, every second a cyber criminal’s behavior is left unabated will incur greater losses and more time and effort spent to deal with the aftermath of the fraud.

Fundamentally, Control assists customers with:

• Management of payments, transactions and revenue
• Taking mobile payments
• Monitoring fraudulent activity
• Measuring success

The better we can deliver business data and highly usable tools optimized for mobile, the better our customers are at anticipating trends, simplifying operations, and preventing security breaches. But better delivery means better design.

Source: http://aliadair.co.uk/wp-content/uploads/2013/05/design-process-slide1.png

The Catalyst for Redesign:

For the first year, we experimented with numerous features and integrations. We were cognizant of design as we made incremental improvements and enhancements to the product, however, we never took a moment to step back and look at the entire product suite.

A look at some mobile designs for Control over the first year and a half

As you can see, we played around with a variety of designs, colors, and layouts.

What we realized was that there needed to be a harmonized design across web, iOS and Android to have a coherent brand and provide a seamless user experience.

Decision Making: Usability or ROI

There are two perspectives when redesigning: usability and business goals.

The usability perspective is to rigorously defend the logic behind a design element and produce a product that provides a frictionless experience (UX).

From a business perspective, redesigns can be long processes with no immediate ROI. Depending on your budget and priority, you’ll need to find a median between the two opposing sides of the design spectrum: quick improvements versus a complete overhaul of a product.

Generally, when designing a product, there needs to be both constructive friction and balance between the designer and the business stakeholder.

I’ve seen many design projects where design leads push features that were innovative but fail to address business requirements.

Fundamentally, design should help the end user to satisfy a set of functional objectives. If you are not solving a problem, then it doesn’t matter how “awesome” the design is.

Conversely, I’ve seen business experts dominate the design process, resulting in the production of completely unusable products. When design and business are both constructively engaged and working in tandem around addressing the problem space — with an open forum for candid and constructive discourse and critique — the best results are produced.

For us, usability and clarity remain on the forefront of our attention. For example, we’re very specific about how all the information is displayed via various form factors. Here’s a behind the scene glimpse into the communication channel as we hammer out how a key feature should be presented:

If it’s presented incorrectly, the users will make assumptions about the data and in a quick-decision situation, they can easily end up making a bad call.

Here’s a look at an early design of our iOS app. As you can see, we were still working out the kinks, defining each set of data. What is more valuable to our users? Daily Transaction? Weekly Revenue? The Cumulation of everything? You won’t know what will work best until you lay it out and see.

Key Steps in Redesign:

While the process is constantly evolving, we can pinpoint three key steps in redesigning our app:

1. Identify the key personas, prototype on paper and then perform rapid iterations of different design ideas that are consistent with the overarching brand vision and satisfy the needs of the personas.

Christian and Jane are two of Control’s user personas that have been along on our journey since the beginning. We are still getting to know them better.

Like a jigsaw puzzle, we scattered all the features on the table and saw how each of them fit together.

If Control is a physical room, this part would be the floorplan and the interior designing. The placement of each feature and the look of the whole entity will be determined here.

Our office is covered with relics of our brainstorming sessions — we are always brainstorming.

Step by step, we went through each user scenario to ensure that we are offering the shortest route possible — without compromising organization — to obtain the data or access functions.

2. Define the style guide

3. Have business and design teams work together to produce all the UI screens

Staying Consistent Across Devices:

The majority of the style guide and interface elements are applicable to both iOS and Android, but special concessions need to be made with the delineation of the two in terms of the library of interactive elements they use.

For example, the “back” function in Android is very different from iOS. We account for the subtleties in both the interface design and the user experience.

The branding elements, for the most part, cascade into the web app as well, but we also recognized that the way information is presented or accessed in a mobile app is very different in a web app.

We wouldn’t want the designs in web app and mobile app to be direct copies; we design for the form factor and present the best information and interactive elements suitable for that platform.

Preparing to Implement a Redesign:

There is no chronological step-by-step we took towards redesign, but here are a few notable points in our process:

• We built an Invision prototype and received early feedback from our actual users by providing walkthroughs

• We rolled out Android Beta versions incrementally on the Google Play platform as Android better supports the iterative design process and quick releases.
• We monitored customer feedback and usage data and identified any particularly sticky usability points. We most likely will release multiple enhancements to Beta, expanding the user based, with continuous feedback loops along the way.

Because we have been so primarily mobile focused, our web app has really been a working MVP since inception. The redesign of our web app is far superior to the existing design and its roll-out is much more significant to expanding our offering.

Wireframe for Control Web App

Prototype Control Web App

Second Control Web App

Structured and concise, our new design allows users to get the information they need in the format that makes the most sense (bar graphs, pie charts, percentages, etc.) so that it can be digested with the least amount of effort, in a habitual way. Control becomes the ultimate dashboard to keep track of all matters of payments.

You Cannot Design an App in Isolation:

We are constantly experimenting and iterating but there is one strategy I cannot emphasize enough: get customer feedback early and often. Even if it means showing a demo of the product/design from a Keynote presentation. Engage the customers as quickly as you can, don’t ever design in isolation of customer feedback.

While we are incredibly excited to launch our new redesign, we are also gearing up for our next integration that will continue targeting business pain points. With the new app, there will surely be work on the user experience side of things as well.

For now, here is the look of the new Control Web and Mobile app.

Originally published at https://medium.com on March 1, 2016.