-
Notifications
You must be signed in to change notification settings - Fork 1
/
raleighgolfcarts.html
314 lines (254 loc) · 16.9 KB
/
raleighgolfcarts.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
<html>
<head>
<title>Matthew Marquise - Raleigh Golf Carts</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="arrow.css"/>
<link rel="icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="apple-touch-icon" href="/img/favicon1.ico">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- MOBILE NAV -->
<div class="hidden-desktop">
<header class="header">
<a href="home" style="text-decoration: none; color: black; font-size: 30px" class="logo">
<img src="/img/mattsmac.png" width="50" height="54" class="d-inline-block align-top" alt="me">
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu" style="display: block; text-align: center;">
<li class="nav-item"><a href="work" class="nav-link" id="nav">Work</a></li>
<li class="nav-item"><a href="about" class="nav-link" id="nav">About</a></li>
<li class="nav-item"><a href="resume.pdf" class="nav-link" id="nav">Resume</a></li>
<li class="nav-item"><a href="contact" class="nav-link" id="nav">Contact</a></li>
</ul>
</header>
<br><br><br><br>
</div>
<!-- DESKTOP NAV -->
<div class="sidenav hidden-mobile">
<br><br>
<a href="home"><img src="/img/mattsmac.png" width="55" height="60" class="d-inline-block align-top" alt="hi"></a>
<br>
<a href="work"><span class="linkborder">Work</span></a>
<a href="about"><span class="linkborder">About</span></a>
<a href="resume.pdf"><span class="linkborder">Resume</span></a>
<a href="contact"><span class="linkborder">Contact</span></a>
<div class="bottom-left" style="padding: 15px;">
<div class="row">
<p><a href="https://www.linkedin.com/in/matthew-marquise-4a688019a/"><i class="fa fa-linkedin" style="font-size: 22px;"></i></a> </p>
<p><a href="https://github.com/MattMarquise"><i class="fa fa-github" style="font-size: 22px;"></i></a> </p>
<p><a href="https://dev.to/mattmarquise"><img width="20" height="20" src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png"></a></p>
</div>
</div>
</div>
<!-- MAIN -->
<div class="main">
<h1>Raleigh Golf Carts</h1>
<h6>Duration: December 29, 2020 - Febuary 20, 2021</h6>
<p class="card-text" style="font-size: 12px"><span style="color: grey;">Research / Design / Branding / Graphic Design / Website</span></p>
<br>
<div class="row">
<div class="col-12 col-md-8"><img src="/img/raleighgolfcarts.jpg" width="100%" height="auto"></div>
<div class="col-10 col-md-4">
Design Notes:
<p style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">This project, though only taking roughly three months, took a significant amount of user research and testing and few design concepts/prototypes to get right. This company wanted to sell golf carts in a way that no one else does. They wanted to sell localy in the Triangle Area, but with 'Buy From Your Couch' approach. Since no one else in the golf cart industry opperates this way, I chose to research the car industry. So I began conducting extesive research on companies such as Vroom and Carvana, two companies changing the way people buy cars. There approach seems to be doing very well, so that's how I conducted my early UX studies.</p>
</div>
</div>
<div class="hidden-mobile">
<div class="row" style="font-size: 20px; font-family: 'Roboto', sans-serif;">
<div class="col-sm">My Role:</div>
<div class="col-sm">Project Goal:</div>
<div class="col-sm">Conclusion:</div>
</div>
<div class="row" style="font-size: 13px; font-family: 'Roboto', sans-serif;">
<div class="col-sm" style="padding-left: 2%;">For this project I was tasked with researching, designing, branding, and developing the entire online presence of a new, up-and-coming golf cart company located in the Raleigh, NC area.</div>
<div class="col-sm" style="padding-left: 2%;">The company founders informed me that they wanted to stand out, be different, and exceed expectations. Through extensive research and prototying I gave them exactly what they wanted, and more.</div>
<div class="col-sm" style="padding-left: 2%;">I delievered on exactly what this company's founders invisioned. Business has already begun to explode for them as people are loving their buying process. They're website, branding, and social media presence has certainly allowed them to take the front seat in the golf cart industry.</div>
</div>
</div>
<div class="hidden-desktop">
<div>
<div style="font-size: 20px; font-family: 'Roboto', sans-serif;">My Role:</div>
<div style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">For this project I was tasked with researching, designing, branding, and developing the entire online presence of a new, up-and-coming golf cart company located in the Raleigh, NC area.</div>
<br>
<div style="font-size: 20px; font-family: 'Roboto', sans-serif;">Project Goal:</div>
<div class="col-sm" style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">The company founders informed me that they wanted to stand out, be different, and exceed expectations. Through extensive research and prototying I gave them exactly what they wanted, and more.</div>
<br>
<div style="font-size: 20px; font-family: 'Roboto', sans-serif;">Conclusion:</div>
<div class="col-sm" style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">I delievered on exactly what this company's founders invisioned. Business has already begun to explode for them as people are loving their buying process. They're website, branding, and social media presence has certainly allowed them to take the front seat in the golf cart industry.</div>
</div>
</div>
<br>
<div class="row">
<div class="col-6"><img src="/img/rgcwebsitesketch.jpg" width="100%" alt="Raleigh-Golf-Carts-2"></div>
<div class="col-6">
Concept:
<p style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">This is the original design concept I sketched to give myself, and the client a sense of what the potential of the site could be. If you view the website today you'll notice that it isn't far off from this original concept sketch. The website includes various </p>
</div>
</div>
<br>
Usability:
<p style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">As mentioned in the project goal, I was given the task to build Raleigh Golf Carts' entire internet presence to allow them to stand out and get attention in the RDU area of NC, but to also be recognized for their innovation throughout the entire golf cart industry. So besides their incredibly simplistic buying process, their website needed to be extremely easy to use as it would be the main way for people to view the cart they wanted to buy. Both on desktop and mobile, their site stands high above the rest. In the images below you can see how the layout is very simplistic, not cluttered, and allows for ease of use. Their 3 part buying process is explained without being a four paragraph essay, as some other golf cart dealers believe works. Their products, the golf carts, are layed out in a very simple and straightforward way. The use of a few buttons on each page enables users to text, email, or call to schedule a test drive and or pick up the cart they like. Other buttons help users easily navigate to the proper page to learn more about the buying process or to begin the process by choosing a cart. The Raleigh Golf Carts website was extremely enjoyable to work on and it has taught me more about how the internet users in today's time think and how a unique, easy to use, and user-focused website and social media presence can grab their attention.</p>
<div class="row">
<div class="col-6">
<img src="/img/rgc2.jpg" width="100%" alt="Raleigh-Golf-Carts-3">
</div>
<div class="col-6">
<img src="/img/rgc3.jpg" width="100%" alt="Raleigh-Golf-Carts-4">
</div>
</div>
<br>
<div class="row">
<div class="col-6">
<img src="/img/rgc4.jpg" width="100%" alt="Raleigh-Golf-Carts-5">
</div>
<div class="col-6">
<img src="/img/rgc5.jpg" width="100%" alt="Raleigh-Golf-Carts-6">
</div>
</div>
<br>
The Key Takeaway:
<p style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%; padding-right: 2%;">Through the lengthy research I conducted, I learned how companies such as Amazon, DoorDash, Carvana, and plenty of others have changed the way countless people across the world buy everything from socks, to cars from their living rooms. What else will we be able to buy from home next?</p>
<br>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"></div>
<br>
<!-- FOOTER -->
<div class="row">
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Skills</u></b>
<br>
<div style="padding: 4%;">
<dl>
<dt>Front-End Development:</dt>
<div style="padding-left: 10px;">
<dd>- Html</dd>
<dd>- CSS</dd>
<dd>- JS</dd>
<dd>- Laravel</dd>
<dd>- Extensive work using Shopify</dd>
<dd>- Experience using Squarespace</dd>
<dd>- Responsive Web Design</dd>
<dd>- Rapid Bug Fixes</dd>
</div>
<br>
<dt>UX Design:</dt>
<div style="padding-left: 10px;">
<dd>- Research</dd>
<dd>- Writing</dd>
<dd>- Wireframing</dd>
<dd>- Design</dd>
<dd>- Prototyping</dd>
<dd>- User Centered Research, Design, Testing</dd>
<dd>- Experience using Figma & Adobe Xd</dd>
</div>
<br>
<dt>Marketing:</dt>
<div style="padding-left: 10px;">
<dd>- Social Ad Campaigns</dd>
<dd>- Mailchimp Campaigns</dd>
<dd>- Photography</dd>
<dd>- Graphic Designs</dd>
</div>
<br>
<dt>Other:</dt>
<div style="padding-left: 10px;">
<dd>- Music Producing / Songwriting</dd>
<dd>- Digital Photography & Cinematography</dd>
<dd>- Hardcore Tennis Player</dd>
</div>
</dl>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Experience</u></b>
<div style="padding: 4%;">
<dt>Raleigh Golf Carts:</dt>
<dd style="color: grey;">Developer & Marketing Lead <br> Part-Time : 2020 - Present</dd>
<div style="padding-left: 10px;">
<dd>- Social Media Ad Campaigns</dd>
<dd>- Web Design & Development</dd>
<dd>- Photography & Graphic Design</dd>
</div>
<br>
<dt>Custom Quality Covers:</dt>
<dd style="color: grey;">Director Of Sales Marketing & CX Manager <br> Part-Time : 2020 - Present</dd>
<div style="padding-left: 10px;">
<dd>- Mailchimp Email Ad Campaigns</dd>
<dd>- Web Development and Maintenance using Shopify and Squarespace</dd>
<dd>- Social Media Ad Campaigns</dd>
</div>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Certifications</u></b>
<br>
<div style="padding: 4%;">
<p>Harvard CS50 - Introduction to Computer Science</p>
<p>Google Professional Certificate - UX Design</p>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
body {
margin: 0;
color: black;
height: 100%;
background-size: cover;
background-color: white;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
color: black;
}
a:hover{
text-decoration: none;
color: black;
}
/* BLACK BORDERED BUTTON */
.borderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
color: black;
}
.borderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
/* SMALL BLACK BORDERED BUTTON */
.smallborderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 8px 20px;
font-size: 10px;
color: black;
}
.smallborderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
</style>