ValidCheck App

UI/UX Design

The Skinny

ValidCheck is a startup that had developed its core functions in React to validate and test their product. During this test period, ValidCheck substantiated the product. In order to compete in the market of banking and eChecks, they needed a re-design of the user interface, and a native app.

Highlighted Problems

1. Naming Conventions were vague and ambiguous
2. Application’s function structure was undefined
3. Basic usability prinicples were ignored

Roles And Responsibilities

  1. Discover the MVP
  2. Competitive design research
  3. Re-design the Product

Market Differentiator

ValidCheck guarantees fraudulent protection on all eChecks sent from their system.

Heuristic Evaluation

In cases of re-designs, sometimes, a heuristic evaluation can go a long way in understanding the product’s purpose and create a more engaging experience. With little direction from the stakeholders, I needed to identify and organize the large usability issues. Here are the big issues:

1. Naming conventions were Vague and Ambiguous

Clear and intelligible communication is important for not only the user, but for the developers as well.

2. Basic useability principles are ignored

Among many other issues, the actions do not have labels and create a lot of room for error because of their ambiguity and their proximity to one another. 

3. Information Heirarchy

There is no guidance on what the primary, secondary, tertiary information should be. There is so much information that is crowding the page making it difficult for the user to focus on what matters.

Discovering the MVP

Even though this project already had most of its core functions developed, it is important to understand, from a high level, the current information. But first, I needed to know what the naming conventions were. Here is the result of a stake holder meeting where we briefly went over industry terms, and statuses.

Mobile First Design

The business initially asked me to design desktop first. There are times, however, when designing mobile first forces design to focus on what is most important for the user. I wanted the business to experience the benefits of progressive enhancement methodologies. Here is how I presented the benefits to the stakeholders which eventually led them to designing mobile first: 

1. Prioritize information and Actions

Not everything is important to the users at all times.

2. Strengthens the Foundation

If we focus on designing the hardest screen size first, inevitably the larger screen sizes will be quick to design.

Market Research

There are a lot of good ideas for sending money online, so it would be prudent to consider them. Additionally, it was interesting to know how other companies design information rich data tables. I highlighted some good UX ideas to consider for this re-design.

1. Prioritized Actions

The main dashboard should represent the main actions of the user: Sending checks and managing payees.

2. Hierarchy

Organize and create a visual hierarchy with actions and information.

3. Lessen Cognitive Load

Minimizing tertiary information on a mobile platform to lessen cognitive load.

AppS Inspiration

Data Tables are Consolidated to display information of identification

Linear Progress for sending funds

Sending Checks

After collecting problems, competitor research, and aligning stakeholders, I started experimenting with some ideas and testing on my colleagues.

My initial idea was to recreate the Dashboard screen for a mobile device from the desktop platform. I was going to accomplish this by adding a skeuomorphic check with fields.

This design clearly frustrated the user. The testers had a hard time navigating around all the text/number boxes of each field. My job as a designer was to give them a straight path to filling out the check. This was not that straight path.
Instead, I created a simplified check flow that you would typically see in an app that sends money. The testers were using intuition rather to use this function.

Formatting and Intelligibility

Every check that is created has a status. Every status has available actions and information associated to them. Each one of these states needed to be designed with consistency despite their dynamic nature. I knew this information would have to be presented in a data table format on tablet and desktop, however, creating an experience on a phone with data rich tables proved to be a challenge. 

I started by creating scrollable tables with all the required information.

Design of Mobile Tables

Problems with this design

1. Design was overwhelming

2. Actions were hidden on the other side of the table, causing testers to scroll back to the left to double check they were taking action on the correct Check

3. To much information

 

After interviewing our company controller, we quickly discovered that a lot of the information in the table was tertiary information. Here is what controllers are concerned with:

1. Identification

Ability to find and quickly identify written checks based on name, amount, and date. 

2. Accomplishing Tasks 

Readily available tasks based on check status

Design of Revised Table

Secondary and Tertiary Information

Design System

Once the stakeholders were aligned with the direction of the core functionality, I suggested that we create a design system so we could have fast turn-around on iterative design changes, increase the scalability of both platforms, and create design standards for both designers and developers.

Go take a look at the design system!  

Desktop Re-design

After creating the design system, the rest of the app was quickly designed and I was able focus on the initial request to redesign the desktop app. The foundation, and planning that went into the app made for an easy desktop redesign. The stakeholders could see how the app was seamlessly translated to the desktop platform with the user in mind. 

Complete App Design

Solving Problems with User Centeric Design

Having testers was the keystone to this projects success. They gave insight to a psychographic we had yet to discover.

Documentation

Creating documentation was imperative to ensuring good developer communication. I wanted to make sure that developers always had a reference for all the design components and functionality of the app.
Go take a look at the documentation!

It’s about time a web designer cares
about your business like you.

© 2019 Hello I'm Tim | Tim Schweitzer