-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathux-methodology.html
More file actions
298 lines (265 loc) · 16.2 KB
/
ux-methodology.html
File metadata and controls
298 lines (265 loc) · 16.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UX Process & Methodology - Jeff Halpin</title>
<link rel="icon" type="image/x-icon" href="/projects/portfolio/favicon.ico?v=2" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Lato:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Kaisei Opti', serif;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'off-white': '#FFFEF9',
'white': '#FFFFFF',
'near-black': '#181818',
'light-gray': '#F7F7F7',
'aquamarine': '#61EDD8',
'accent': '#079E87',
'text-primary': '#181818',
'text-secondary': '#DFE1E3',
'accent-primary': '#61EDD8',
'background-base': '#FFFFFF',
'mid-gray': '#DFE1E3',
'surface-default': '#FFFEF9',
'border-subtle': '#F7F7F7',
'text-tertiary': '#526AC2',
},
fontFamily: {
'kaisei': ['Kaisei Opti', 'serif'],
'lato': ['Lato', 'sans-serif'],
'playfair': ['Playfair Display', 'serif'],
'poppins': ['Poppins', 'sans-serif'],
}
}
}
}
</script>
</head>
<body class="bg-[#FFFEF9] font-kaisei min-h-screen relative">
<!-- HEADER -->
<header class="bg-[#FFFEF9] border-b-0 md:border-b md:border-neutral-200 sticky top-0 z-40 h-[60px]">
<div class="flex items-center justify-between gap-4 max-w-7xl mx-auto h-full px-4">
<a href="index.html" class="font-kaisei text-2xl text-black font-medium hover:text-accent transition-colors">Jeff Halpin</a>
<nav class="hidden md:flex items-center gap-6">
<a href="index.html#about" class="text-sm text-black hover:text-accent transition-colors">About</a>
<a href="index.html#work" class="text-sm text-black hover:text-accent transition-colors">Work</a>
<a href="index.html#approach" class="text-sm text-black hover:text-accent transition-colors">Approach</a>
<a href="contact.html" class="text-sm text-black hover:text-accent transition-colors">Contact</a>
</nav>
<button id="menu-toggle" class="md:hidden w-[35px] h-[44px] flex flex-col items-center justify-center gap-[8px] p-2" aria-label="Toggle menu">
<span class="w-full h-[2px] bg-black"></span>
<span class="w-full h-[2px] bg-black"></span>
</button>
</div>
</header>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden fixed inset-0 z-50 bg-black/50 md:hidden">
<div class="bg-[#FFFEF9] w-4/5 h-full p-6 flex flex-col gap-6">
<button id="menu-close" class="self-end text-2xl" aria-label="Close menu">×</button>
<nav class="flex flex-col gap-4">
<a href="index.html#about" class="text-lg text-black hover:text-accent transition-colors">About</a>
<a href="index.html#work" class="text-lg text-black hover:text-accent transition-colors">Work</a>
<a href="index.html#approach" class="text-lg text-black hover:text-accent transition-colors">Approach</a>
<a href="contact.html" class="text-lg text-black hover:text-accent transition-colors">Contact</a>
</nav>
</div>
</div>
<!-- HERO IMAGE (full-bleed) -->
<section>
<img src="images/380_image_process.png" alt="UX Process - Discovery, wireframing, and prototyping" class="w-full max-w-[1440px] mx-auto">
</section>
<!-- PROJECT TITLE & SHORT DESCRIPTION -->
<section class="px-4 md:px-0 pt-[80px] pb-[48px]">
<div class="max-w-[1200px] mx-auto">
<h1 class="text-[40px] md:text-[48px] leading-tight text-text-primary font-normal mb-6">UX Process & Methodology</h1>
<p class="text-lg text-text-primary leading-relaxed">
A comprehensive overview of my user experience design process, from initial discovery through delivery, demonstrating a structured approach to solving complex design challenges.
</p>
</div>
</section>
<!-- PROJECT CONTENT & METADATA -->
<section class="px-4 md:px-0">
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row gap-[32px] md:gap-[64px]">
<!-- Left: MainContent -->
<div class="md:w-[750px] flex flex-col gap-[32px]">
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">My UX Approach</h3>
<p class="text-base text-text-primary leading-relaxed">
Over 15 years of executing digital products, I've refined a systematic approach to user experience design that balances strategic thinking with practical execution. My methodology adapts to project constraints while maintaining rigor in understanding user needs and validating design decisions.
</p>
</div>
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">Discovery & Research</h3>
<p class="text-base text-text-primary leading-relaxed mb-4">
Every project begins with understanding the problem space. I conduct stakeholder interviews, competitive analysis, and heuristic evaluations to establish baseline understanding. When possible, I conduct qualitative research with end users—interviews, contextual inquiry, and usability testing sessions that reveal not just what users do, but why they do it.
</p>
<p class="text-base text-text-primary leading-relaxed">
I facilitate collaborative workshops with cross-functional teams to align on goals, constraints, and success metrics before any design work begins. This upfront investment prevents costly pivots later and ensures we're solving the right problems.
</p>
</div>
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">Wireframing & Information Architecture</h3>
<p class="text-base text-text-primary leading-relaxed">
With research insights in hand, I develop information architectures and user flows that map to real user mental models. Low-fidelity wireframes allow rapid iteration on structure and hierarchy without getting distracted by visual polish. I work in close collaboration with product managers and developers during this phase to ensure technical feasibility.
</p>
</div>
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">Prototyping & Validation</h3>
<p class="text-base text-text-primary leading-relaxed mb-4">
Interactive prototypes transform static wireframes into testable experiences. I use Figma for high-fidelity prototyping, building realistic flows that stakeholders and users can experience. Prototype fidelity matches the validation goal: paper sketches for concept testing, clickable prototypes for usability validation, coded prototypes for technical validation.
</p>
<p class="text-base text-text-primary leading-relaxed">
Usability testing happens throughout the design process, not just at the end. I conduct moderated sessions with 5-8 participants per round, observing where designs succeed and where they create friction. These sessions directly inform design iterations, creating a tight feedback loop between hypothesis and validation.
</p>
</div>
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">UI Design & Handoff</h3>
<p class="text-base text-text-primary leading-relaxed mb-4">
Visual design brings the experience to life while respecting established design systems and brand guidelines. I design with mobile-first principles, ensuring experiences work across device contexts. My designs include detailed specifications, interaction states, and edge cases—not just happy path scenarios.
</p>
<p class="text-base text-text-primary leading-relaxed">
Developer handoff includes comprehensive documentation, design system tokens, and collaborative sessions where I walk through interaction patterns and answer implementation questions. I remain engaged during development to address questions and validate that the implemented experience matches design intent.
</p>
</div>
<div>
<h3 class="text-2xl text-text-primary font-normal mb-4">Iteration & Measurement</h3>
<p class="text-base text-text-primary leading-relaxed">
Launch isn't the end—it's the beginning of learning. I work with analytics teams to establish meaningful metrics tied to user and business goals. Post-launch, I monitor quantitative data and qualitative feedback to identify opportunities for improvement. Successful products are never "done"—they evolve based on real-world usage.
</p>
</div>
</div>
<!-- Right: Metadata Sidebar -->
<div class="md:w-[360px] md:flex-shrink-0 p-[24px] flex flex-col gap-[24px] h-fit">
<div>
<h4 class="text-sm text-accent uppercase mb-2 tracking-wide">Core Competencies</h4>
<p class="text-base text-text-primary">User Research<br>Information Architecture<br>Interaction Design<br>Usability Testing<br>Workshop Facilitation</p>
</div>
<div>
<h4 class="text-sm text-accent uppercase mb-2 tracking-wide">Research Methods</h4>
<p class="text-base text-text-primary">Qualitative Interviews<br>Heuristic Evaluation<br>Usability Testing<br>Contextual Inquiry<br>Competitive Analysis</p>
</div>
<div>
<h4 class="text-sm text-accent uppercase mb-2 tracking-wide">Design Methods</h4>
<p class="text-base text-text-primary">Wireframing<br>Prototyping<br>Design Systems<br>Mobile-First Design<br>Accessibility Standards</p>
</div>
<div>
<h4 class="text-sm text-accent uppercase mb-2 tracking-wide">Tools</h4>
<p class="text-base text-text-primary">Figma<br>User Testing Platforms<br>Analytics Tools<br>Prototyping<br>Collaboration Tools</p>
</div>
<div>
<h4 class="text-sm text-accent uppercase mb-2 tracking-wide">Experience</h4>
<p class="text-base text-text-primary">15+ years<br>Healthcare, Finance, Consumer Tech</p>
</div>
</div>
</div>
</section>
<!-- CASE STUDIES SECTION -->
<section class="px-4 md:px-0 py-8 mb-12">
<div class="max-w-[1200px] mx-auto">
<h3 class="text-2xl text-text-primary font-normal mb-6">See This Process in Action</h3>
<p class="text-base text-text-primary leading-relaxed mb-6">
Each project in my portfolio demonstrates different aspects of this methodology applied to real-world challenges. From accessibility design to pharmaceutical interfaces to AR experiences, the underlying process remains consistent while adapting to unique constraints and opportunities.
</p>
<a href="index.html" class="inline-flex items-center gap-2 text-accent hover:underline text-lg">
View Case Studies →
</a>
</div>
</section>
<!-- BACK TO WORK -->
<section class="px-4 md:px-0 py-8 mb-12">
<div class="max-w-[1200px] mx-auto">
<a href="index.html" class="inline-flex items-center gap-2 text-accent hover:underline font-lato">
← Back to Work
</a>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-[#FFFEF9] border-t border-[#F6F6F6] px-4 pt-6 pb-16 md:pb-8 flex flex-col items-center justify-center gap-4 text-sm text-black text-center">
<p>© 2026 Jeff Halpin</p>
<div class="flex items-center justify-center gap-6">
<a href="https://www.linkedin.com/in/jeffrey-halpin/" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
</svg></a>
<a href="https://github.com/JDHalpin" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg></a>
<a href="mailto:jeff.halpin@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg></a>
</div>
</footer>
<!-- LIGHTBOX MODAL -->
<div id="lightbox" class="hidden fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
<button id="lightbox-close" class="absolute top-4 right-4 text-white text-3xl hover:text-accent">×</button>
<img id="lightbox-img" src="" alt="" class="max-w-full max-h-[90vh] rounded-lg">
</div>
<script>
// Mobile menu logic
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle?.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
});
menuClose?.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
});
mobileMenu?.addEventListener('click', (e) => {
if (e.target === mobileMenu) {
mobileMenu.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
});
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
});
});
// Lightbox functionality
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxClose = document.getElementById('lightbox-close');
// Open lightbox on image click
document.querySelectorAll('.lightbox-trigger').forEach(img => {
img.addEventListener('click', () => {
lightboxImg.src = img.src;
lightboxImg.alt = img.alt;
lightbox.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
});
});
// Close lightbox on close button click
lightboxClose?.addEventListener('click', () => {
lightbox.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
});
// Close lightbox on backdrop click
lightbox?.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
});
// Close lightbox on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !lightbox.classList.contains('hidden')) {
lightbox.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
});
</script>
</body>
</html>