-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmakeathon.html
146 lines (141 loc) · 9.09 KB
/
makeathon.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="css/baguetteBox.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Makeathon</title>
<link rel="icon" href="imgs/favicon3.png">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138350456-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-138350456-1');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript/baguetteBox.min.js" async></script>
</head>
<body>
<a href="#main" class="jump">Jump to Content</a>
<header>
<div class="global-nav" id="topnav">
<div class="navbar">
<div class="navbar_link navbar_link-brand">
<a href="index.html">Amanda Bassett</a>
</div>
<div class="navbar_link navbar_link-toggle" aria-label="menu icon">
<i aria-hidden="true" class="fas fa-bars"></i>
</div>
<nav class="navbar_items navbar_items--right">
<ul class="navbar_link">
<li><a href="index.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="docs/portfolio_resume.pdf" target="_blank">Resume</a></li>
</ul>
</nav>
</div>
</div>
<div class="spacer">
</div>
<div class="banner">
<div class="banner-text">
<h1>Makeathon</h1>
<h2>An interdisciplinary approach <br> to beating winter blues</h2>
</div>
<div class="gif">
<img src="imgs/rotating_pod.gif" alt="happy pod gif">
</div>
</div>
</header>
<div class="content">
<main id="main">
<div class="intro">
<h2>Overview</h2>
<p><strong>Format: </strong>36-hour design competition</p>
<p><strong>Role: </strong>User Experience Designer</p>
<p><strong>The Challenge: </strong>Over the course of 36 hours, brainstorm, create, and pitch a product to a panel of judges. Our team chose to address <strong>stress and winter blues</strong> with University students and staff as the primary audience for our product. </p>
<p><strong>Result: </strong>Our team won <strong>first place</strong> out of 50+ teams that came out to compete in the Open Product Design Competition.</p>
</div>
<div class="project-section">
<h2>User Journey</h2>
<p>When we arrived at the Makeathon competition on Friday evening, we knew that we had only 36 hours to design a product. Right when we arrived, we began brainstorming potential ideas - knowing that we had design and research expertise on our team as well as a health specialist, we hoped to create something that could leverage everyone's skill sets. Staring out into the gray abyss that is January in Michigan, we thought: <i>how might we cheer up the student population during the winter months?</i></p><br>
<p>After deciding which problem we hoped to address through our product, we came up with the idea of creating a "happy place" on campus. We began to reach out to our network and ask them: What constitutes a happy place for you? Based on these phone calls, we constructed personas to guide our design decisions.</p>
<div class="gallery">
<a href="imgs/makeathon_persona.jpg">
<img src="imgs/makeathon_persona.jpg" alt="persona">
</a>
<a href="imgs/makeathonpersona2.png">
<img src="imgs/makeathonpersona2.png" alt="persona">
</a>
</div>
<p>The key criteria that we gleaned from these phone calls included <strong>privacy, escapism,</strong> and <strong>convenience.</strong> Putting these three things together, we began to conceptualize Happy Pod - a quiet place where one can go to collect their thoughts, conveniently located right on campus.</p>
</div>
<div class="project-section">
<h2>Designing the Product</h2>
<p>Drawing inspiration from the nursing mothers pods placed in airports, my team designed a pod with a similar shape that provides users with an immersive experience.</p>
<br>
<p>The pod’s ceiling contains a “happy light,” which is a special type of lamp that mimics natural sunlight. The walls of the pod are covered by large LCD screens that create the feeling of being in nature. The user can control the scenery on the screens via an interface. We also researched ADA specifications to ensure that our design was compliant. Our goal was to create an oasis for people experiencing stress and low mood due to long winters.</p>
<div class="container">
<div class="flipcard">
<div class="flipcard_inner" tabindex="0">
<div class="flipcard_front">
<img src="imgs/happy_pod_sketch.png" alt="sketch"/>
</div>
<div class="flipcard_back">
<img src="imgs/podfront.jpg" alt="rendering of pod">
</div>
</div>
</div>
<div class="sketch-text">
<p>I was responsible for conceptualizing the architecture of the pod - where would the seating be? How could we make room for a wheelchair while also maximizing the use of such a small space? I drew the sketch pictured here, and my teammate used Autodesk 360 software to create the renderings.</p>
</div>
</div>
</div>
<div class="project-section">
<h2>Prototype</h2>
<p>Pictured are outside and inside views of our pod as well as a sample of the interface. For our final prototype, we added a wheelchair ramp. We also looked into material costs and a strategy to keep the pods clean.</p>
<div class="gallery">
<img src="imgs/happy_pod_model.png" alt="pod model" class="small_on_desktop"/>
<img src="imgs/happy_pod_model2.jpg" alt="pod model inside" class="small_on_desktop"/>
</div>
<p>The small size of the pod makes it feasible to place on a college campus without needing to build anything new and permanent. Although we designed this product with college students and staff in mind, it could also be placed in a workplace or airport. A customizable interface allows users to create a "happy place" that works best for their needs.</p>
<img src="imgs/happy_pod_interface.jpg" alt="pod interface" class="small_on_desktop"/>
</div>
<div class="project-section">
<h2>Pitching</h2>
<p>After spending Friday and Saturday working on our design, my team pitched our product to a panel of judges. During our pitch, we addressed competitors in our space and our business model, walked through our user journey, and presented our prototype. We were honored to earn first place in the open product competition for the feasibility and ingenuity of our product, as well as outstanding teamwork.</p>
<img src="imgs/makeathon_team.JPG" alt="team photo" class="small_on_desktop"/>
</div>
</main>
</div>
<footer>
<nav class="bottom-nav">
<ul>
<li><a href="careconnect_prototype.html">CareConnect Prototype</a></li>
<li><a href="iia.html">Innovation in Action</a></li>
<li><a href="makeathon.html" class="current">Makeathon</a></li>
<li><a href="university_consulting.html">University Consulting</a></li>
</ul>
</nav><br />
<br />
<div class="icons">
<a href="mailto:[email protected]" aria-label="Email to [email protected]" class="email-icon">
<i aria-hidden="true" class="fa fa-envelope"></i>
</a>
<a href="https://www.linkedin.com/in/amanda-bassett-62b06887" aria-label="LinkedIn" target="_blank" class="linkedin">
<i aria-hidden="true" class="fab fa-linkedin-in"></i>
</a>
</div>
<span class="copyright">
Hand-coded with ♥ <br />© Amanda Bassett 2019
</span>
</footer>
<script src="javascript/my_javascript.js"></script>
</body>
</html>