UI / UX BANKING PROJECTS
Adopted the enterprise experience designing human-centered, scalable digital products for financial services. Maintained US Bank brand standards while using Figma to design storytelling intuitive page layouts and develop custom components. Create and carry out research plans, user surveys, and designs interactive and visual design solutions including wireframes, UI design comps, specifications, and interactive prototypes. Enables the delivery of high-quality enterprise and customer facing products, rapidly and iteratively.
​​
Key Factors:
-
Focus on mobile design with understanding the user’s goals and context, then translating those needs into a clear, intuitive interface that works beautifully within the constraints of a small screen.
-
Prioritized empathetic design to enhance the user journey and improve overall experience.
-
Each page was structured around user intent and friction points identified through SEO analytics, user surveys & accessibility research.
-
Collaborated with stakeholders, product owners, and the web development team to implement and test imagery components.​​​
CASE STUDY - MOBILE REDESIGN PROPOSAL
PROJECT OVERVIEW: ​
​We’re refreshing the “Get an estimate” menu flow 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.
​
HOME ESTIMATION CALCULATOR
(Kukun 3rd party vendor)
MOBILE ENHANCEMENT:
The updated mobile menu flow enhances usability by minimizing friction and consolidating categories around the most commonly chosen selections. 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.
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.​
MOBILE REDESIGN
DESKTOP PAIN POINTS:
​
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.
Examine the captured desktop view or navigate to the live page to analyze the end‑to‑end experience, including layout behavior, component states, and interaction patterns.
​
-
Users found the estimation process overwhelming and visually outdated with overload of radio buttons.
-
The calculator was hosted externally, creating friction in the user journey.
-
Error messaging, input fields lacked clarity, required field leading to frustration and drop-off rate. It would help to include tool-tip.
-
The design did not fully align with brand standards or accessibility best practices.
SEO KEY TAKE AWAY:
​​
An effective marking hook to attract prospects.
-
69% calculate visits were campaign driven vs. 16% Home Loan.
-
Prospects showed 2.5x's more conversion.
-
Overall does not appear to boost conversions within the current or next visit window.
-
Empathetic design and clear communication are critical in financial estimation tools.
-
Collaboration across design, product, and vendor teams ensures both usability and technical feasibility.
-
Building reusable components strengthens long‑term design efficiency.
DESIGN PROCESS:
​
-
Conducted user surveys, accessibility, and reviewed SEO analytics to identify friction points in the estimation flow.
-
Created Figma frame screens for both desktop and mobile, focusing on responsive layouts and simplified navigation.
-
Partnered with third‑party vendors and development teams to establish APIs, integrate style guides, and ensure technical feasibility.
-
Designed custom field inputs with clear error messaging, improved visual hierarchy, and consistent branding.
-
Applied empathetic design principles to ensure inclusivity and ease of use across devices.
SUGGESTED PROJECT ENHANCEMENT:
Streamline the budgeting process using a customized home improvement loan calculator designed to estimate costs across projects—whether routine repairs, modern upgrades, or large‑scale additions. Offering personalized estimates, flexible login or guest access, add email functionality with captured result reporting, it ensures clarity and confidence in every step.
RESEARCH OUTCOME AND IMPACT:
​
-
Streamlined navigation and clearer inputs reduced user confusion.
-
Visually engaging layouts encouraged users to complete the estimation process.
-
Components created for this project were reused across other calculators, saving development time.
-
The redesign supported strategic goals by keeping users within the brand ecosystem rather than redirecting them externally.
DARK MODE VS LIGHT MODE:​
​
Designed responsive Figma prototypes of the Kukun Home Estimation Calculator in both dark and light modes.
-
Each version maintains consistent usability while offering users visual flexibility.
-
Dark mode emphasizes accessibility in low‑light settings, while light mode provides a clean, professional interface.
-
This dual approach demonstrates adaptability to user preferences and modern UI standards.
ACCESSIBILITY MODE:
​
Designed both dark and light mode versions of the Kukun Calculator with accessibility at the core. Features include WCAG‑compliant contrast ratios, screen reader labels, keyboard navigation, and error messaging that combines text and icons. This ensures usability for all audiences while demonstrating inclusive design practices.​​
-
Charts designed with color + pattern differentiation for color‑blind accessibility.
-
Optimized for mobile, tablet, and desktop to support diverse user needs.
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
​​
Redesigned screens to showcase the calculator across both desktop and mobile platforms, ensuring a responsive and user-friendly experience.
-
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
Proposed a redesigned layout using custom-built component's while maintaining US Bank standards.
-
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.​