-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·321 lines (315 loc) · 16.9 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Katy Atherholt</title>
<meta name="description" content="Katy Atherholt is a designer, developer and human bean based in Southern California." />
<meta name="keywords" content="developer, designer, branding, graphic design, web design, content, community" />
<meta name="author" content="Katy Atherholt" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<main>
<div class="frame">
<header class="codrops-header">
<h1 class="codrops-header__title"></h1>
<div class="codrops-links">
<a class="social-icons" href="https://www.github.com/katherholt/" title="Github" target="_blank"><img class="svg icon" height="24" width="24" src="img/github.svg" /></a>
<a class="social-icons" href="https://www.dribbble.com/katherholt/" title="Dribbble" target="_blank"><img class="svg icon" height="24" width="24" src="img/dribbble.svg" /></a>
<a class="social-icons" href="https://www.linkedin.com/in/katherholt/" title="LinkedIn" target="_blank"><img class="svg icon" height="24" width="24" src="img/linkedin.svg" /></a>
<a class="social-icons" href="https://www.twitter.com/katyatherholt/" title="Twitter" target="_blank"><img class="svg icon" height="24" width="24" src="img/twitter.svg" /></a>
<a class="social-icons" href="https://www.instagram.com/katyatherholt/" title="Instgram" target="_blank"><img class="svg icon" height="24" width="24" src="img/instagram.svg" /></a>
</div>
</header>
<div class="title">
<h3 class="title__name">Designer, developer and human bean.</h3>
<h4 class="title__sub">Since <span class="title__sub-works">95'</span></h4>
</div>
<div class="hero">
<h1 class="hero" id="name" style="padding-top:25%; text-align: left;font-size: 7vw; font-weight: bold;">KATY ATHERHOLT</h1>
</div>
</div>
<div class="grid-wrap">
<div class="grid">
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/con.jpg" alt="Some image" />
</div>
<h3 class="grid__item-title">Product Design</h3>
<h4 class="grid__item-number">CON</h4>
</a>
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/jmt.jpg" alt="Some image" />
</div>
<h3 class="grid__item-title">Community Management</h3>
<h4 class="grid__item-number">JMB</h4>
</a>
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/ffp.jpg" alt="Some image" />
</div>
<h3 class="grid__item-title">Web and Brand Design</h3>
<h4 class="grid__item-number">FFP</h4>
</a>
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/vau.png" alt="Some image" />
</div>
<h3 class="grid__item-title">COMING SOON</h3>
<h4 class="grid__item-number">VAU</h4>
</a>
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/cca.jpg" alt="Some image" />
</div>
<h3 class="grid__item-title">COMING SOON</h3>
<h4 class="grid__item-number">CCA</h4>
</a>
<a href="#" class="grid__item">
<div class="grid__item-bg"></div>
<div class="grid__item-wrap">
<img class="grid__item-img" src="img/yyc.jpg" alt="Some image" />
</div>
<h3 class="grid__item-title">COMING SOON</h3>
<h4 class="grid__item-number">REL</h4>
</a>
</div>
</div>
<!-- /grid-wrap -->
<div class="footer" style="padding-top: 1em; padding-bottom: 1em; background-color: #FFF;">
<p style="margin: 0 10vw 0 10vw; text-align: center;">This website was made with ♥ by <a href="https://www.twitter.com/katyatherholt/"> Katy </a> and with help from <a href="https://codrops.com">Codrops</a> open source code. Thanks for stopping by and don't forget to say hi!</p>
</div>
<!-- CONPAGO -->
<div class="content">
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/con.jpg" alt="Conpago robot with employees" />
<h2 class="content__item-title">Conpago</h2>
</div>
<h3 class="content__item-subtitle">Product Design</h3>
<div style="margin: auto;width: 700px;">
<div class="about-statement" style="float: left;width: 47%;margin-right: 40px;">
<p class="subheading">About</p>
<p>Conpago is an Australian based software company designing solutions for the aged care and retirement sector. This fast growing market segment has undergone major technological changes in recent times, with the Conpago team involved from a consumer to government policy level.</p>
<p>Brisbane, QLD</p>
<p>May 2017 - March 2018</p>
</div>
<div class="skills-statement" style="float: left;width: 47%;">
<p class="subheading">Skills & Tools</p>
<p>
<ul style="padding-left: 20px;">
<li>Sketch</li>
<li>InVision Tools</li>
<li>User Research</li>
<li>Requirements Gathering</li>
<li>Prototype Development</li>
<li>UI Design</li>
<li>Concept Development</li>
<li>Investment Pitch Materials</li>
<li>Brand Identity</li>
<li>Business Model Strategy</li>
<li>Social Media Strategy</li>
</ul>
</p>
</div>
</div>
<div class="content__item-text-single" style="clear:both">
<hr>
<p>
<strong>Problem</strong>
<br>
Conpago received the intellectual property from the Queensland University of Technology along with some funding to create a product based on research about the health impact of isolation in senior citizens. They did some initial user research with a lo-fi prototype and interviews with prospective partners in the aged care market to figure out what features needed to be included and how to create a system using the research that would support their users most effectively.
<br>
<img style="margin-top: 2em;" src="img/con_case/og_conpago.jpg" alt="Original conpago design"/>
<p style="font-size: 1vw;">Research came from a project originally called The Messaging Kettle by Professor Margot Brereton.</p>
<br>
<strong>Solution</strong>
<br>
Though the product went through many iterations during my time at Conpago, our primary goal was always to build an MVP capable of getting investors and businesses excited about the system. By early 2019 we had achieved this goal and were being approached by investors internationally to discuss funding the project so we could continue to move forward building out the product suite.
<br>
<strong>Highlights</strong>
<br>
In 11 months he product went from a lo-fi drag and drop UI to the first version of a robust communications system to connect aging parents with their families, communities and caregivers. Our path from rough concept to MVP was certainly not linear however the goal of receiving funding and partnership from investors was met, with competing offers.
<br>
<strong>Process</strong>
<br>
My first conversation with the founders had me improving the UI designs, when we spent time with the project it became clear the product could benefit from some systems and UX design attention. We spend three months engineering the relationship between the hardware piece (a small electrical converter meant to passively monitor activity) and the communications system before conducting user testing and moving into the build stage for the MVP.
<br>
<img style="margin-top: 2em; width: 40vw;" src="img/con_case/tablet_design.png" alt="Early tablet design"/>
<p style="font-size: 1vw;">An early tablet app design with features based on feedback from a user research group of highly-mobile seniors.</p>
<strong>Deliverables</strong>
<br>
The final product suite consisted of two applications, one designed for seniors to use on a small, stationary tablet device with the hardware converter component connected via bluetooth. The partner product was for the family and caregivers in the form of a responsive app usable on desktop and mobile.
<br>
<img style="margin-top: 2em; width: 40vw;" src="img/con_case/dashboard.png" alt="Conpago dashboard design"/>
<p style="font-size: 1vw;">A later version of the dashboard design available to caretakers in aged care facilities.</p>
<strong>Impact</strong>
<br>
The Conpago team was in the process choosing an investor to partner with when I ended my contract in the Spring of 2018. As of now they are moving forward with several corporate partners and have secured enough funding to order the first round of physical products to beta test the product suite within their partners’ aged care centres at scale.
<br>
<img style="margin-top: 2em; width: 40vw;" src="img/con_case/couple.jpeg" alt="impact"/>
<p style="font-size: 1vw;">The products are now being used at scale within aged care facilties across Australia.</p>
<strong>Performance Feedback</strong>
<br>
"Katy faced many different challenges while working at Conpago, designing for seniors is a unique challenge, there are many considerations when creating hardware and software for this demographic. Katy’s user centred design perspective and experience with agile development saw her contribute to multiple design iterations, helping us drive the product from initial user research through to testing a minimum viable product. She is a dynamic worker with a great aptitude for learning new skills. Her diverse working background and experience in many different fields has meant she is able to understand the nuances of a wide range of demographics." - Marley Brown <a href="https://conpago.com.au/media.html">CEO of Conpago</a>
</p>
</div>
</div>
<!-- JACK MASONS -->
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/jmt.jpg" alt="Some image" />
<h2 class="content__item-title">Jack Mason's Brewing</h2>
</div>
<h3 class="content__item-subtitle">Community Management</h3>
<div style="margin: auto;width: 700px;">
<div class="about-statement" style="float: left;width: 47%;margin-right: 40px;">
<p class="subheading">About</p>
<p>Based in southwestern Virginia, Jack Mason's began as a small-town tavern and began brewing their own craft beer after two brewers approached them with a business plan. Selling the beer through the tavern to their loyal local customers made sure it was an instant success, however the brewery tasting room space wasn't gaining the popularity they hoped.
</p>
<p>March 2018 - December 2018</p>
</div>
<div class="skills-statement" style="float: left;width: 47%;">
<p class="subheading">Skills</p>
<p>
<ul style="padding-left: 20px;">
<li>Content Planning</li>
<li>Event Planning and Support</li>
<li>Social Media Management</li>
<li>Brand Communications</li>
<li>Graphic Design</li>
<li>Community Management</li>
<li>Brand Strategy</li>
</ul>
</p>
</div>
</div>
<div class="content__item-text-single" style="clear:both">
<p>Problem - a lack of connection between the brewers, brewery space and the community.</p>
<p>Managed social streams and brand strategy during the brewery’s first year of business with the goal of targeting the local community. Organized and promoted community events leading to increased foot traffic, event attendance and sales records. Planned and produced media for all channels and responded to customer inquiries in accordance with brand tone.
</p>
</div>
</div>
<!-- FISHING FOR PLASTIC -->
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/ffp.jpg" alt="Some image" />
<h2 class="content__item-title">Fishing for Plastic</h2>
</div>
<h3 class="content__item-subtitle">Web and Brand Design</h3>
<div style="margin: auto;width: 700px;">
<div class="about-statement" style="float: left;width: 47%;margin-right: 40px;">
<p class="subheading">About</p>
<p>Conpago is an evironmental non-profit based in the Caribbean that creates programs in low-income island communities that employ fisherman as beach trash collectors. Their programs aim to empower small communities while educating the world on the impact of plastic waste and encourage mindful waste creation.</p>
<p>Remote</p>
<p>Sept 2018 - Present</p>
</div>
<div class="skills-statement" style="float: left;width: 47%;">
<p class="subheading">Skills</p>
<p>
<ul style="padding-left: 20px;">
<li>Content Creation</li>
<li>Brand Strategy</li>
<li>Social Media Management</li>
<li>Graphic Design</li>
<li>Website Design</li>
<li>Print Design</li>
<li>Community Management</li>
</ul>
</p>
</div>
</div>
<div class="content__item-text-single" style="clear:both">
<p>CASE STUDY COMING SOON!
</p>
</div>
</div>
<!-- VAULT ACCOUNTING -->
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/vau.png" alt="Some image" />
<h2 class="content__item-title">Vault Accounting</h2>
</div>
<h3 class="content__item-subtitle">Web and Brand Design</h3>
<div style="margin: auto;width: 700px;">
<div class="about-statement" style="float: left;width: 47%;margin-right: 40px;">
<p class="subheading">About</p>
<p>Vault Accounting an Australian firm focused on financial consulting and advisory for businesses across the country. They specialize in the management of digital assets and work primarily within the tech industry.</p>
<p>Remote - based in Adelaide, SA</p>
<p>May 2017 - March 2018</p>
</div>
<div class="skills-statement" style="float: left;width: 47%;">
<p class="subheading">Skills</p>
<p>
<ul style="padding-left: 20px;">
<li>Sketches and Wireframing</li>
<li>Lofi Mockups</li>
<li>Project Management</li>
<li>Web Design</li>
<li>UX Design</li>
<li>Brand Identity</li>
<li>Business strategy</li>
</ul>
</p>
</div>
<div class="skills-statement" style="float: left;width: 47%;">
<p class="subheading">Tools</p>
<p>
<ul style="padding-left: 20px;">
<li>Sketch</li>
<li>Invision</li>
<li>Webflow</li>
</ul>
</p>
</div>
</div>
<div class="content__item-text-single">
<p>FULL CASE STUDY COMING SOON!</p>
</div>
</div>
<!-- RELAY LABS -->
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/cca.jpg" alt="Some image" />
<h2 class="content__item-title">Code Camp Australia</h2>
</div>
<h3 class="content__item-subtitle">Course Teacher</h3>
<div class="content__item-text">
<p>FULL CASE STUDY COMING SOON!</p>
</div>
</div>
<!-- CODE CAMP -->
<div class="content__item">
<div class="content__item-intro">
<img class="content__item-img" src="img/yyc.jpg" alt="Some image" />
<h2 class="content__item-title">Relay Labs</h2>
</div>
<h3 class="content__item-subtitle">Software Developer</h3>
<div class="content__item-text">
<p>FULL CASE STUDY COMING SOON!</p>
</div>
</div><!-- /content__item -->
<button class="content__close">Close</button>
<svg class="content__indicator icon icon--caret"><use xlink:href="#icon-caret"></use></svg>
</div>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/inlineSVG.min.js"></script>
<script>
inlineSVG.init()
</script>
</body>
</html>