U.S. News Credit Card Compare Tool: Building a System That Scaled Org-Wide
U.S. News Credit Card Compare Tool: Building a System That Scaled Org-Wide
U.S. News Credit Card Compare Tool: Building a System That Scaled Org-Wide
Tools Used
Tools Used
Figma, UserTesting.com, Storybook
Figma, UserTesting.com, Storybook
Figma, UserTesting.com, Storybook
Status
Status
In Development
In Development
In Development
Challenges
Challenges
Design System Migration:
The organization was in the early phases of a design system migration. Our design team did not have a dedicated design systems expert, therefore, that work fell onto the entire design team. The Compare Tool project was the first major project that required the creation of many new components using the new MUI component library.
Design System Migration:
The organization was in the early phases of a design system migration. Our design team did not have a dedicated design systems expert, therefore, that work fell onto the entire design team. The Compare Tool project was the first major project that required the creation of many new components using the new MUI component library.
Design System Migration:
The organization was in the early phases of a design system migration. Our design team did not have a dedicated design systems expert, therefore, that work fell onto the entire design team. The Compare Tool project was the first major project that required the creation of many new components using the new MUI component library.
Research and Analytics:
There was a limited amount of resources and time given for research, including the legal team's restriction on conducting user interviews and the lack of in-depth web analytics to track user behavior across pages. I did have some basic analytics like conversion rate and page views, but this doesn't tell the whole story.
Research and Analytics:
There was a limited amount of resources and time given for research, including the legal team's restriction on conducting user interviews and the lack of in-depth web analytics to track user behavior across pages. I did have some basic analytics like conversion rate and page views, but this doesn't tell the whole story.
Research and Analytics:
There was a limited amount of resources and time given for research, including the legal team's restriction on conducting user interviews and the lack of in-depth web analytics to track user behavior across pages. I did have some basic analytics like conversion rate and page views, but this doesn't tell the whole story.
Requirements:
Adding the ability to view 4 cards instead of 3 increased the complexity especially when designing for different size screens. The need to make the browse and compare screens, which use same page URL, more of a linear process or flow where each page looks and feels different enough, but not too similar either to where the user gets confused and lost. The large amount of disclaimer text required at the top of the screen made this especially challenging on mobile.
Requirements:
Adding the ability to view 4 cards instead of 3 increased the complexity especially when designing for different size screens. The need to make the browse and compare screens, which use same page URL, more of a linear process or flow where each page looks and feels different enough, but not too similar either to where the user gets confused and lost. The large amount of disclaimer text required at the top of the screen made this especially challenging on mobile.
Requirements:
Adding the ability to view 4 cards instead of 3 increased the complexity especially when designing for different size screens. The need to make the browse and compare screens, which use same page URL, more of a linear process or flow where each page looks and feels different enough, but not too similar either to where the user gets confused and lost. The large amount of disclaimer text required at the top of the screen made this especially challenging on mobile.
Different User Groups:
Designing for two main user groups with different needs, fears and goals.
High Income / High Credit Score
Low Income / Low Credit Score
Different User Groups:
Designing for two main user groups with different needs, fears and goals.
High Income / High Credit Score
Low Income / Low Credit Score
Different User Groups:
Designing for two main user groups with different needs, fears and goals.
High Income / High Credit Score
Low Income / Low Credit Score
Conflicting Business Goals:
The revenue model for the Credit Cards sub-vertical is based on card application approvals on partner websites, which reduced the amount of direct influence I had on shaping user behavior. Therefore, the primary business goal was to increase conversions (users clicking "Apply Now" button and being redirected to partner website).
The secondary business goal was to increase trust so that users were not only more likely click "Apply Now", but also more likely to complete applications on partner websites. However, because the business model is affiliate-driven, card issuers pay different commission rates for application approvals, which creates possible conflicts of interest for what order cards are listed.
Conflicting Business Goals:
The revenue model for the Credit Cards sub-vertical is based on card application approvals on partner websites, which reduced the amount of direct influence I had on shaping user behavior. Therefore, the primary business goal was to increase conversions (users clicking "Apply Now" button and being redirected to partner website).
The secondary business goal was to increase trust so that users were not only more likely click "Apply Now", but also more likely to complete applications on partner websites. However, because the business model is affiliate-driven, card issuers pay different commission rates for application approvals, which creates possible conflicts of interest for what order cards are listed.
Results
Results
8
New Design System Components
New Design System Components
5+
Compare Tool deployed on 5 product verticals with more on the way.
Compare Tool deployed on 5 product verticals with more on the way.
The Problem
The Problem
How might we help users with varying financial profiles find and trust a credit card recommendation— without compromising editorial credibility or overwhelming them with irrelevant information?
How might we help users with varying financial profiles find and trust a credit card recommendation— without compromising editorial credibility or overwhelming them with irrelevant information?
Discovering User Pain Points of Current Compare Tool
Discovering User Pain Points of Current Compare Tool
I conducted multiple rounds of unmoderated user testing on both mobile and desktop to gain a deeper understanding of where users were having trouble, how they felt about the experience, what their expectations were, and how long it took them to find the information they were looking for and make a decision.
I conducted multiple rounds of unmoderated user testing on both mobile and desktop to gain a deeper understanding of where users were having trouble, how they felt about the experience, what their expectations were, and how long it took them to find the information they were looking for and make a decision.
User Feedback - Mobile
User Feedback - Mobile
User Feedback - Mobile
User Feedback - Desktop
User Feedback - Desktop
User Feedback - Desktop
Summary of Findings
Question
How do I design this experience for both mobile and desktop so that it provides the right amount of information at the right time without overwhelming users and taking up too much screen space, particularly on mobile?
Using Surveys to Figure Out What Credit Card Information Users Value the Most and When
Using Surveys to Figure Out What Credit Card Information Users Value the Most and When
Order of Importance
Order of Importance
Order of Importance
Annual Fee: By far the most important… The clearest cost signal.
Annual Fee: By far the most important… The clearest cost signal.
Credit Score: Context mattered a lot here because overall it's not the most important for making a final decision, however, before users can care about any other feature, they need to know if they even qualify.
Credit Score: Context mattered a lot here because overall it's not the most important for making a final decision, however, before users can care about any other feature, they need to know if they even qualify.
Regular APR: This is another one where context matters, and also points to other interesting insights. APR is a financial safety concern that also plays an important part in the early decision making process. Given that the total amount of American credit card debt has gone up drastically in recent years, this increased importance on APR makes sense.
Regular APR: This is another one where context matters, and also points to other interesting insights. APR is a financial safety concern that also plays an important part in the early decision making process. Given that the total amount of American credit card debt has gone up drastically in recent years, this increased importance on APR makes sense.
Best Feature: This is a data point that is somewhat subjective and chosen by U.S. News. Many people highly valued this kind of highlight, but it makes sense they don't value it as much due to the subjectivity.
Best Feature: This is a data point that is somewhat subjective and chosen by U.S. News. Many people highly valued this kind of highlight, but it makes sense they don't value it as much due to the subjectivity.
Intro Bonus: This one was close with Rewards, and based on our research and other existing research on this topic, Intro Bonus is one of the biggest drivers of people opening a credit card. However, in other studies more people said that long-term features and benefits were the most important factors in their decision. This creates a contradiction between what people say and what they do. In our study, one of the key questions we asked was what information do you look for first, instead of what information is most important for making a decision. What we found was that people said they looked at Intro Bonus before Rewards.
Intro Bonus: This one was close with Rewards, and based on our research and other existing research on this topic, Intro Bonus is one of the biggest drivers of people opening a credit card. However, in other studies more people said that long-term features and benefits were the most important factors in their decision. This creates a contradiction between what people say and what they do. In our study, one of the key questions we asked was what information do you look for first, instead of what information is most important for making a decision. What we found was that people said they looked at Intro Bonus before Rewards.
Purchase Intro APR: Another gatekeeping data point that's important in the early decision process.
Purchase Intro APR: Another gatekeeping data point that's important in the early decision process.
Balance Transfer APR: Another gatekeeping data point that's important in the early decision process.
Balance Transfer APR: Another gatekeeping data point that's important in the early decision process.
Rewards: Attractive rewards were overall more important than Credit Score and APR when it comes to making a final decision when choosing a credit card. Users with higher income and credit score especially tended to rank this highly. However, when taking into consideration all users, we hypothesized it was less important than Credit Score and APR
Rewards: Attractive rewards were overall more important than Credit Score and APR when it comes to making a final decision when choosing a credit card. Users with higher income and credit score especially tended to rank this highly. However, when taking into consideration all users, we hypothesized it was less important than Credit Score and APR
Expert Ratings: Some people did highly value this, but overall it was less important to the majority of people. This was quite surprising. It raises more questions, and would be a good dive into and understand more, but I didn't have the time.
Expert Ratings: Some people did highly value this, but overall it was less important to the majority of people. This was quite surprising. It raises more questions, and would be a good dive into and understand more, but I didn't have the time.
Issuer Name: This was somewhat expected.
Issuer Name: This was somewhat expected.
Identifying Additional Problems with Heuristic Evaluation
Identifying Additional Problems with Heuristic Evaluation
I took time to explore the existing compare tool and test every interaction on both mobile and desktop.
I took time to explore the existing compare tool and test every interaction on both mobile and desktop.
Understanding Strengths & Weaknesses Compared to Competitors
Understanding Strengths & Weaknesses Compared to Competitors
One thing I really like about the designs from our main competitors was that they both had this kiosk concept at the top of the page, which felt like it really helped to orient me when I used them.
One thing I really like about the designs from our main competitors was that they both had this kiosk concept at the top of the page, which felt like it really helped to orient me when I used them.
Synthesizing the Research
Synthesizing the Research
After gathering a lot of information from various sources, I took time to write down what I knew and what I didn't know to help organize my thoughts.
After gathering a lot of information from various sources, I took time to write down what I knew and what I didn't know to help organize my thoughts.
What I Know
What I Know
The current UI and flow is littered with things that create confusion, cognitive overload, complexity and redundancy.
The current UI and flow is littered with things that create confusion, cognitive overload, complexity and redundancy.
Users want more control, options, and information, but at the same time they don't want to be overloaded with information.
Users want more control, options, and information, but at the same time they don't want to be overloaded with information.
The most important content users want to see early in the decision process is Annual Fee, Credit Score Needed, and APR.
The most important content users want to see early in the decision process is Annual Fee, Credit Score Needed, and APR.
The visual design is arguably less pleasant compared to competitors, and makes it hard to scan information.
The visual design is arguably less pleasant compared to competitors, and makes it hard to scan information.
Many competitors show the cards a user has added directly on the screen instead of just showing them at the bottom in a little
"Compare Cards" drawer, which itself has a confusing design.
Many competitors show the cards a user has added directly on the screen instead of just showing them at the bottom in a little
"Compare Cards" drawer, which itself has a confusing design.
I know the business is convinced that the ability to quickly toggle between "Browse Cards" and "Compare Cards" is creating confusion and issues— and they want me to make the experience feel more like a "flow".
I know the business is convinced that the ability to quickly toggle between "Browse Cards" and "Compare Cards" is creating confusion and issues— and they want me to make the experience feel more like a "flow".
I'm going to have to use the new MUI design system, which much fewer and very basic components compare to our old design system. I will have to figure out when and where to update or create new components without overloading the development process.
I'm going to have to use the new MUI design system, which much fewer and very basic components compare to our old design system. I will have to figure out when and where to update or create new components without overloading the development process.
What I Don't Know
What I Don't Know
I don't have a percentage of how many users come to the tool from Google or the navigation menu compared to the percentage of users that come from other credit card pages after they've already selected cards to compare. In other words, how many users come to the tool with cards already selected compared to users with zero cards selected.
I don't have a percentage of how many users come to the tool from Google or the navigation menu compared to the percentage of users that come from other credit card pages after they've already selected cards to compare. In other words, how many users come to the tool with cards already selected compared to users with zero cards selected.
More in-depth data from the analytics team to better understand click paths/journeys of how users are arriving at the Credit Card Compare Tool.
More in-depth data from the analytics team to better understand click paths/journeys of how users are arriving at the Credit Card Compare Tool.
Heatmaps to gain a deeper statistically significant understanding of how far down users are scrolling, what they're clicking on most, rage clicks, and more.
Heatmaps to gain a deeper statistically significant understanding of how far down users are scrolling, what they're clicking on most, rage clicks, and more.
User Interviews to gain a more in-depth understanding of users needs, wants and emotions.
User Interviews to gain a more in-depth understanding of users needs, wants and emotions.
I don't have enough information to definitively say for sure that the ability to quickly toggle between "Browse Cards" and "Compare Cards" is a critical issue or not. The confusion could be coming simply from how the pages themselves are designed.
I don't have enough information to definitively say for sure that the ability to quickly toggle between "Browse Cards" and "Compare Cards" is a critical issue or not. The confusion could be coming simply from how the pages themselves are designed.
I don't know if increasing CTR and Conversion Rate on the Credit Card Compare Tool will subsequently lead to lower CTR and Conversion Rates on other Category pages.
I don't know if increasing CTR and Conversion Rate on the Credit Card Compare Tool will subsequently lead to lower CTR and Conversion Rates on other Category pages.
I don't know have a strong gauge on how much users trust the existing compare tool or the U.S. News brand itself. Trying to design for trust in this situation is quite an ambiguous goal
I don't know have a strong gauge on how much users trust the existing compare tool or the U.S. News brand itself. Trying to design for trust in this situation is quite an ambiguous goal
Brainstorming and Finding Inspiration for the Finer Details
Brainstorming and Finding Inspiration for the Finer Details
Based on what we learned, we decided to make the redesign feel more like a linear flow with the hypothesis it would make the experience less confusing and we could better guide users to a decision.
However, before I started designing, I wanted to utilize our Baymard subscription and explore a wide range of comparison tools— such as Best Buy and Ebay.
I also began sketching out some ideas. The issue of the disclaimer text is something I really wanted to solve because I couldn't find any other tools with that much disclaimer text taking up that much important screen real estate. I felt there should be something at the top of the Browse Cards screen to help orient and guide users on what to do, as well as reduce cognitive load with all of the disclaimer text. I decided to create a big kiosk at the top of the browse page.
This kiosk would make it abundantly clear what the "Browse/Add" screen was and distinguish it from the "Compare Table" screen. The "Add Card" buttons on the kiosk could also be used on the compare table header to make it easier for users to add more cards later on if they wanted.
Based on what we learned, we decided to make the redesign feel more like a linear flow with the hypothesis it would make the experience less confusing and we could better guide users to a decision.
However, before I started designing, I wanted to utilize our Baymard subscription and explore a wide range of comparison tools— such as Best Buy and Ebay.
I also began sketching out some ideas. The issue of the disclaimer text is something I really wanted to solve because I couldn't find any other tools with that much disclaimer text taking up that much important screen real estate. I felt there should be something at the top of the Browse Cards screen to help orient and guide users on what to do, as well as reduce cognitive load with all of the disclaimer text. I decided to create a big kiosk at the top of the browse page.
This kiosk would make it abundantly clear what the "Browse/Add" screen was and distinguish it from the "Compare Table" screen. The "Add Card" buttons on the kiosk could also be used on the compare table header to make it easier for users to add more cards later on if they wanted.
Mapping Out the Flow for a Better Compare Tool
Mapping Out the Flow for a Better Compare Tool
On top of there not being any previous artifact documenting the flow or architecture of the compare tool, I found it helpful to map out the ways users were coming to and from the compare tool. Although I didn't have specific data on where users were coming from or leaving to, it was helpful to zoom out and think systemically about the bigger picture.
On top of there not being any previous artifact documenting the flow or architecture of the compare tool, I found it helpful to map out the ways users were coming to and from the compare tool. Although I didn't have specific data on where users were coming from or leaving to, it was helpful to zoom out and think systemically about the bigger picture.
On top of there not being any previous artifact documenting the flow or architecture of the compare tool, I found it helpful to map out the ways users were coming to and from the compare tool. Although I didn't have specific data on where users were coming from or leaving to, it was helpful to zoom out and think systemically about the bigger picture.
Visualizing a Simpler, Yet Comprehensive Compare Experience
Visualizing a Simpler, Yet Comprehensive Compare Experience
Making the Process of Finding the Right Credit Card Easier, Less Boring and More Trustworthy
Making the Process of Finding the Right Credit Card Easier, Less Boring and More Trustworthy
The MVP gives users the right amount of information at the right time— reducing cognitive load while maintaining control for the users. This design also lays the foundation for rapid future iterations with a new React-based design system that will increase speed and overall performance of the page.
The MVP gives users the right amount of information at the right time— reducing cognitive load while maintaining control for the users. This design also lays the foundation for rapid future iterations with a new React-based design system that will increase speed and overall performance of the page.
Mobile: Reasons WHY for Design Decisions
Mobile: Reasons WHY for Design Decisions
Compare Kiosk: I was inspired by competitors like NerdWallet and BankRate to create something at the top of the screen that would help orient the user and make it super obvious what to do next. One of the biggest challenges was all the required stuff that was required to be at the top of the page including disclaimer text, page description, advertiser disclosure link, and breadcrumbs. Therefore, I decided to use a dark blue gradient background so that I could really make the kiosk pop-off the page and draw attention to it, as well as create a more modern visual feel that helps build trust and express the brand.
Compare Kiosk: I was inspired by competitors like NerdWallet and BankRate to create something at the top of the screen that would help orient the user and make it super obvious what to do next. One of the biggest challenges was all the required stuff that was required to be at the top of the page including disclaimer text, page description, advertiser disclosure link, and breadcrumbs. Therefore, I decided to use a dark blue gradient background so that I could really make the kiosk pop-off the page and draw attention to it, as well as create a more modern visual feel that helps build trust and express the brand.
Compare Kiosk (More): What I originally had in mind was that when the user pressed the "Add Card" button on the kiosk, it would open a modal for browsing/searching cards. However, this would add a lot of scope creep to the project so I presented the product manager with the option of initially launching and testing the "Add Card" button interaction as an anchor scroll to the card list, and then later we could create a browse/search modal based on the results. Another future opportunity is that the Compare Kiosk and the Sticky Compare Drawer could be merged into a single component.
Compare Kiosk (More): What I originally had in mind was that when the user pressed the "Add Card" button on the kiosk, it would open a modal for browsing/searching cards. However, this would add a lot of scope creep to the project so I presented the product manager with the option of initially launching and testing the "Add Card" button interaction as an anchor scroll to the card list, and then later we could create a browse/search modal based on the results. Another future opportunity is that the Compare Kiosk and the Sticky Compare Drawer could be merged into a single component.
Compare Table: My goal was to make the table super easy to scan and read as well as look and feel modern, which is why I chose to use the dark blue gradient again for the main accordion headers as well as add icons. I also used a darker gray background for the sub-categories so they were easily distinguishable from the data cells with white backgrounds. Other design decisions were made for the same reason. One mistake I made with the design mockups, which I addressed with the developers during handoff, was the width of the columns on mobile because ideally the third column would be more visible. This was difficult to do, since I decided to using left-sided page padding in order to create the visual effect I was going for as well as the requirements for certain cells such as star ratings. However, we were able to reduce the width of each column by 8px to allow the third column to be a little more on the screen.
Compare Table: My goal was to make the table super easy to scan and read as well as look and feel modern, which is why I chose to use the dark blue gradient again for the main accordion headers as well as add icons. I also used a darker gray background for the sub-categories so they were easily distinguishable from the data cells with white backgrounds. Other design decisions were made for the same reason. One mistake I made with the design mockups, which I addressed with the developers during handoff, was the width of the columns on mobile because ideally the third column would be more visible. This was difficult to do, since I decided to using left-sided page padding in order to create the visual effect I was going for as well as the requirements for certain cells such as star ratings. However, we were able to reduce the width of each column by 8px to allow the third column to be a little more on the screen.
Quick View Modal: This was another new component that the PM loved and wanted for the MVP, but would needed to be built and hence did add scope creep. For this reason and the fact I didn't have much time, I made the Quick View modal in very simplistic way. I was conflicted on having the the card information left-aligned or center-align or spread out in table format, and ultimately I decided to center-align because I thought left-align looked a little off.
Quick View Modal: This was another new component that the PM loved and wanted for the MVP, but would needed to be built and hence did add scope creep. For this reason and the fact I didn't have much time, I made the Quick View modal in very simplistic way. I was conflicted on having the the card information left-aligned or center-align or spread out in table format, and ultimately I decided to center-align because I thought left-align looked a little off.
Filters: This was an area of this project that had many complications and ultimately I wasn't able to give the amount of thoughtfulness and effort I would have liked to for the MVP. For starters, we had a brand new design system with a very limited number of components and styles. Another designer had already designed a version of our old filter modal using the new MUI system, therefore, it was pressed upon me to use this component and to try not to make changes to it if possible so it doesn't complicate the operational side of things even more. I didn't feel the filter modal was meaningfully different from the what existed on the website already. Also, we wanted to add a lot more categories and issuers to choose from so users had more control, but this would make the user have to scroll a lot to get to the bottom to where they could apply or clear the filters.
Filters: This was an area of this project that had many complications and ultimately I wasn't able to give the amount of thoughtfulness and effort I would have liked to for the MVP. For starters, we had a brand new design system with a very limited number of components and styles. Another designer had already designed a version of our old filter modal using the new MUI system, therefore, it was pressed upon me to use this component and to try not to make changes to it if possible so it doesn't complicate the operational side of things even more. I didn't feel the filter modal was meaningfully different from the what existed on the website already. Also, we wanted to add a lot more categories and issuers to choose from so users had more control, but this would make the user have to scroll a lot to get to the bottom to where they could apply or clear the filters.
Detail Cards: For the browse cards page, the main goal was to make the cards as compact as possible while making it easy to read the important details. Based on user feedback, we wanted it to be possible to see multiple cards on the screen, we wanted it to be easier and faster to scroll and browse cards. The old cards were so long that one cards took up the entire screen. I wanted to make the cards and card list more visually appealing, but in the interest of time I kept the focus on this primary goal. Based on user testing, we discovered the most important information to users were Annual Fee, Credit Needed, and APR— so I used these top three data points and put the other important information in the Quick View modal.
Detail Cards: For the browse cards page, the main goal was to make the cards as compact as possible while making it easy to read the important details. Based on user feedback, we wanted it to be possible to see multiple cards on the screen, we wanted it to be easier and faster to scroll and browse cards. The old cards were so long that one cards took up the entire screen. I wanted to make the cards and card list more visually appealing, but in the interest of time I kept the focus on this primary goal. Based on user testing, we discovered the most important information to users were Annual Fee, Credit Needed, and APR— so I used these top three data points and put the other important information in the Quick View modal.
Desktop Mockups
Desktop Mockups
Laying Out Full Flow and Interaction States for All Breakpoints to Assist Developers
Laying Out Full Flow and Interaction States for All Breakpoints to Assist Developers
Collaborating with Developers to Build New MUI (React) Components
Collaborating with Developers to Build New MUI (React) Components
Collaborating with Developers to Build New MUI (React) Components
"Component cheatsheet" created in Figma.
"Component cheatsheet" created in Figma.
"Component cheatsheet" created in Figma.
Finalized components built in Storybook for testing and documenting.
Finalized components built in Storybook for testing and documenting.
Finalized components built in Storybook for testing and documenting.
Outcome
Outcome
The Credit Cards Compare Tool is still in development, however, the impact of this project has already been significant for the entire company.
The global compare tool components that I created have been deployed for other product verticals and other verticals are in the process of deploying their own versions.
Below is a link to the new Cars comparison tool.
The Credit Cards Compare Tool is still in development, however, the impact of this project has already been significant for the entire company.
The global compare tool components that I created have been deployed for other product verticals and other verticals are in the process of deploying their own versions.
Below is a link to the new Cars comparison tool.
Planned Next Steps
Planned Next Steps
Due to a tight timeline and scope of this large project creeping up, a few issues/challenges that I identified were pushed to be handled during the development and post-MVP phases.
Due to a tight timeline and scope of this large project creeping up, a few issues/challenges that I identified were pushed to be handled during the development and post-MVP phases.
Filter Improvements:
Later in the design process it was brought to my attention that there would be a huge increase in the number of categories (30+) and issuers (30+) that would be added to the filters. Previously, only the top categories were listed in the filters.
On top of that, I used a newly created filter modal component made by another designer for a different project, which was built using our new MUI components and styles. Our team was attempting to prevent the design system from getting too bloated and keep consistency across different products. However, it became clear that the addition of these categories would make the filter modal on mobile super long.
I began research and ideation on making updates to the filter modal component to make it easier to use.
Filter Improvements:
Later in the design process it was brought to my attention that there would be a huge increase in the number of categories (30+) and issuers (30+) that would be added to the filters. Previously, only the top categories were listed in the filters.
On top of that, I used a newly created filter modal component made by another designer for a different project, which was built using our new MUI components and styles. Our team was attempting to prevent the design system from getting too bloated and keep consistency across different products. However, it became clear that the addition of these categories would make the filter modal on mobile super long.
I began research and ideation on making updates to the filter modal component to make it easier to use.
Mobile Compare Table Optimization:
I noticed that the third column on mobile was cut off a little too much. Ideally, the third column would be more visible to the user. This design optimization was planned to be made post-launch.
Mobile Compare Table Optimization:
I noticed that the third column on mobile was cut off a little too much. Ideally, the third column would be more visible to the user. This design optimization was planned to be made post-launch.
Quick View Modal Improvements
Improve visual design and data display of this component.
Quick View Modal Improvements
Improve visual design and data display of this component.
Future Design Ideas Nobody Asked For
Future Design Ideas Nobody Asked For
Throughout this process I discovered and documented ideas for future iterations that the product team liked, but felt would be better for post-MVP.
Throughout this process I discovered and documented ideas for future iterations that the product team liked, but felt would be better for post-MVP.
The Compare Card Kiosk shrinks and sticks to the top of the screen after scrolling past it. This would replace the existing component at the bottom of the screen that shows the cards you've added.
The Compare Card Kiosk shrinks and sticks to the top of the screen after scrolling past it. This would replace the existing component at the bottom of the screen that shows the cards you've added.
Browse/Search Modal for when user clicks on the "Add Card" button in the Compare Table Header and/or Compare Card Kiosk.
Browse/Search Modal for when user clicks on the "Add Card" button in the Compare Table Header and/or Compare Card Kiosk.
Credit Card Detail Cards redesigned to be more visually appealing and modern.
Credit Card Detail Cards redesigned to be more visually appealing and modern.
A "Pin Card/Column" feature on mobile which would move and pin any column to the far left side of the compare table. (Not Shown)
A "Pin Card/Column" feature on mobile which would move and pin any column to the far left side of the compare table. (Not Shown)
