<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Finance App Redesign | Fairway IQ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900">
<!-- Hero Section -->
<div class="relative h-[50vh] md:h-[70vh] w-full">
<img src="/placeholder.svg" alt="Finance App Redesign" class="absolute inset-0 w-full h-full object-cover z-0" />
<div class="absolute inset-0 bg-black/40 flex items-end z-10">
<div class="container mx-auto px-4 pb-12">
<h1 class="text-4xl md:text-6xl font-bold text-white">Finance App Redesign</h1>
</div>
</div>
</div>
<main class="container mx-auto px-4 py-12">
<a href="/work.html" class="inline-flex items-center gap-2 text-gray-600 hover:underline mb-8">
<span>←</span> Back to Projects
</a>
<div class="max-w-4xl mx-auto space-y-16">
<!-- Section Template -->
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Overview</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
A comprehensive redesign of a financial management application, focusing on improving user experience and accessibility.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Overview image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Overview image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Overview image" />
</div>
</section>
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Problem</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
The existing finance app had low user engagement and high drop-off rates. Users found it difficult to navigate and understand their financial data.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Problem image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Problem image" />
</div>
</section>
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Approach</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
I conducted extensive user research to understand pain points and user needs. This informed a complete redesign focused on simplicity and clarity.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Approach image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Approach image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Approach image" />
</div>
</section>
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Process</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
The design process involved user interviews, competitive analysis, wireframing, prototyping, and multiple rounds of user testing.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Process image" />
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Process image" />
</div>
</section>
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Outcome</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
The redesigned app saw a 45% increase in daily active users and a 30% reduction in support tickets related to usability issues.
</p>
<img src="/placeholder.svg" class="w-full rounded-lg" alt="Outcome image" />
</section>
<section>
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Reflections</h2>
<p class="text-lg leading-relaxed text-gray-700">
This project highlighted the importance of user research in understanding the root causes of engagement issues. The iterative testing approach allowed us to refine the design based on real user feedback.
</p>
</section>
</div>
</main>
</body>
</html>