Hello, World

Overview

Since early 2024, I have served as the Website Manager and Designer for a San Francisco based class action law firm. In February 2025, I expanded my role to also include Digital Marketing Manager. My goal was simple but challenging: to build an integrated digital experience that converts, informs, and reflects the professionalism and empathy of the firm.

This case study combines the full scope of my work, from redesigning the firm's outdated website to optimizing their digital advertising campaigns for lead quality and cost efficiency. It highlights my process, tools, insights, and results, emphasizing how a unified UX and marketing strategy can drive real impact.

Website Redesign: From Friction to Function

Discovery

The original website was outdated, difficult to navigate, and underperforming on mobile. Bounce rates were high, trust was low, and users could not easily find what they needed, especially those under stress seeking legal help.

I conducted a full audit using Microsoft Clarity, Google Search Console, and session replays, alongside stakeholder interviews. I uncovered key issues including:

• Mobile load times exceeding 6 seconds
• Unclear, redundant navigation structure
• Lack of accessibility features
• Development bugs showing on the front-end
• Missing trust signals such as testimonials and case results

Define

Using these insights, I created user flows, personas, and a design plan focused on mobile usability, accessibility, and trust. My goals were to:

• Create intuitive, mobile friendly navigation
• Organize content logically for easy scanning
• Guide users through clear calls to action
• Meet performance and accessibility benchmarks

Design

After developing wireframes and high fidelity prototypes in Figma, I refined the site using principles of mobile-first and accessible design. I ensured high contrast color use, screen reader compatibility, and semantic HTML structure. Typography, spacing, and color were carefully chosen to reduce visual noise and improve clarity. Copy was updated in collaboration with the firm to sound both professional and empathetic.

Build and Launch

I rebuilt the website using WordPress with a custom theme designed for performance and modularity. Key improvements included:

• Reduced page load time to under 2 seconds
• Improved bounce rates on core service pages
• Increased contact form submissions
• Enhanced Core Web Vitals and SEO rankings

This redesign provided a strong foundation for smarter, more targeted digital advertising.

Digital Marketing: From Clicks to Clients

The Challenge

Before I stepped in, the firm was spending heavily on ads but getting few qualified leads. The intake team was flooded with spam and mismatched inquiries. My goal was to improve lead quality, not just quantity.

Strategy

I rebuilt the marketing funnel from the ground up. I started with an audit of previous campaign data, then aligned messaging and targeting across platforms. My approach included:

• Competitor and keyword research using SEMrush
• Writing conversion-focused ad copy based on user pain points
• Designing static and video creatives for Meta, Google, and Reddit
• Creating case-specific landing pages with clear CTAs
• Using UTM tracking to monitor phone clicks and form submissions

Campaign Spotlight: Class Action Lead Generation

For a three-week campaign targeting a class action case, I developed urgency-driven Meta, Reddit, and Google ads and a focused landing page with two options: call or submit a form.

Focusing on just the Meta Ads, we saw the following results:

• Ad Spend: $600
• Website Leads Generated: 210
• Cost Per Lead: ~$2.80
• Lead Match Rate: 94% of leads met case criteria

This campaign became a blueprint for future outreach due to its high efficiency and conversion quality across all platforms.

User Journey Mapping

To ensure that every campaign touchpoint aligned with user expectations, I created a detailed user journey map for prospective clients. This map was built around real behavioral insights, showing how a consumer first encounters an ad, evaluates credibility, engages with a landing page, and ultimately converts through an intake form. By breaking the experience into stages of Attract, Interact, Engage, and Convert, I was able to pinpoint emotional drivers, identify barriers, and design optimizations that guided users smoothly through the funnel. The results were clear: reduced friction, higher engagement rates, and an improved conversion flow that directly supported the campaign’s success.

Ongoing Optimization

I approached every campaign as a dynamic system. I continuously improved performance using:

• A/B testing of headlines, visuals, and CTA phrasing
• Mid-campaign content refreshes to reduce fatigue
• Refined targeting based on platform performance
• Conversion tracking through UTM parameters and event tags

Tools Used

• Meta Ads Manager
• Reddit Ads
• Google Analytics
• SEMrush
• Adobe Creative Cloud
• WordPress with custom landing pages

Outcomes

As a result of these integrated efforts, the firm saw significant improvement in lead quality and marketing efficiency. Cost per acquisition went down, relevant leads increased, and intake processes became more streamlined. Most importantly, the team now has a structured, repeatable campaign process grounded in data.

Reflection

Overseeing both the website and marketing efforts allowed me to create a seamless, user-first experience. The redesigned website supported better ad performance by offering fast, focused landing pages. The campaigns, in turn, reached more of the right people with clarity and empathy. These strategies worked together to build a cycle of trust, action, and measurable growth.

This project confirmed what I believe deeply: that great marketing is great UX. It is about understanding people, removing obstacles, and guiding them toward helpful outcomes. I continue to maintain and improve these systems, always listening to data and designing with care.

If you are looking for this kind of results-driven partnership, I would love to help with your next digital challenge.

Contact Me TodayBack to the top

Overview

The Tractor Simulator project was a collaborative development effort for the Conner Prairie Living History Museum. Our team was tasked with creating a functional digital interface for a prototype simulator expected to debut in the museum's "Food, Farm, and Energy Experience" in 2030. The goal was to bridge the gap between historical farming and contemporary precision agriculture through an interactive simulation.

My primary role focused on establishing the core functional base, including seasonal task logic and UI/UX design. I collaborated with a 3D modeler and a game developer to ensure the interface was both technically sound and accessible for a diverse museum audience.

• Timeline: 1 Semester (N420 Project Development)
• Team Size: 3 Students + Client/Professor
• Tools & Tech: Unity, Blender, Maya, Figma, GitHub Enterprise, C#

Discovery and Objective

We identified a significant educational gap: while agriculture is a high-tech industry, visitors often view it through a purely historical lens. Our key objectives included:

• Educating visitors on seasonal tasks (planting, spraying, harvesting)
• Demonstrating the difference between manual and GPS-guided driving
• Creating a responsive system for physical interactive controls
• Designing an intuitive UI for a public, continuous-use environment

UX Strategy and Design Thinking

To ensure the simulator was accessible to everyone from children to seniors, I focused on a UX-first approach. We leveraged Conner Prairie’s brand guidelines to create a UI that felt like a natural extension of their physical exhibits. By mapping user flows for "Manual vs. GPS" modes, we simplified complex agricultural data into clear, visual performance feedback.

Technical Implementation

The project required a deep integration of 3D assets and game logic. While our modeler developed the equipment in Blender, I focused on the interaction layer within Unity to ensure the physics felt authentic.

Development Highlights:

• Unity Development: Built physics-based driving mechanics for tractors and implements.
• 3D Integration: Optimized Blender/Maya models for real-time performance in the simulator.
• Physical Controls: Tested logic with physical steering wheels and pedals for a responsive experience.

Project Contributors:

• Kiersten Foulk: Project Manager, UI/UX
• Khidany Ruiz: Game Design & Developer
• Jake Muilenburg: 3D Modeler

Collaboration Process

Our collaboration relied on GitHub Enterprise provided by Indiana University to manage complex version control for Unity.

• Version Control: Centralized platform for code review and issue tracking.
• Asset Pipeline: Seamless integration between Blender exports and Unity prefabs.
• Client Reviews: Regular check-ins with Dr. Ronda Hamm (Conner Prairie) to align with museum goals.

Results and Deliverables

• Working prototype of a tractor-driving mini-game
• Documented platform for future student expansion
• Accurate 3D models of modern planters, sprayers, and harvesters
• Successful testing of physical touchscreen and pedal interfaces

Lessons Learned

• Simplicity in UX: Designing for a museum means the interface must be understood in seconds without a tutorial.
• Physics vs. Playability: Balancing realistic tractor physics with a "fun" arcade feel was essential for engagement.
• Future-Proofing: Building a modular system ensures the project can be expanded as the 2030 launch approaches.

This project demonstrated my ability to tackle real-world client challenges by combining complex technical development with user-centered design. It stands as a solid foundation for the future of interactive education at Conner Prairie.

Contact Me Today Back to the top

Overview

The Midwest Festival Website was a collaborative class project designed to showcase music and cultural festivals across the Midwest United States. The goal was to create a responsive, interactive website where users could explore festival details, purchase tickets, and download digital tickets in PDF format. We aimed to deliver an engaging user experience with a strong foundation in modern frontend design principles.

Our team consisted of three students. My primary role was UX Designer and Frontend Developer, responsible for designing the interface, implementing the frontend layout and components, and ensuring a seamless user experience. My two teammates focused on setting up and maintaining the backend infrastructure, including the server, database, and PDF ticket generation functionality.

• Timeline: 2 weeks
• Team Size: 3 Students
• Tools & Tech: HTML, CSS, JavaScript, Node.js, SQLite, GitHub, Discord, jsPDF

Discovery and UX Research

We began the project by identifying key user goals and functionality needs:

• Highlight the unique character of Midwest festivals
• Make festival details and ticket access seamless across all devices
• Integrate dynamic functionality such as downloadable tickets
• Design an intuitive and fun experience for a diverse audience

To inform our direction, we studied real festival websites to analyze UX patterns, navigation styles, and visual strategies. This led to several key design priorities:

• Clear, mobile-friendly navigation
• Strong visual hierarchy using cards and carousels
• Personalized user interactions like downloadable PDF tickets

UX Strategy and Design Thinking

To guide the design process, I developed detailed user personas representing the primary audience for the Midwest Festival website. By centering design decisions around their goals, behaviors, and pain points, I was able to shape the site’s layout, content, and interactive elements to support intuitive exploration, seamless ticket purchasing, and meaningful engagement. Grounding the project in these user-centered insights ensured the website delivered both a fun and practical experience for diverse festival-goers.

I then approached the interface from a UX-first mindset. I mapped out primary user flows and interactions:

• Browsing Festivals: The homepage features a dynamic carousel of festival highlights.
• Viewing Details: Clicking a card opens detailed festival information with dates, lineup, and location.
• Getting Tickets: A clean form allows users to input their details and generate a downloadable PDF ticket.

Wireframes were first sketched by hand, then developed into responsive layouts using HTML and CSS. Every screen was designed with a mobile-first approach to support users on the go.

Technical Implementation

My teammates built the backend architecture using Node.js and SQLite. Meanwhile, I was tasked with leading the frontend development. I built the UI using HTML, CSS, and JavaScript, integrating components like:

Frontend Highlights:

• Responsive UI layout using Flexbox and CSS Grid
• Festival carousel styled to emulate a Spotify-like browsing experience
• Card-based interface pulling live festival data from the backend

Backend Features (by teammates):

• Node.js server to handle requests
• PDF ticket generator using a JavaScript library (jsPDF)
• SQLite database to store and manage festival and ticket data

Collaboration Process

Our team worked remotely using GitHub for version control and Discord for communication.

• GitHub Project Boards helped track progress and assign tasks.
• Branch-based Workflow: Each team member worked on a separate feature branch, which we merged via pull requests.
• Discord Check-ins: We held daily stand-ups to resolve blockers and coordinate changes.
• Pair Programming: For complex challenges, we conducted real-time coding sessions using screen sharing.

Key Features and Deliverables

• Dynamic PDF ticket generator with custom branding and user data
• Festival carousel that dynamically pulled data from the database
• Fully responsive layout optimized for mobile and tablet
• Custom-built UI components using vanilla JavaScript

Lessons Learned

• Communication is essential. Regular updates helped prevent versioning issues and misaligned code.
• Consistency in design saves time. Defining reusable components early allowed for easier scaling.
• Client-side functionality like PDF generation taught us a lot. We gained hands-on experience with the Document Object Model and real-time file generation.

This project was a hands-on demonstration of collaborative UX design and development. It strengthened my frontend skills, deepened my understanding of design systems, and prepared me for real-world team workflows involving both design and engineering disciplines.

Contact Me TodayBack to the top

Overview

In 2023, I had the pleasure of working with a local nonprofit based in Auburn, Indiana, dedicated to building a stronger, more connected community for veterans. Their work is hands on and heartfelt, funded through local sporting events, merchandise sales, and community led initiatives. The organization is family owned and operated, and needed a digital presence that could reflect their values and serve their goals while avoiding the need for ongoing technical support.

My role was to craft a digital brand experience that was approachable, easy to manage, and aligned with their mission to empower and serve.

Timeline: 2023
Tools Used: Squarespace, Adobe Creative Cloud, Figma, Google Drive, DSLR Photography
Scope: UX Design, Website Development, Brand Guideline Creation, Content Strategy, Photography, Print Design

Discovery

To kick off the project, I met with the founders at their physical location in Auburn. This in person collaboration allowed me to understand their daily work, the challenges they faced managing their digital tools, and the personal mission behind their brand.

We discussed product sales, upcoming events, and long term goals. I also conducted on-site photography during this visit to ensure we had original, meaningful imagery that showcased the people and community behind the mission. These photos were later used throughout the website and printed materials to create emotional resonance and authenticity.

• Learning their goals and pain points through discussion
• Capturing professional on site imagery
• Observing how they interact with technology and social media
• Defining user needs for both audiences: supporters and internal staff

Define

There were four clear goals for their digital platform:

• Raise awareness about fundraising events
• Share their story and mission with the community
• Sell branded merchandise to support veteran initiatives
• Maintain the website in house without ongoing developer support

The target audience was primarily local residents aged 35 and older, many with military affiliations. I translated these needs into a strategy that focused on legibility, clarity, and emotional storytelling.

• A clean, community centered interface
• Easy to follow site navigation for events, shopping, and mission pages
• Strong trust building elements including original photography and testimonials
• Back end simplicity for content management

Design

To ensure the nonprofit could manage the site independently, I selected Squarespace as the platform for its drag and drop interface and built in design tools. This allowed for:

• Quick edits to text, images, and event details
• Seamless e-commerce setup
• Modular content blocks that could be duplicated or removed as needed

I also developed a full brand guideline system, including typography, colors, and logo usage. This helps maintain consistency across web, social, and print materials as they create them in the future.

My design priorities were rooted in accessibility and mobile usability. I incorporated clear call to action buttons, mobile optimized layouts, and intuitive content flow. Each decision was made to reflect the organization’s values of transparency, service, and pride in community.

• Direct calls to action to shop or RSVP to events
• Real photography in banners and galleries
• Mobile responsive templates
• Clear product filtering and checkout flow

Implementation

After design approval, I built and launched the live site with e-commerce, event listings, and contact tools fully integrated. I also hosted a walkthrough session with the team to train them on content updates and product management. A digital user manual was provided as a reference for future changes.

I designed print flyers using the same branding system to support physical promotion at community events, extending their identity beyond digital spaces.

Results

The nonprofit had established a professional online presence that reflected their story and supported their goals.

• First ever branded website with e-commerce and event listings
• Consistent brand identity across web and print
• Backend designed for independent updates
• Improved community engagement and local visibility

Reflection

This project reinforced that UX design is not only about the user who visits the site, but also about the person who maintains it. By listening to the nonprofit’s needs and building tools around their real capacity, I was able to deliver a solution that felt empowering, not overwhelming.

Their mission is rooted in connection. My goal was to create a platform that honored that mission, supported local fundraising efforts, and gave the team the autonomy to grow their impact through design that works for them.

If you are looking for human centered web design that blends storytelling with strategy, I would love to hear about your mission.

Contact Me TodayBack to the top