-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathatriadesignsystem.html
More file actions
526 lines (511 loc) · 32.9 KB
/
atriadesignsystem.html
File metadata and controls
526 lines (511 loc) · 32.9 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
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atria Senior Living Design System Case Study</title>
<!-- Facebook Webmaster Verification -->
<meta name="facebook-domain-verification" content="tn7v4bizibt6caovtpx6hg0hopa4zb" />
<!-- Facebook OG -->
<meta property="og:title" content="Veronica Rivera. Experience Designer from Louisville, KY" />
<meta property="og:description" content="Creating wonderful experiences for people and solutions for organizations that champion diversity, equity, inclusion, and accessibility." />
<meta property="og:image" content="https://www.justvcreative.com/Images/opengraph.jpg" />
<meta property="og:url" content="https://www.justvcreative.com/" />
<meta property="og:type" content="website" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Font Awesome 6 SVGs -->
<script src="https://kit.fontawesome.com/c7106c35df.js" crossorigin="anonymous"></script>
<!-- Google Fonts: Maven Pro 400, 500, 700 -->
<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=Maven+Pro:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Main CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3SP1EQXR1S"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3SP1EQXR1S');
</script>
<!-- Microsoft Clarity -->
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "b8wo7brccn");
</script>
</head>
<body>
<header>
<nav class="py-2">
<div class="container text-center text-md-start d-md-flex justify-content-md-between align-items-md-center">
<div id="brand" class="d-flex flex-column flex-md-row align-items-md-center flex-grow-1">
<a class="logo mx-auto mx-md-0" href="index.html"><img src="Images/logo.svg" alt="Veronica Rivera Logo"></a>
<div class="flex-column">
<p class="name mb-0">Veronica Rivera</p>
<p class="job-title mb-0">Experience Designer</p>
</div>
</div>
<div class="menu">
<ul class="nav flex-column flex-md-row">
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="casestudies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="designSystemCaseStudy">
<section id="hero" class="container">
<div class="row justify-content-between align-items-center my-lg-5 py-lg-5">
<div class="col-md-6 my-4 my-md-0">
<p class="eyebrow">Product Design</p>
<h1>Multi-Brand Design System for Senior Living</h1>
</div>
<div class="col-md-6">
<img src="casestudies-img/asldesignsystem/asldesignsystem-hero.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<section id="projectDetails" class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-10 col-lg-8">
<h2>Project Scope</h2>
<h3>Team</h3>
<p>Digital Marketing Technology Stack</p>
<h3>Role</h3>
<p>Lead UX/UI Designer</p>
<h3>Deliverables</h3>
<ul>
<li>Design system with a component library</li>
<li>New Atria Senior Living website built with the design system with desktop, tablet and phone views</li>
</ul>
<h3>Goals</h3>
<ul>
<li>Create a design system with a component library that sets the standards for user interface design at Atria Senior Living</li>
<li>Have the ability to use the design system across all Atria's brands and be able to tailor the components to fit the individual brand's style</li>
<li>Use the design system to create Desktop, tablet, and phone layouts and prototypes</li>
</ul>
<h3>Tools</h3>
<p>Figma</p>
<h3>Problem Statement</h3>
<p>Atria Senior Living needed a new website to bring their brand current in the senior living space. The previous site was difficult to maintain, did not have consistent design templates, and was challenging to navigate. It also had many accessibility issues from the design down to functionality.</p>
<p>Atria's Digital Marketing and Product Innovation department organized the Digital Marketing Technology Stack (DMTS) team to build the website with the latest version of WordPress with Nuxt.JS and Bootstrap 4. One of the requirements was to build the site using a component system to make changes on a component level in WordPress.</p>
<p>Before being part of the team, an outsourced designer created the initial designs for the website in Sketch. Those designs were a step in the right direction but needed improvements.</p>
<ul>
<li>The designs did not align with the Bootstrap grid.</li>
<li>The previous designer did not create tablet views.</li>
<li>Brand colors, typography, and button styles were not consistent across all design files.</li>
<li>The designs were not accessible from a UI design perspective.</li>
<li>No icon library</li>
<li>The designs did not cover all pages in the project requirements.</li>
<li>The designs did not include any animation, interactive prototypes, examples, or documentation that allowed the developers to understand to implement the designs.</li>
</ul>
<p>My role was to take the initial designs from Sketch and use those files to create the design system and deliver the missing pieces of the puzzle</p>
</div>
</div>
</section>
<section class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<h2>Strategy and Architecture</h2>
<p>We took the original sketch files and imported them into Figma. I worked with the product owner to audit the designs and delivered a spreadsheet of all components in the current designs. After multiple meetings with the product owner and the VP of our department, we created a sitemap, component list, and required pages. Data from Google Analytics, HotJar, SEO, and other tools were the driving force behind the content strategy of the new website.</p>
<p>This project is also the first web project where design and development happened simultaneously. The team collaborated on the data structure and architecture of the components from a development perspective. This process allowed the developers to begin working on the back-end while working on the designs. I included feedback from the team to make sure they were in the loop in any updates from a design perspective.</p>
</div>
</div>
</section>
<section class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<h2>Brand</h2>
<p>he project's design phase began with creating the Component Library in Figma. I started by creating pages in Figma that contained the brand colors and typography and created styles in Figma.</p>
<p>For typography, I made sure this portion of the system was accessible, setting typography guidelines based on accessible UI design best practices. These guidelines included minimal type size, heading styling, mobile typography, and documentation on installing the fonts via the Adobe Typekit CDN.</p>
<p>For colors, I incorporated the hex values for colors and documented the accessible use of color. I used a tool called Accessible Brand Colors to create a guideline for color usage on the site. The tools compare the colors on a chart and tell you whether specific colors meet AA, AAA, or do not use. This way, I did not have to check all the colors throughout the design process because I had a handy cheat sheet to ensure accessible color usage.</p>
<p>Finally, for logos, I created one component for the Atria Senior Living Logo and a component for the Roslyn Harbor Community as an example for treatment for community logos. Since Atria has multiple brands that are going to be using this design system, I needed to provide guidelines for each brand logo so that the Creative Team that manages the brand from the print side could create the assets needed for the communities.</p>
</div>
</div>
<div class="row justify-content-center align-items-md-between">
<div class="col-lg-5 col-md-10">
<h3>Typography</h3>
<img src="casestudies-img/asldesignsystem/typography.jpg" alt="" class="img-fluid">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#typographyModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
<div class="col-lg-3 col-md-10">
<h3>Colors</h3>
<img src="casestudies-img/asldesignsystem/brandcolors.jpg" alt="" class="img-fluid">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#colorsModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
<div class="row justify-content-center align-items-md-between">
<div class="col-md-10 col-lg-8">
<div class="col-lg-6">
<h3>Logo</h3>
<img src="casestudies-img/asldesignsystem/logo.png" alt="" class="img-fluid">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#logosModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
</div>
</div>
</div>
</section>
<section id="buildingBlocks" class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h2>Building Blocks</h2>
<p>After establishing colors and typography, it was time to start creating components. I sectioned the component library into two sections. Building Blocks are micro-components used across all components. For example, you need form fields, dropdowns, and other input types to create a form.</p>
<ul>
<li>Grid styles for desktop, tablet, and phone views</li>
<li>Buttons</li>
<li>Form and input types</li>
<li>Icons library</li>
<li>Image and video placeholders</li>
<li>Modals</li>
<li>Links</li>
<li>Accordions</li>
</ul>
<p>The building blocks were also interactive with all the states. You could hover over all the buttons and see the animation and have an understanding of how the user would interact with a component.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-5 col-lg-4">
<h3>Buttons</h3>
<img src="casestudies-img/asldesignsystem/buttons.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#buttonsModal">
<i class="fa-solid fa-expand"></i>Expand</button>
</div>
<div class="col-md-5 col-lg-4">
<h3>Forms</h3>
<img src="casestudies-img/asldesignsystem/Forms.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#formsModal">
<i class="fa-solid fa-expand"></i>Expand</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-5 col-lg-4">
<h3>Responsive Grids</h3>
<img src="casestudies-img/asldesignsystem/Grids.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#gridsModal">
<i class="fa-solid fa-expand"></i>Expand</button>
</div>
<div class="col-md-5 col-lg-4">
<h3>Icon Library</h3>
<img src="casestudies-img/asldesignsystem/Icons.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#iconsModal">
<i class="fa-solid fa-expand"></i>Expand</button>
</div>
</div>
</section>
<section id="foundationalComponents" class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h2>Foundational Components</h2>
<p>After creating the Building Blocks, the next step was to develop the Foundational Components. These components are the full features of a website and include layouts for desktop, tablet, phone views, and in some instances, different states.</p>
<p>For example, the Email Sign-Up Form is one component with all three responsive layouts, error states with examples of messaging and UX guidelines, and success states.</p>
<p>This approach allows a developer to understand all aspects of the user's journey in each component and set expectations for development. Some components were more complex in functionality, so in those cases, I always included a link to an example or additional documentation of how the component works.</p>
<p>Below are some of the critical, revenue-driving components created. If I had to go back and count, the component library had probably over 100 components. Atria hired Via Studios to help create about half of the components to expedite the process. I reviewed them to ensure they met the project requirements, were accessible, and were on-brand.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-5 col-lg-4">
<h3>Responsive Navs</h3>
<img src="casestudies-img/asldesignsystem/navs.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#navsModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
<div class="col-md-5 col-lg-4">
<h3>Communities Nearby</h3>
<img src="casestudies-img/asldesignsystem/communitiesnearbycomponent.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#commsnearbyModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-5 col-lg-4">
<h3>Combo Widget</h3>
<img src="casestudies-img/asldesignsystem/recentlyviewedwidget.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#comboWidgetModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
<div class="col-md-5 col-lg-4">
<h3>Chatbot</h3>
<img src="casestudies-img/asldesignsystem/chatbots.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#chatbotModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-5 col-lg-4">
<h3>Email Signup Form</h3>
<img src="casestudies-img/asldesignsystem/emailforms.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#emailformModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
<div class="col-md-5 col-lg-4">
<h3>Schedule My Tour</h3>
<img src="casestudies-img/asldesignsystem/smtforms.png" alt="" class="img-fluid p-2">
<button type="button" class="btn btn-primary btn-sm my-3" data-bs-toggle="modal" data-bs-target="#smtformModal">
<i class="fa-solid fa-expand"></i> Expand
</button>
</div>
</div>
</section>
<section id="assemble" class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<h2>Assembling the pages</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<p>Once we completed the component design, it was time to create the website's pages. Again, using this system streamlined the page design process. I set up three different Figma files for the desktop, tablet, and phone layouts for all the brand pages and a separate file for the Find a Community experience. I created individual design files for the different layouts for the brand pages to make it easier to ensure that components from different views didn't mix and it is easier to create the prototypes in Figma.</p>
<p>Along the way, I would go back and make minor updates to components once I applied copy and images in the designs. For example, the components had margin and padding built. In addition, I adjusted the spacing and alignment in each view and added documentation for the developers on the spacing of components.</p>
<p>The most significant challenge was implementing the copy on the page. The copywriter was on a different team with a different process than our team. That copywriter would create copy for the page without reviewing the designs or component library. As a result, there were instances where the content did not align with the components and digital copy best practices. After providing additional feedback, suggestions, and some revision, we aligned the content with the components. Some components were also tweaked where it made sense based on the direction of the content.</p>
</div>
</div>
</section>
<section id="finalThoughts" class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<h2>Final Thoughts</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<p>This project took about a year to complete as it was a comprehensive overhaul of the Atria Senior Living website. Some new features in Figma, such as Interactive Components and Prototype Flows, made it easier to create prototypes.</p>
<p>When Atria acquired Holiday Senior Living, it made Atria Senior Living the second largest senior living provider in the US. Their website also needed an overhaul. The component library was already complete by that time, and we were about 80% completed on brand pages. We hired an outsourced designer and duplicated the Atria component library, and moved it to the Holiday project in Figma. We used the new brand standards for Holiday to swap the ASL colors, logos, and typography which instantly transformed the component library to fit the Holiday brand. The smooth transition made it very easy to get the outsourced designer running to rapidly create the design system for Holiday and add some custom components tailored to that brand.</p>
<p>We recently launched the Atria Senior Living site. Next steps are to monitor the performance of the site, audit and fix any bugs, and optimize the components to improve the user experience.</p>
<p>We are also using this design system to launch Holiday Senior Living and Coterie Luxury Senior Living in 2022.</p>
<p class="text-center"><a href="https://atriaseniorliving.com" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true" target="_blank">Visit Atria Senior Living</a></p>
</div>
</div>
<div class="row justify-content-center">
<div class="mt-5 col-md-8">
<a href="casestudies.html"><i class="fa-regular fa-circle-arrow-left"></i> Return to Case Studies</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container mt-5 py-5">
<div class="d-flex flex-column justify-content-center">
<div class="mx-auto">
<a class="logo" href="index.html"><img class="img-fluid" src="Images/logo.svg" alt="Veronica Rivera Logo"></a>
</div>
<div class="menu mx-auto mt-2">
<ul class="main-nav nav">
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="casestudies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
<div class="social mx-auto mt-2">
<ul class="social-nav nav">
<li><a class="nav-item" title="Twitter" href="https://twitter.com/justvcreative"><i class="fa-brands fa-x-twitter fa-2xl"></i></a></li>
<li><a class="nav-item" title="Instagram" href="https://www.instagram.com/justvcreative"><i class="fa-brands fa-instagram fa-2xl"></i></a></li>
<li><a class="nav-item" title="LinkedIn" href="https://www.linkedin.com/in/justvcreative"><i class="fa-brands fa-linkedin fa-2xl"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Typography Modal -->
<div class="modal fade" id="typographyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Typography</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/typography.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Colors Modal -->
<div class="modal fade" id="colorsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Brand Colors</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/brandcolors.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Logos Modal -->
<div class="modal fade" id="logosModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Logos</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/logo.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Buttons Modal -->
<div class="modal fade" id="buttonsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Buttons</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/buttons.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Forms Modal -->
<div class="modal fade" id="formsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Forms</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/Forms.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Grids Modal -->
<div class="modal fade" id="gridsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Responsive Grids</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/Grids.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Icons Modal -->
<div class="modal fade" id="iconsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Icon Library</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/Icons.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Navs Modal -->
<div class="modal fade" id="navsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Responsive Navigation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/navs.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Communities Nearby Modal -->
<div class="modal fade" id="commsnearbyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Communities Nearby</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/communitiesnearbycomponent.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Combo Widget Modal -->
<div class="modal fade" id="comboWidgetModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Combo Widget</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/recentlyviewedwidget.png" alt="" class="img-fluid">
<p>This is a small, fixed bottom left component that shows first time visitors communities near them. If the visitor has visited a community page, then they will be able to view up to three recently viewed communities.</p>
</div>
</div>
</div>
</div>
<!-- Chatbot Modal -->
<div class="modal fade" id="chatbotModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Chatbot</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/chatbots.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Email Modal -->
<div class="modal fade" id="emailformModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Email Sign-up Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/emailforms.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- SMT Modal -->
<div class="modal fade" id="smtformModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Schedule My Tour Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="casestudies-img/asldesignsystem/smtforms.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>