UI / UX banking
This case study presents end‑to‑end UX improvements for U.S. Bank’s home‑renovation estimator experience. The project began with identifying major usability pain points, including cognitive overload, unclear decision pathways, and friction within the shopping‑cart flow. Research insights—such as heat‑mapping drop‑off data, accessibility gaps, and user‑journey obstacles—guided the redesign strategy.
Through high‑fidelity prototypes, the experience was re‑engineered to streamline category selection, strengthen visual hierarchy, and enhance mobile usability. The result is a clearer, more intuitive estimator journey that improves decision‑making and supports a smoother end‑to‑end user flow.
The page also features custom component design, responsive calculator enhancements, infographic‑modal development, and cross‑functional collaboration with developers, vendors, and web‑authoring specialists. These efforts supported intuitive, data‑driven, AI‑assisted creative development and ensured all digital outputs remained consistent with U.S. Bank’s brand standards.
Click on any sub-categories below to explore projects.
CASE STUDY:
DESKTOP PAIN POINTS - MOBILE REDESIGN PROPOSAL
HOME ESTIMATION CALCULATOR
(Kukun 3rd party vendor)
DESKTOP VERSION: IDENTIFIED PAIN POINTS
Analyze the desktop screen capture below to identify the strengths and weaknesses of the current user experience design. The current UI calculator tool suffers from an overload of radio buttons that distract from the intended focal point, resulting in user confusion and reduced clarity in making selections.
When an interface is overloaded, cognitive load rises and users become less likely to continue.
-
Too many choices can overwhelm users. Streamlining the process flow improves usability, making the experience smoother and more efficient.
-
Defining guidance or tooltips helps them build confidence before making a choice.
-
Enhancing visual guidance enables users to regain confidence in their next steps.
-
Error messaging, input fields lacked clarity, required field leading to frustration and drop-off rate.
-
The design did not fully align with brand standards or accessibility best practices.
PROJECT OVERVIEW:
We’re refreshing the “Get an estimate” menu flow shopping cart experience to make it easier to use and more visually engaging. Exploring the opportunity to bring the calculator in-house—currently hosted by third-party vendor Kukun—highlighted some of the most polished framing design concepts with intuitive user flow, home improvement goals for renovation and financial planning.
DESKTOP VERSION - EXPERIENCE: RESEARCH AND SEO INSIGHTS
Heat‑mapping revealed a clear drop‑off point tied to an overload of radio‑button options on the calculator page. Users were confronted with too many choices at once, creating cognitive friction and slowing task progress.
The data showed that this complexity caused hesitation and abandonment before users reached the calculation results.
-
Heat‑mapping revealed a high drop‑off rate caused by an overload of radio‑button options.
-
Users experienced cognitive overload and hesitation when faced with too many categories at once.
-
Data showed that simplifying the initial decision path would improve task completion.
-
Next design phase focused on limiting the first step to the most popular categories.
-
Reduced cognitive load and created a clearer, more intuitive entry point for users.
-
Maintained access to the full set of categories later in the flow for flexibility.
The process was fundamentally service‑oriented—mapping end‑to‑end user journeys, reducing friction at key decision points, and ensuring users could complete tasks with clarity and confidence. I worked through multi‑layered workflows, pulling information from multiple systems, aligning requirements across cross‑functional teams, and designing flows that guided users through complex tasks with fewer errors and more intuitive decision paths.
User pain points identified
-
Cognitive overload from too many radio‑button options
-
Users were confronted with a long, dense list of categories.
-
The volume of choices created hesitation and slowed decision‑making.
-
Many users abandoned the flow before selecting an option.
Lack of clear prioritization
-
All categories appeared equally important, making it hard for users to know where to start.
-
No visual hierarchy or grouping to guide quick scanning.
Decision paralysis
-
Users struggled to identify which category applied to their situation.
-
Too many similar‑sounding options increased confusion.
Poor mobile usability
-
Long lists of radio buttons require excessive scrolling on mobile.
-
Important options were pushed below the fold, reducing visibility.
Misalignment with real user behavior
-
Heat‑mapping showed that only a handful of categories were frequently selected.
-
The interface forced users to sift through many irrelevant options.
Drop‑off before reaching the calculator results
-
The friction at the category‑selection step caused users to exit early.
-
This directly impacted task completion and conversion.
MOBILE VERSION: HI-FIDELITY SCREEN REDESIGN ENHANCEMENT
The updated mobile menu flow improves usability by reducing friction and grouping the most popular categories around the selections users choose most often. Long lists of radio buttons require excessive scrolling on mobile.
-
New grid and list views make browsing more intuitive, while the updated scopes for repairs, modern upgrades, and large‑scale additions provide clearer pathways for every project type.
-
Limiting categories and reducing steps in the process flow improves usability, creating a smoother and more efficient experience.
-
With personalized estimates, flexible login or guest access, and built‑in email functionality that captures and reports results, the experience delivers greater clarity and confidence at every step of the new flow.
OTHER PROJECTS:
CUSTOM ILLUSTRATION / COMPONENTS
Infographic custom imagery
PROJECT: INFOGRAPHIC POP-UP MODAL
Live: Desktop
Project description: Converted infographic imagery into a functional pop-up modal accessible via page link. Users can choose between viewing the full image or engaging with a text-based call-to-action (CTA). The implementation adheres to accessibility standards, ensuring an inclusive experience for all users.
This custom project reimagined a fresh approach to modal window functionality—how pop-up modal windows could deliver layered content without disrupting the user experience. I introduced a toggle feature that flips information in place—no need to close the pop-up.
Work closely with "Web Author Specialist" for user testing to enhance engagement and relevance.
-
Phase 1: a CTA text line that anchors users back to the main page’s text version.
-
Phase 2: currently in development, involves custom coding by the Dev team to expand functionality. It’s a work in progress, and a great example of creative problem-solving and cross-team collaboration.
Custom bar chart driven by interest / APR rate component
PROJECT: CALCULATOR SCREEN RECONFIGURE
Revamped the calculator experience to be fully responsive and optimized for real‑time data inputs.
-
Custom bar chart with new color scheme.
-
Work closely with "Web Author Specialist" for user testing to enhance engagement and relevance.
-
Generate automated data labels to populate above each bar chart. Work closely with development team to establish APIs.
-
Collaborated closely with third-party vendors.
-
Create style-guide to reference custom field inputs with clear, intuitive error messaging.
-
Other calculator projects contributor via live pages: Home equity loan | Debt consolidation calculator
Custom component
implement on Figma
PROJECT: COMPONENT MOSAIC
Developed a custom component and integrated it into the redesigned layout.
-
Utilized Figma’s advanced tools to refresh the page.
-
Developed custom mosaic component.
-
Optimized layout for dynamic content presentation.
-
Refined the design strategy to emphasize storytelling.
-
Guided SEO insights / feedback for design.
-
Work closely with "Web Author Specialist" for user testing to enhance engagement and relevance.
-
A redesign of the current page is underway to enhance usability and visual appeal.