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.
Roles And Responsibilities
- Discover the MVP
- Competitive design research
- Re-design the Product
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.
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
Organize and create a visual hierarchy with actions and information.
3. Lessen Cognitive Load
Linear Progress for sending funds
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.
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.
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:
Ability to find and quickly identify written checks based on name, amount, and date.
2. Accomplishing Tasks
Readily available tasks based on check status
Go take a look at the design system!
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.
It’s about time a web designer cares
about your business like you.
© 2019 Hello I'm Tim | Tim Schweitzer