-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (84 loc) · 5.85 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
<!doctype html>
<html lang="en">
<head>
<title>Kristen Williams | Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700&display=swap" rel="stylesheet">
<meta name="image" property="og:image" content="https://kwilliams.co/img/portfolio-homepage.png">
<meta name="description" property="og:description" content="Welcome, I’m a UX Designer with a passion for products that improve lives. Within my process, I apply a wealth of experience from my varied background. From my work in healthcare, I bring a deep empathy for users. From my experience in marketing, I understand the importance of timing and messaging in reaching people. And from my studies as a front-end developer, I appreciate what technology can do and where the constraints exist. I’m currently working with EnCiv to create tech to improve civic engagement.">
</head>
<body>
<!-- HEADER SECTION -->
<header id="home">
<div class="full-width">
<div class="half-width">
<h1>Kristen Williams</h1>
</div>
<div class="half-width">
<nav>
<ul>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<h2>Welcome, I’m a <span>UX Designer</span> with a passion for products that improve lives. Within my process, I apply a wealth of experience from my varied background. From my work in healthcare, I bring a deep empathy for users. From my experience in marketing, I understand the importance of timing and messaging in reaching people. And from my studies as a front-end developer, I appreciate what technology can do and where the constraints exist. I’m currently working with <span><a href="https://enciv.org/">EnCiv</a></span> to create <span><a href="https://www.youtube.com/watch?v=YlhrzVUAIpo">tech</a></span> to improve civic engagement.</h2>
</div>
</header>
<!-- MAIN SECTION -->
<main>
<!-- WORK -->
<section id="work">
<div class="full-width">
<h1>Work</h1>
<div class="work-grid-container">
<div class="work-grid-item ts-whole-img">
<img src="img/ts-home.png" alt="TableShare Homepage" id="ts-img" />
<img src="img/ts-select-shared-table.png" alt="TableShare Select Shared Table" id="ts-img" />
<img src="img/ts-your-table-you-share.png" alt="TableShare Table Your Decided to Share" id="ts-img"/>
</div>
<div class="work-grid-item ts-text">
<h3>TableShare</h3>
<p>End-to-end product design process followed to create an app to dynamically turn a café table into a coworking space by allowing users to note they are open to sharing a table</p>
<p><span>Goal:</span> Prevent customers from leaving a café when all the tables are occupied by making tables more conducive to coworking.</p>
<a href="tableshare/index.html" class="work-button" target="_blank">View Case Study</a>
</div>
<div class="work-grid-item cc-whole-img">
<img src="img/cc-macbook-pro.png" alt="City Cycles Laptop Mockup" id="cc-img-mac"/>
<img src="img/cc-mobile-homepage.png" alt="City Cycles Mobile Mockup" id="cc-img-mobile"/>
</div>
<div class="work-grid-item cc-text">
<h3>City Cycles</h3>
<p>UX Audit and Redesign to improve the online reservation system flow for a fictional bicycle rental shop</p>
<p><span>Goal:</span> Increase the reservation conversion rate by creating a seamless reservation system that customers will want to use.</p>
<a href="city-cycles/index.html" class="work-button" target="_blank">View Case Study</a>
</div>
<!-- <div class="work-grid-item">
<img src="img/ameritest.png" alt="Ameritest Logo" id="at-logo"/>
</div>
<div class="work-grid-item">
<h3>Ameritest</h3>
<p>Shipped Survey Redesign for Mobile Optimization</p>
<p><span>Goal:</span> Expand audience of respondents and test offerings</p>
<a href="ameritest/index.html" class="work-button" target="_blank">View Summary</a>
</div> -->
</div>
</div>
</section>
<!-- CONTACT AS FOOTER -->
<footer id="contact">
<div class="full-width">
<div id="contact-info">
<!-- <h3 id="socialmedia-header">Let's Chat</h3> -->
<ul>
<li><a href="https://www.linkedin.com/in/kawilliams3/" target="_blank"><img src="img/linkedin.png" alt="linkedin icon"></a></li>
<li><a href="https://github.com/kawill" target="_blank"><img src="img/github.png" alt="github icon"></a></li>
</ul>
</div>
</div>
</footer>
</main>
</body>
</html>