Part of a 6-month project working for FIS Global on a team of two other UX Data Analysts to improve understanding, retention, and accessibility of data and the beginning of user-centricity of the Ethos Data Solutions suit.
Role: UX/Product Designer
Product Audits, Competitor Analysis, Research, UI Design,
Documentation, Defining Patterns, Quality Assurance,
and Median between UX and Development Teams
Tools used:
Tableau, Adobe XD, Sketch, Figma, Miro, and Illustrator
Background:
Over two years, the UX Data Solutions team focused on improving the understanding and comprehension of data for the Ethos product line. Due to the small team size, other product areas need improvements, such as the product UI, quality assurance before product launch, user feedback, and consistency, leading to users having a consistent experience across products.
The Solution:
The existing Ethos design system is outdated and doesn't have user feedback to prove its effectiveness. After personally auditing the Ethos product line, revealing some significant issues, I determined that a design system overhaul is needed along with aggregating user feedback to begin making the Ethos products user centric.
The Result:
After implementing the new design system, the UX Data Solutions team began gathering user feedback to make the Ethos product line user centric, not depending on project manager feedback as a metric.
Product and User Insights
The Ethos product line consists of banking products ranging from consumer and banking analytics, bankruptcy life cycle, customer transactions, debit and credit fraud, credit loss, credit scores, customer loyalty, and tax. The primary users of the Ethos products are typically data analysts, vice presidents, and managers for small to mid-level banks and credit unions. Additional users are CEOs, COOs, CFOs, and data scientists.
The Design Process
Though it may look complicated, this process begins with Design Thinking, looking to solve pain points using the Agile Methodology to define a solution and then implementing that solution, allowing enough time for users to determine its adequacy through user feedback.
The design system created so far has been implemented into two of our most used products and is set to be released into the Growth Hacking loop.
Challenges
Unfamiliar with how to correctly display data on graphs
Consulted with subject matter experts and
Lack of user feedback to justify changes in the design system
Need to depend upon existing mental models on the Ethos platform until user research is conducted.
Product Audit
To understand pain points, I began auditing each of the eight products and interviewing people I had access to, like front-end developers, product managers, and other UX designers. Of all the people interviewed, product managers were the closest we could come to gathering user feedback. Still, this second-hand information about the product has the possibility of becoming altered to fit the product manager's perspective rather than the users.
Product Pain Points:
Inconsistencies between product interfaces
Inconsistencies in information location between product interfaces lead to distrust in the products
Return consistency to the location of information will bring back trust with the users
Forcing all information onto one page
Condensing information onto a single page above the fold leads to information being forced into undesired areas or skewed in awkward ways
Making dashboards scrollable will relieve congestion of data cards and create a hierarchy of information when stacked
Optimal color contrast between the interface and data
Reducing the use of colors to links, data, and card titles
It’s important to be able to navigate through the interface but not at the cost of losing track of the data. If the interface is taking hierarchy over the data, you are doing a disservice to your product
UI and data colors before the design system overhaul
Overall lack of design guideline specifications
Having a source of truth for design and functionality that the UX Data Solutions team has agreed upon, leaving out room for ambiguity
This source of truth can be disseminated amongst other teams to communicate a common design message
Creation of an Ethos design system for web and tableau products
Developers Requesting Quality Assurance
Quality assurance is the final time to catch errors before the product becomes published, and ignoring quality assurance can lead to unintended published errors
Requesting quality assurance to ingrain this before the product launch process
Pain Points Handled By Others:
Improving color sets to become accessible for colorblindness
The Ethos product colors already met ADA compliance, but with the change in contrast between the interface and data, a review of the data colors would be beneficial
Using the websites below to help find optimal color combinations and contrast options
https://webaim.org/resources/contrastchecker/
https://www.susielu.com/data-viz/viz-palette
User research and feedback
User feedback research wouldn't happen until a later time
In my 12-month contract, the user-centricity of the Ethos product line needed revisiting. With user feedback, the UX Data Solutions team could know users' thoughts on the products, an opportunity to bring user-centricity to Ethos products.
Researching Case Studies and Benchmarking
My research included reviewing case studies for banking web apps and Googling through imagery for inspiration.
I was interested in case studies using:
card systems
design systems
handling of data, especially as it applies to color and graphs
scrollable and single-page interface
Case Studies
https://uxdesign.cc/8-best-practices-for-ui-card-design-898f45bb60cc
"Dashboard visualizations: a dashboard is a good example of how cards can be used to group related information in a way the user could easily compare and analyze data on the interface "
"Strive to maintain balanced font sizes and avoid using too small fonts."
"Create a spacing system for padding"
"Define a fixed height for cards"
Create a card design for different content types
_____
https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632
A system to define the spacing relationships of elements
Even numbers when spacing are easily divisible than odd numbers
"Utilizing an even number like 8 to size and space elements makes scaling for various devices easy and consistent."
_____
Investment platform for beginners
Large company
Uses card system for data
Use of greens and reds for gains and losses
Uses graphs in card
Web application looks scrollable
_____
Online banking web app to check your spending and balances
User-centric design
Forced all banking information onto one page above the fold, with no scrolling
_____
Service that helps retailers organize their operations and monitor cash flows
General reasoning as to why they designed the UI
Language is good
Card system
_____
https://uxplanet.org/ultimate-guide-for-designing-ui-cards-59488a91b44f
Verifies rationals for card layouts
_____
Image Research
Case Study Findings
Findings from case studies:
Most web applications keep all their content to a single static screen above the fold.
Ethos products use this same strategy, keeping all information to a single screen above the fold. Due to the large amount of data that goes into that area, data can become skewed into undesired areas
Using card system components to hold related information types and placement to show hierarchy.
The current Ethos design system has a card system that shows hierarchy but separates all data into individual cards regardless of whether data is related.
Using green and red to display gains and losses, though these colors have accessibility issues for the color blind.
The Ethos current design system uses red and green along with specific iconography to help distinguish the difference in gains and losses
Emphasis on brand colors over data colors.
If data sets are consistently smaller and an emphasis is on a number-based value, not a series of graphs, it could make sense to value your brand first
User Flow
Not specific to one Ethos product, this flow is an overview of how users access and recall data from all Ethos products from the portal. I will be focusing on the Dashboard Reports section of this flow.
Design System Updates
Wireframes
To reduce the learning curve for users, I decided to keep the header and filter layout the same, focusing on optimizing the data in the card system. Making pages scrollable will help reduce the congestion and skewing of data instead of keeping the card system confined to being above the fold. The UX team decided that layout B would be best, keeping important KPI cards at the top of the page and data cards beneath. Additionally, option B will allow data to be less congested. Below are wireframes options, and above them are their related layouts.
Layout A) Stacking KPIs cards to the top left would give them hierarchy, but hierarchy reduces as they stack further down. The KPI cards are supposed to hold more hierarchy than the data cards. Also, the height of the KPI cards wouldn't change but depending on the character length of the KPI cards, the width changes, which could cause fluxing across other cards to the right.
Layout B) KPI Cards are always up top, so they will always have hierarchy. The smaller data cards are taller and would never change width, thus increasing the amount of scrolling if more data cards are added. Changing KPI card widths could mean they may stack into a second row.
Layout C) Concerned that data cards would become too congested in smaller cards. KPI Cards are always up top, so they will always have hierarchy. Changing widths could mean that KPI cards may need to be stacked into a second row.
UI Colors
To create more contrast between the data cards from the previous UI, I removed the color from the header and the dashboard itself, making the product logo, links, and the data - when applied to the card - the only colors on the UI.
Removing colors from the header and the dashboard are fewer colors that attract your eyes.
Only implementing colors to links and data will keep the focus on these elements.
Additional UI colors prototyped
Based on the previous UI colors.
Accessible Colors for Data
A UX Data Solutions team member provided an updated accessible color set.
Legacy Accessible Data Colors
Updated Accessible Data Colors
If you compare the difference between the darkness and brightness of each color set, the updated accessible colors have a wider range of darkness to brightness for the colorblind.
Fonts
The fonts were changed from Source Sans Pro to Arial and Arial Black due to issues with Tableau, where Source Sans Pro would need to be uploaded to every client's server if used. Arial as a font comes close to Source Sans Pro and comes with a Black variant.
Icons
The icons did not change as they are a common pattern used across the Ethos products.
Greens and reds together are typically avoided as they are the same brightness for people who are color blind. Ethos products have unique icons for gains and losses used together with green and reds, which avoid this issue altogether. Additionally, we added calls to action to iconography.
Data Cards
Previous data cards have inconsistencies, like legend placement, the title's text size, or the label of dates in the graph. Big and small data cards lack padding, making data and card info look compressed or skewed. I created data card patterns for consistency in formatting data and functionality. Further down, these cards are updated with accessible colors for graphs and updated fonts.
Below will become the new layout of the cards based on research from the case studies and team needs.
KPI Cards
The KPI cards have some consistency between the size of the icons and increase/decrease text. Like the data cards, I created a pattern for KPI cards for consistency in formatting data and functionality. Further down, these cards update with fonts.
Below will become the new layout of the cards based on research from the case studies and team needs.
Atomic Design
Defining Atoms and Assembling Molecules
Compiling all the changes above from the text, color, cards, and graphs, these will become the atoms in the atomic design. All the atoms in shades of gray will take on data colors.
Assembling Organisms
Using atoms and molecules above, organisms form to create KPI, small and large data cards, header, filter, and footer bars.
Cards only use colors for data, links, and titles. Additionally, data card titles took on a vertical bar for scannability and a bold font option to help show distinctions in data when filters change.
Interface bars changed to grey to match the data card background and blue links.
To separate themselves from data cards, KPI card layouts show their values above the title, thinking that users will see red and green icons first, imbuing levels of concern instead of searching for a title and looking for the value.
KPI cards also vary in size and width to fit the dashboard's width.
Producing Template
This template will become the guide to consistency across Ethos products. Applying the organisms to this template will ensure the proper spacing between cards and placement of other components like the footer, header, and filter bars and the elements within them. This template will also become the basis for the Ethos UI kit.
Creating Pages
Forming a page out of molecules and a template, we will start building the dashboard on which the Ethos products will rely to display data. Here, you will notice that information isn't forced or skewed into small data cards, and the data in the graphs are prominent on the dashboard in addition to links.
Design System and Data UI Kit
After defining the atomic design, I compiled guidelines into two design systems, one web-specific and one for Tableau, as these platforms operate differently. In addition to the design systems, I created a UI kit for Adobe XD and Figma.
Ethos Data Design System
Ethos Data UI Kit