CASE STUDY #1

UX Design: Bank App

Project Overview

A national banking institution planned to expand its reach by launching a mobile banking app that brings key in-person services online. The goal was to create a secure, intuitive experience that allows users to manage accounts, access services, and receive support without friction.

My team was responsible for transforming approved wireframes into high-fidelity mockups while incorporating client feedback, brand standards, accessibility requirements, and interactive states across the application.

The Challenge

Designing a banking app comes with layered complexity:

• Users expect clarity, security, and trust

• Interfaces must handle sensitive data

• Accessibility is non-negotiable, especially for form validation

• Brand, typography, color, imagery, and layout were all predefined and constrained

• The challenge was to elevate usability and polish without deviating from approved wireframes, while ensuring the product felt modern, intuitive, and scalable.

Role & Responsibilities

Developed high-fidelity mockups in Figma based on approved wireframes.

• Integrated client feedback and rubric requirements into final designs

• Applied brand colors, typography, imagery, and logo usage per style guide

• Designed interactive button states (default, hover, active, disabled)

• Created accessible form validation patterns for colorblind users

• Ensured visual hierarchy, readability, and spacing across all screens

• Designed navigation patterns allowing access to all app sections from every screen

Key UX Decisions

Login Screen

• Prioritized simplicity and clarity to reduce cognitive load

• Included clear paths for password recovery and account creation

• Designed CTA button states to communicate interactivity and security

• Reinforced trust through consistent branding and clean layout

Home / Dashboard

• Surfaced account balances, transactions, and primary actions immediately

• Used negative space and hierarchy to reduce overwhelm

• Enabled intuitive navigation to Services and Support from the dashboard

Services

• Organized banking features into clear, scannable sections

• Focused content on user benefits rather than internal banking language

• Designed layouts to support future feature expansion

Support

• Provided multiple contact options including phone, email, address, FAQs, and a form

• Designed accessible form validation using Icons and text labels in addition to color Focus and hover states for all inputs & Inline error messaging for individual fields

• Ensured feedback appears contextually, improving clarity and reducing form errors

Accessibility & Interaction Design

Accessibility considerations were built directly into the UI:

• Color contrast verified using WCAG guidelines

• Form validation used multiple feedback methods beyond color alone

• Focus and hover states were clearly defined for keyboard and assistive technology users

• Button states communicated availability and action clearly across all screens

CASE STUDY #2

CRO, SEO, & UX: PAGE LOAD TIME

The Problem

The Tailored Closet website suffered from slow page load times due to oversized and unoptimized images across key pages. This negatively impacted user experience, mobile performance, and SEO metrics, particularly for first-time visitors arriving via search.

The Plan

I audited image usage across the site, identifying opportunities to reduce file size and improve delivery without altering brand visuals.

Key actions included:

• Resizing and compressing high-impact images while preserving visual clarity

• Replacing legacy assets with optimized formats where supported

• Standardizing image dimensions to align with responsive layouts

• Ensuring optimized assets were consistently applied across templates

Key Takeaways

This work demonstrates how UX extends beyond layout and content into performance, accessibility, and technical execution. Faster pages reduce friction, improve engagement, and directly support conversion and search visibility.

CASE STUDY #3

CRO, SEO, & UX: Home page Redesign

The Challenge

Kitchen Tune-Up’s homepage needed to clearly communicate offerings to first-time visitors while reducing confusion caused by a large menu of services. Users struggled to quickly understand what the company did, which products mattered most, and where to go next.

Additionally, a redesign had to work within Optimizely’s technical and design constraints while improving SEO performance and page load time.

I led UX and content optimization for the homepage redesign, partnering closely with the brand manager to align business goals, content strategy, and technical feasibility within Optimizely.

The Plan

Instead of introducing new navigation complexity, I focused on content hierarchy and reduction.

• Added new content blocks and optimized existing ones to clarify offerings quickly above the fold

• Prioritized the top four products and services to reduce cognitive load and support SEO

• Streamlined content to reduce unnecessary clicks and decision fatigue

• Collaborated with the brand manager to refresh and optimize imagery, improving visual clarity and reducing page load time

• Designed within Optimizely’s CMS and component limitations, adapting layouts rather than forcing custom solutions

What I Learned

This project reinforced the importance of designing for clarity within real-world CMS constraints and showed how thoughtful content prioritization can significantly improve user experience without a full visual overhaul.

CASE STUDY #4

UX DEsign: NONPROFIT APP

Project Overview

ElephAid is a nonprofit organization whose mobile app was experiencing severe usability and functionality issues that directly impacted user trust and donation completion. Core flows were broken, navigation was confusing, and accessibility issues created friction for users attempting to support the organization.

The goal of this project was to redesign the app experience to improve clarity, accessibility, and conversion while aligning with ElephAid’s brand identity and mission.

The Problem

The existing app suffered from critical UX and functional failures:

• Donation page returned a 404 error and did not allow users to donate

• Forms lacked required field indicators and submit actions

• Navigation was confusing and inconsistent

• Accessibility issues with contrast, legibility, and hierarchy

• CTAs were unclear, inconsistent, or misleading

• Overall design appeared unprofessional, reducing trust

• These issues directly conflicted with the organization’s core business objective: encouraging user engagement and donations.

The Process

My Role & Responsibilities:

• Redesigned the app UI and user flows in Figma

• Rebuilt the donation experience from the ground up

• Applied accessibility best practices (WCAG contrast, legibility, feedback)

• Created clear content hierarchy and page structure

• Implemented consistent UI patterns using the provided UI kit

• Incorporated client feedback into revised designs

Donation Experience Redesign

The donation flow was completely rebuilt to eliminate functional and trust issues:

• Created a secure, structured payment form with only essential fields

• Clearly indicated required fields using asterisks

• Added inline visual validation for correct and incorrect inputs

• Included a confirmation modal to reassure users that their donation was successful

• Used visual cues beyond color alone to support accessibility

This transformed the donation experience from broken and frustrating into clear, secure, and confidence-building.

Navigation & Content Structure

To reduce confusion and improve task completion:

• Introduced a clear hamburger menu with large, labeled navigation items

• Added secondary navigation in the footer to surface additional content such as stories, stats, and videos

• Created a logical content flow guiding users from mission → impact → action (donate or volunteer)

• Ensured all pages were clearly titled and interconnected

This structure allowed users to explore content at their own pace while always keeping donation and volunteer actions accessible.

Accessibility Improvements

Accessibility was addressed systematically across the app:

• Color contrast validated using WebAIM tools

• Text and images separated to prevent clipping and legibility issues

• Uniform button shapes and clear CTA labeling

• Visual feedback for all buttons and form interactions

• Removal of non-functional or unnecessary elements such as broken search

These changes ensured the app was usable for a broader audience while meeting accessibility standards.

User-Centered Design Approach

The design addressed the needs of two primary user personas:

• Users seeking reassurance that donations are secure and impactful

• Users wanting clear information about how funds are used

By emphasizing transparency, confirmation, and storytelling through stats and content, the redesigned experience reduced anxiety around payment and strengthened trust in the organization.

Client Feedback Integration

Design iterations incorporated direct client feedback, including:

• Adding required billing and contact fields to the donation form

• Updating typography to match brand guidelines (Avenir and Garamond)

• Enhancing secondary navigation to support task-based user needs

• Adding additional contact and social links without overcrowding primary screens

Feedback was implemented thoughtfully while maintaining usability and visual balance.