My Role
Since I onboarded as the Product Team UX Designer, I have worked on consolidating and maintaining the components of Card App's different visual components in a design system. It is part of a larger effort to create a style guide and establish a design pattern library.
The majority of my work involves validating early concepts, wire-framing and providing high fidelity mockups to the development team.
As Card App is a B2B platform, the customer is often the financial institution while the end users are the consumers of the app. One of our high-level goals is to provide fleshed out value-driven user journeys to the end consumer to increase engagement and drive more traffic to the app.
To accomplish this, we are undertaking cyclic 2-week sprints to improve and interconnect our existing functionality to make it friendlier and appealing to the end users.
OKR Driven Feature Ideation
At Ondot, we use OKR's to drive feature ideation and development. As our primary customers are financial institutions, the cost benefit of Card App is measured in its ability to increase revenue and decrease costs for the institution.
The OKR's handled by the design team include adoption, engagement and app rating. For feature ideation, we analyze gaps and needs in the existing ecosystem as well researching the market to measure competitive trends.
Market research involves an analysis of existing apps and services in the market as well a detailed breakdown of their specific offerings.
Once we identify features with potential merit, we perform a user journey sprint to create wire flows according to the persona.
Depending on the scope and size of the sprint, we then iterate based on user feedback and stakeholder constraints.
User Journeys and Wireframing
We create user journeys and experience flows in Lucidchart, using simple black & white screens to illustrate the experience.
This chart contains the reasoning and breakdown behind each decision as well as the alternative flows and error cases.
The wireframes go through iterations based on stakeholder and developer feedback before proceeding to creating mockups.
Design System Management
At the time of onboarding, Card App did not have a unified design language or style guide. This created obstacles in the workflow across product, development and sales.
I backfilled to create a set of common elements and patterns to establish a baseline for new features and journeys. We also created a review process for any changes made to the design system to ensure the app is built out in a consistent and scalable way.
As Card App is white-label, there are a lot of branding and customization tools available to customers
It was important to define the customizable parts of each component as part of this exercise.
This process saw major quality of life improvements for developers as there was a single common source of truth for every design element for any given page.
The current effort involves establishing design patterns and templates for navigation, as well as a style guide for the larger team to use.
Accessibility Compliance
I led the Card App accessibility project to ensure Card App complied with the WCAG 2.1 regulatory standards for USA ADA compliance.
The project involved several major areas of ensuring accessibility, such as:
-
A sensible focus order for elements on every page
-
Voiceover text templates for all components
-
Defining magnification behavior for text in different elements
-
Ensuring minimum contrast ratios for legibility of text and actionable icons
-
Redesign of certain elements that were not accessible.
Frontpage Redesign
Work Sample
This was an exercise I undertook to revamp the front page and give it a fresh and vibrant look.
Use the slider on the right to compare the starting and end point of this exercise. The process is detailed below.
Goals
-
Improve visibility of elements and ensure the user notices them sequentially.
-
Make the spend category colors of the pie chart more distinct
-
Improve the visual appeal of the elements.
User Study
The first step was to get user impressions on the page. I conducted one-on-one interviews with 10 individuals in the 25-35 age range and asked a few questions, such as:
-
"Assume this is your banking app and you opened it for the first time. Can you give me your first impressions and tell me what you like or don't like?"
-
"What did you notice first?"
-
"What do you think of the pie chart?"
-
"How much did you spend on Groceries?"
-
"I'll give you a rapid-fire list of spend categories, what color do you instinctively associate with each?"
Takeaways
-
Most users disliked the colors of the pie chart, saying it was too drab and lifeless.
-
Most users noticed the pie chart first and then scrolled down, completely missing the 'What' and 'When' tabs.
-
Some users were confused about the functionality of 'What' and 'When'.
-
Users found it hard to distinguish between multiple cards at a glance.
It is interesting to note that a lot of users had strong preferences for the colors of some of the categories. This was a rapid-fire question included in the user study to establish a natural baseline for color if one existed.
-
All users associated Groceries with green.
-
Most users associated Department Stores with red tones (although this may be an effect of having seen the category on the device just prior!).
-
Most users associated Personal Care with red and Travel with sky blue.
Market Analysis
The next step was to analyze the competition to identify trends and patterns.
As a white-label app, it is important that Card App uses commonly defined patterns and trends to comply with the branding and standards of financial institutions.
The apps analyzed were budget trackers as well as popular banking apps - such as Mint, Clarity Money, Apple Card, Monzo, Chase and CITI.
Category Colors
The strongest response from users was about the dull and indistinct colors present. To address this, I created a palette on the baseline users had strongly correlated with - Groceries, Department Stores and Travel.
I used a color wheel to establish the remaining colors, with careful consideration of the fact that this pie chart would be used in apps with different branding colors.
I tested the app with various common banking brand colors to ensure these colors were a good fit.
The final set of category colors are shown below.
The results showed that in terms of an overall design pattern, Card App was not too different from the other apps that did present a pie chart.
An interesting takeaway was that most of the apps had similar colors for categories users strongly correlated with those colors, such as green for Groceries.
Pie Chart Gradient
In skeuomorphic design, gradients are used to create the effect of a light source. Most often, light sources originate from the top left of the screen. This looks natural as things we look at every day are illuminated from above.
The lighter part of the gradient attracts user attention first. This helps the natural flow for readers who scan the app left-to-right and top-to-bottom.
One good rule about applying gradients to a page is having a consistent light source. In daily life, everything we see is usually illuminated by one source.
As seen in the top left image, the first gradient from A to B looks more natural.
In Card App, the pie chart was unnaturally lit from several directions at once, which is not something that occurs naturally in nature. I resolved it while keeping the skeuomorphic aesthetic by applying a gentle light to the pie chart from the top left as seen on the right.
This, together with the new colors, resolved most of the visual issues with the pie chart. I made sure to run a round of testing with differently branded apps to ensure compatibility.
Hero Section
A lot of users failed to notice the total spend and tappable tabs above the category chart.
I introduced more space and made the buttons more clearly visible with a background for the selected tab. This pattern was also more familiar to iOS users as it is similar to the default iOS tabs.
Card List
Users complained about their cards being not visually distinct. To tackle this, I introduced these changes:
-
Replaced the orange card icon with one of the actual card for a quick visual connection.
-
Swapped the primary and secondary labels so the name of the card appears first.
-
As a usability issue, replaced the green power icon with text for color-blind users
Testing & Conclusion
After implementing the changes, I asked for feedback from the initial group again as well as 5 new users. The results showed the following:
-
Most users liked the new colors and found them much more modern.
-
Users noticed the spend and hero sections early on instead of immediately scrolling down.
Overall, the experiment was a success and users enjoyed the refreshed homepage.
Some aspects of this redesign were implemented, while others were placed on the backlog due to higher priority projects.