portfolio/invitae_registration.html at main · JDHalpin/portfolio · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Invitae Registration Experience - 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 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">
      <div class="flex items-center gap-4">
        <button id="menu-toggle" class="md:hidden w-5 h-3 flex flex-col justify-between" aria-label="Toggle menu">
          <span class="w-full h-0.5 bg-black"></span>
          <span class="w-full h-0.5 bg-black"></span>
          <span class="w-full h-0.5 bg-black"></span>
        </button>
        <a href="index.html" class="font-kaisei text-2xl text-black font-medium hover:text-accent transition-colors">Jeff Halpin</a>
      </div>
      <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" class="text-sm text-black hover:text-accent transition-colors">Work</a>
        <a href="ux-methodology.html" 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>
    </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">&times;</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" class="text-lg text-black hover:text-accent transition-colors">Work</a>
        <a href="ux-methodology.html" 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>

  <!-- PROJECT TITLE & SHORT DESCRIPTION -->
  <section class="px-4 md:px-[50px] pt-8 md:pt-12 pb-4">
    <div class="max-w-5xl mx-auto">
      <h1 class="text-[40px] md:text-[48px] leading-tight text-black font-normal mb-6">INVITAE: User Registration and Quiz Experience</h1>

      <p class="text-lg text-black leading-relaxed">
        Designing an intuitive and empathetic registration flow for a consumer-facing genetic testing portal, balancing complex medical information with accessibility and user confidence.
      </p>
    </div>
  </section>

  <!-- HERO IMAGE -->
  <section class="px-4 md:px-[50px] pt-0 pb-8 md:pb-12">
    <img src="images/380_image_invit.png" alt="Invitae user registration and quiz experience" class="w-full max-w-5xl mx-auto rounded-xl">
  </section>

  <!-- PROJECT CONTENT & METADATA -->
  <section class="px-4 md:px-[50px] py-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">

      <!-- Left: Detailed Description -->
      <div class="md:col-span-2">

        <h3 class="text-2xl text-black font-normal mb-4">About the Project</h3>
        <p class="text-base text-black leading-relaxed mb-4">
          Invitae's consumer portal needed a seamless registration and assessment experience that could guide users through sensitive health decisions. The challenge was creating an interface that felt approachable and supportive while collecting necessary medical history and consent information.
        </p>

        <p class="text-base text-black leading-relaxed mb-4">
          As Senior UX Architect, I led the product design for the registration flow and interactive quiz system. This involved extensive user research with potential patients, understanding their concerns about genetic testing, and designing an experience that builds trust through transparency and clear communication.
        </p>

        <h3 class="text-2xl text-black font-normal mb-4 mt-8">Design Approach</h3>
        <p class="text-base text-black leading-relaxed mb-4">
          The registration experience uses progressive disclosure to reduce cognitive overwhelm. Users are guided through a multi-step process that feels conversational rather than clinical. Each step includes contextual help, clear progress indicators, and the ability to save and return later.
        </p>

        <p class="text-base text-black leading-relaxed mb-4">
          The quiz component incorporates adaptive questioning based on user responses, personalizing the experience while gathering comprehensive health history. Visual feedback and micro-interactions provide reassurance that the system is working and their information is secure.
        </p>

        <p class="text-base text-black leading-relaxed mb-4">
          Accessibility was paramount—ensuring the experience works across devices, assistive technologies, and varying levels of health literacy. We conducted extensive usability testing with diverse user groups to validate our approach.
        </p>
      </div>

      <!-- Right: Metadata Sidebar -->
      <div class="space-y-6">
        <div>
          <h4 class="text-sm text-accent uppercase mb-2">Client</h4>
          <p class="text-base text-black">INVITAE</p>
        </div>

        <div>
          <h4 class="text-sm text-accent uppercase mb-2">Discipline</h4>
          <p class="text-base text-black">Product Design<br>User Experience<br>Consumer Health</p>
        </div>

        <div>
          <h4 class="text-sm text-accent uppercase mb-2">Role</h4>
          <p class="text-base text-black">Senior UX Architect</p>
        </div>

        <div>
          <h4 class="text-sm text-accent uppercase mb-2">Year</h4>
          <p class="text-base text-black">2023</p>
        </div>

        <div>
          <h4 class="text-sm text-accent uppercase mb-2">Focus Areas</h4>
          <p class="text-base text-black">User Registration<br>Interactive Assessments<br>Health Literacy<br>WCAG Compliance</p>
        </div>
      </div>

    </div>
  </section>

  <!-- IMAGE GALLERY -->
  <section class="px-4 md:px-[50px] py-8 mb-12">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-7xl mx-auto">
      <div class="bg-light-gray rounded-xl h-96 flex items-center justify-center">
        <p class="text-text-secondary">Registration Flow</p>
      </div>
      <div class="bg-light-gray rounded-xl h-96 flex items-center justify-center">
        <p class="text-text-secondary">Quiz Interface</p>
      </div>
      <div class="md:col-span-2 bg-light-gray rounded-xl h-96 flex items-center justify-center">
        <p class="text-text-secondary">User Journey Map</p>
      </div>
    </div>
  </section>

  <!-- BACK TO WORK -->
  <section class="px-4 md:px-[50px] py-8 mb-12">
    <a href="index.html" class="inline-flex items-center gap-2 text-accent hover:underline">
      ← Back to Work
    </a>
  </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>

  <script>
    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');
      });
    });
  </script>
</body>
</html>