-
Notifications
You must be signed in to change notification settings - Fork 0
/
wright-state-university.html
172 lines (169 loc) · 9.7 KB
/
wright-state-university.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="UX designer and Front End developer Portfolio for Kyle O'Brien">
<meta name="author" content="Kyle O'Brien">
<title>Kyle O'Brien • Wright State University</title>
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/dist/css/style.css" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon-32x32.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CGENDLHTC0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CGENDLHTC0');
</script>
</head>
<body>
<div id="nav-reserve"></div>
<main class="mosaic">
<h1 class="visually-hidden">Wright State University</h1>
<div class="container-fluid work-hero-background wsu">
<img class="wsu-logo" alt="Wright State University's word mark" src="assets/img/wsu/24_WRIGHTSTATE_1WDMK_H_REV.svg">
</div>
<div class="container-xl px-4 py-5 shadow-lg bg-light">
<div class="row pb-5">
<div class="col-lg-8 offset-lg-2">
<h2 class="display-5 mb-4 text-center" data-text="Green and Gold, we'll not forget you" >Green and Gold, we'll not forget you</h2>
<p><h2 style="display: inline;">I</h2> came aboard Wright State at the beginning of a transitional period for the university. Wanting to grow the university in its own identity, I worked with the marketing team and we developed a branding guide that was used over the course of nine years (and still currently being used) to bring in all aspects of the university into a strong visual uniformity. During my time at Wright State, I aided in Digital Ads, Snapchat Ads, Print materials, Videos, Landing pages, Murals, Analytic Reporting, Web and Feature Development, Security Maintenance, Webforms and more. Below is a breakdown of a few projects from my time at Wright State.</p>
<ul class="d-md-flex flex-wrap skills work-into-skills">
<li>CSS/HTML</li>
<li>Javascript</li>
<li>Google Analytics</li>
<li>User Experience</li>
<li>UI Design</li>
<li>Responsive Design</li>
<li>Git</li>
<li>Salesforce</li>
<li>Slate</li>
<li>Marketing Cloud</li>
<li>Email Marketing</li>
<li>SEO</li>
<li>Graphic Design</li>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Photography & Video Editing</li>
<li>PHP</li>
<li>Drupal</li>
</ul>
</div>
</div>
<div class="row py-5">
<div class="col-lg-3">
<h3>Wright State Homepage</h3>
<p>Wanting to transition into a more specific user focused homepage and away from a mix of messages for a variety of users, I was tasked to develop a new front door to the university specifically for one user in mind, Perspective Students.
</p>
</div>
<div class="col-lg-9">
<figure>
<a href="assets/img/wsu/wsu_hero_image_no-background.png" data-toggle="lightbox" data-caption="Wright State University's homepage final design on variety of devices.">
<img src="assets/img/wsu/wsu_hero_image_no-background.png" class="img-fluid rounded" alt="wright state homepage final Design on variety of devices" width="100%" height="500" loading="lazy">
</a>
<figcaption>Final design on variety of devices</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<h3>Processes</h3>
<p>I reviewed analytic data over five years to better understand the website users and how they navigate the university website, who are they, how old are they, where they are, what devices are they using, etc. Compiling this knowledge, I produced a variety of user Personas that gave a visual representation of our users and their analytic data. Taking the prospective student persona through an iterative process I created a wireframe, mockup, and final design.</p>
</div>
<div class="col-lg-9">
<figure>
<a href="assets/img/wsu/rm355-pf-s73-card-laptop-01-mockup.png" data-toggle="lightbox" data-caption="Reports created through Google Analytics and a custom dashboard through Google Data Studio.">
<img src="assets/img/wsu/rm355-pf-s73-card-laptop-01-mockup.png" class="img-fluid rounded" alt="Reports created through Google Analytics and a custom dashboard through Google Data Studio" width="100%" height="500" loading="lazy">
</a>
<figcaption>Reports created through Google Analytics and a custom dashboard through Google Data Studio.</figcaption>
</figure>
</div>
<div class="col-lg-9 offset-lg-3">
<figure>
<a href="assets/img/wsu/letterhead-with-clipboard-scene-set-mockup.png" data-toggle="lightbox" data-caption="Multiple User Personas created from the analytic data to better understand the typical users and their needs.">
<img src="assets/img/wsu/letterhead-with-clipboard-scene-set-mockup.png" class="img-fluid rounded" alt="Personas" width="100%" height="500" loading="lazy">
</a>
<figcaption>Multiple User Personas created from the analytic data to better understand the typical users and their needs.</figcaption>
</figure>
<figure>
<a href="assets/img/wsu/WrightState_Homepage_thumb_nail.png" data-toggle="lightbox" data-caption="Wright State University's homepage from sketch, wireframe, to full mockup and build.">
<img src="assets/img/wsu/WrightState_Homepage_thumb_nail.png" class="img-fluid rounded" alt="sketch, wireframe to full mockup" width="100%" height="500" loading="lazy">
</a>
<figcaption>Wright State University's homepage from sketch, wireframe, to full mockup and build.</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container-xl px-4 py-5 shadow-lg bg-light">
<div class="row">
<div class="col-lg-3">
<h3>MURAL</h3>
<p>As well as assisting with more traditional tasks such as building up the university's brand on print and web, I also lead initiatives to update branding in the form of several murals on both campuses. My 16'x8' postcard mural is printed and placed on the student union at the front of the university welcoming all who come to campus.</p>
</div>
<div class="col-lg-9 d-flex">
<figure>
<a href="assets/img/wsu/54808_137.jpg" data-toggle="lightbox" data-caption="Dayton Campus Postcard Mural - Located at the main entrence on campus infront of the student union.">
<img src="assets/img/wsu/54808_137.jpg" class="img-fluid rounded" alt="Dayton Campus postcard Mural" width="100%" height="500" loading="lazy">
</a>
<figcaption>Dayton Campus Postcard Mural - Located at the main entrence on campus infront of the student union.</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container-xl px-4 py-5 shadow-lg bg-light">
<div class="row">
<div class="col-lg-3">
<h3>VIDEO</h3>
<p>I also make a variety of motion graphic and videos for Wright State. Here is a selection of my previous Snapchat and TikTok advertisements.</p>
</div>
<div class="col-lg-3 py-2 py-md-5 py-lg-0 py-xl-0 d-flex">
<video controls width="250">
<source src="assets/video/still_time_spring_2024.mp4#t=0.001" type="video/mp4"/>
</video>
</div>
<div class="col-lg-3 py-5 py-md-0 py-lg-0 py-xl-0 d-flex">
<video controls width="250">
<source src="assets/video/Dart-B.mp4#t=0.001" type="video/mp4"/>
</video>
</div>
<div class="col-lg-3 py-5 py-md-0 py-lg-0 py-xl-0 d-flex">
<video controls width="250">
<source src="assets/video/june_nursing_v3.mp4#t=0.001" type="video/mp4"/>
</video>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container-xl px-4 py-5 shadow-lg bg-light">
<div class="row">
<div class="col-lg-3">
<h3>PRINT</h3>
<p>My design was selected for the 2019 <em>Travel Teaser Viewbook</em> cover, the main promotional booklet handed out to all prospective students.</p>
</div>
<div class="col-lg-9 d-flex">
<figure>
<a href="assets/img/wsu/Viewbook_cover_ideas_v16_1000x1000.jpg" data-toggle="lightbox" data-caption="Travel Teaser Viewbook cover - 20,000 prints handed out to prospective students at fairs, high schools, etc">
<img src="assets/img/wsu/Viewbook_cover_ideas_v16_1000x1000.jpg" class="img-fluid rounded" alt="Travel Teaser Viewbook cover" loading="lazy">
</a>
<figcaption>Travel Teaser Viewbook cover - 20,000 prints handed out to prospective students at fairs, high schools, etc </figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div id="footer-reserve"></div>
</main>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/dist/js/index.bundle.min.js"></script>
<script src="assets/dist/js/template.js" defer></script>
</body>
</html>