Banking | michellevalentine

UI / UX BANKING PROJECTS

Maintained US Bank brand standards while using Figma to design storytelling intuitive page layouts and develop custom components.

Key Factors:

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 the web specialist and development team to implement and test imagery components.
Develop zero‑height style guides and standardized error‑message guidelines.
Delivered a comprehensive plan that integrated SEO data, business objectives, and user insights to streamline navigation and improve engagement.
Produced actionable design briefs for widgets and modals to elevate key pages.
Create custom illustrations for the brand team and contributed to the global design library for broader usage.
Partnered with the product owner to align on vision goals and clarify the scope of work, ensuring design solutions supported strategic objectives and met user needs effectively.

Explore the projects below to see how their unique purposes inspired custom designs that blend illustrative imagery with storytelling.

PROJECTS - CUSTOM ILLUSTRATION / COMPONENTS

Infographic custom imagery

PROJECT: INFOGRAPHIC POP-UP MODAL

Live page: 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: FIGMA SCREEN LAYOUT RECONFIGURE

PDF pages: Desktop | Mobile

Live page: Desktop

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: FIGMA COMPONENT MOSAIC

PDF page: Desktop

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.

CASE STUDY - MOBILE REDESIGN PROPOSAL

Home Improvement custom Illustration imagery

PROTOTYPE OF SCREEN FLOWS

PDF page: Mobile screens enhancement

Project overview:

We’re refreshing the “Get an estimate” 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, supporting seamless home improvement planning.

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.

Home Estimation Calculator (Kukun 3rd party vendor)

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 current screen and explore the in‑depth experience.

Users found the estimation process confusing and visually outdated.
The calculator was hosted externally, creating friction in the user journey.
Error messaging and input fields lacked clarity, leading to frustration.
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.

Click here to review pdf summary brief.

DESIGN PROCESS:

Conducted user surveys 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 IN DARK MODE VS LIGHT 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.