-
Notifications
You must be signed in to change notification settings - Fork 0
/
Boba_Bar.html
333 lines (331 loc) · 13.8 KB
/
Boba_Bar.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
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calvin - Boba Bar and Desserts</title>
<link rel="stylesheet" media="screen" href="css/styles.css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/34056e4715.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Hamburger menu -->
<div id="menu">
<div class="menu-content">
<ul>
<li><a href="/" class="active">Work</a></li>
<li>
<a href="/playground/" id="play"><span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span></a>
</li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/inspiration/">Inspiration</a></li>
<li><a href="/about/">Me</a></li>
</ul>
<li class="social">
<a href="mailto:[email protected]" target="_blank">
<i class="fa-regular fa-envelope"></i>
</a>
<a href="https://github.com/ccheung8" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/calvin-cheung-designs" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
</div>
</div>
<!-- Navigation -->
<header>
<nav>
<div class="brand">
<a href="/"><img src="../images/noto_panda.webp" alt="logo"></a>
</div>
<ul>
<a href="/">
<div class="link-container">
<li class="active">Work</li>
</div>
</a>
<a href="/playground" id="play">
<div class="link-container">
<li>
<span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</li>
</div>
</a>
<a href="/articles/">
<div class="link-container">
<li>Articles</li>
</div>
</a>
<a href="/inspiration/">
<div class="link-container">
<li>Inspiration</li>
</div>
</a>
<a href="/about/" id="me">
<div class="link-container">
<li>Me</li>
</div>
</a>
</ul>
<div id="hamburger">
<!-- hamburger visual -->
<div class="hamburger-icon">
<input type="checkbox" id="checkbox"/>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<main>
<section id="case-header">
<img src="images/boba_bar.png" alt="Boba Bar case study cover photo" class="fit">
<div class="header-content">
<div>
<h2>Boba Bar and Desserts</h2>
<h5>UX DESIGN / VISUAL DESIGN / WEB DEVELOPMENT</h5>
<p>
Boba Bar and Desserts is a local business in San Diego that specializes in serving bubble tea and puffles. They have over 4000 followers on Instagram and over 1000 reviews on Yelp. Although they have established themselves on social media, they still lack a website. During initial requirements gathering, it was clear that they needed a website that allows their current and future customers to easily learn about their business, browse their menu, and find out how to order for pick-up and delivery.
</p>
</div>
</div>
</section>
<section class="case-section">
<div>
<h2>Preliminary Research</h2>
<p>
Since the client didn't have a pre-existing website, a lot of our preliminary work involved looking at other sites and looking at their already established base of customers.
</p>
</div>
<div class="case-paragraph div-before-img">
<h3>Competitive Analysis</h3>
<p>
The first thing we did on this project was conduct competitive analysis to see what works and doesn't work on sites that have a similar business model. This allowed us to make educated decisions as well as gain inspiration on different components of the site.
</p>
<p>
Listed below are some main competitors we decided to analyze.
</p>
</div>
<img src="images/boba bar/competitors.png" alt="competitors to boba bar">
<div class="case-paragraph div-before-img">
<h3>Personas</h3>
<p>
We went through reviews on sites like Yelp and Google and highlighted trends we saw. We then translated these trends into personas for easy consumption.
</p>
<p>
We came up with three personas for three different user demographics: Job Seeker, Potential Customer, & the Caterer.
</p>
</div>
<img src="images/boba bar/job-seeker-persona.png" alt="job seeker persona for boba bar">
<img src="images/boba bar/potential-shopper.png" alt="potential shopper persona for boba bar">
<img src="images/boba bar/caterer.png" alt="caterer persona for boba bar">
<div class="div-before-img">
<h3>Feasibility vs. Functionality Chart</h3>
<p>
We created a feasibility vs. functionality chart for the pages and components that we planned on having on the site. As the UX Engineer, I helped determine the feasibility of many components for implementation.
</p>
</div>
<img src="images/boba bar/Feasibility-Functionality.png" alt="feasibility vs. functionality chart for different Boba Bar features">
</section>
<section id="problem-statement" class="case-section">
<p>PRELIMINARY RESEARCH LED TO OUR PROBLEM STATEMENT</p>
<h3>
Boba Bar and Desserts needs a <strong>visually appealing</strong> website that reflects their <strong>business values</strong> while allowing customers to <strong>view menu items</strong> in order to <strong>establish themselves online</strong> and <strong>more directly connect with current and future customers</strong>.
</h3>
</section>
<section class="case-section">
<div>
<h2>Ideation</h2>
<p>
With research out of the way, we could start ideating and making early prototypes. We went through countless iterations and incorporated feedback at every step of the way.
</p>
</div>
<div>
<h3>Low-Fidelity Prototypes</h3>
<p>
While waiting for the client to supply us with content and imagery, we went to work on making layouts without visual elements or content incorporated. This allowed us to start thinking about layouts and get initial feedback.
</p>
</div>
<div class="left-right-images-alt">
<div>
<h3>Home</h3>
<img src="images/boba bar/low-home.png" alt="low fidelity of boba bar home page">
</div>
<div>
<h3>Menu</h3>
<img src="images/boba bar/low-menu.png" alt="low fidelity of boba bar menu page">
</div>
<div>
<h3>About</h3>
<img src="images/boba bar/low-about.png" alt="low fidelity of boba bar about page">
</div>
</div>
<div class="div-before-img">
<h3>A/B Testing</h3>
<p>
A/B testing was done on multiple components of the site. This allowed us to decide which iterations and components we should move forward with.
</p>
</div>
<div class="case-paragraph-alt">
<h4>Navigation Bar</h4>
<img src="images/boba bar/ab-nav.png" alt="a/b testing results for navigation bars" class="ab-image">
<h4>Customer Favorites in Home Page</h4>
<img src="images/boba bar/ab-home.png" alt="a/b testing results for home page" class="ab-image">
<h4>Headers in Menu Page</h4>
<img src="images/boba bar/ab-menu.png" alt="a/b testing results for menu page" class="ab-image">
</div>
</section>
<section class="case-section display">
<div>
<h2>Visual Elements</h2>
<p>
With the ideas for some of our screens out of the way, we could start thinking about visual elements and how they could be incorporated into our prototypes. We made a mood board and created a scalable design system for the site.
</p>
</div>
<div class="div-before-img">
<h3>Mood Board</h3>
<p>
Before incorporating visual elements, we made a mood board to visualize the look and feel we wanted to go for. We based it off of Boba Bar’s social media posts and any other artifacts we could find.
</p>
</div>
<img src="images/boba bar/mood_board.png" alt="mood board for boba bar">
<div class="div-before-img">
<h3>Design System</h3>
<p>
As the UX Engineer on this project, I helped create a scalable design system based off our mood board. This allowed for designs to stay consistent across the site and made it easier for me to componentize everything for implementation
</p>
</div>
<img src="images/boba bar/style_guide.png" alt="style guide for boba bar">
</section>
<section class="case-section">
<div>
<h2>Final Designs</h2>
<p>
We incorporated the appropriate content and visual elements from our client and used components from the design system to create one cohesive design.
</p>
</div>
<div class="final-container display">
<div class="screen-description">
<h3>Home Page</h3>
<div class="case-paragraph">
<p>
We created a home page that gives customers an overview of the business while displaying useful information such as customer favorites and location information.
</p>
</div>
</div>
<div class="final-img">
<img src="images/boba bar/Home.png" alt="Boba bar home page">
</div>
</div>
<div class="final-container display">
<div class="screen-description">
<h3>About Page</h3>
<div class="case-paragraph">
<p>
We flexed our creative thinking skills and really had fun with this page. We wanted to make it personable while also showcasing the playful nature of the business.
</p>
</div>
</div>
<div class="final-img">
<img src="images/boba bar/About.png" alt="Boba bar about page">
</div>
</div>
<div class="final-container display">
<div class="screen-description">
<h3>Menu Page</h3>
<div class="case-paragraph">
<p>
We made the menu page with the goal of emphasizing ease of ordering. We also included an easily accessible pdf menu and a filtering option for different menu categories. Puffles were emphasized as a novelty item since many tea items were deemed as self explanatory.
</p>
</div>
</div>
<div class="final-img">
<img src="images/boba bar/Menu.png" alt="Boba bar menu page">
</div>
</div>
<div class="other-pages div-before-img">
<h2>Catering & Career</h2>
<p>
The catering and career pages were made with embedded HTML forms. The client originally expressed that they wanted an embedded google form, but after iterations and communicating with our client, we settled on an embedded HTML forms as they are more visually appealing and better for usability.
</p>
</div>
<div class="left-right-images-alt">
<div>
<h3>Catering</h3>
<img src="images/boba bar/Catering.png" alt="Boba bar catering page">
</div>
<div>
<h3>Career</h3>
<img src="images/boba bar/Career.png" alt="Boba bar career page">
</div>
</div>
</section>
<section class="case-section">
<div>
<h2>Implementation (In Progress)</h2>
<p>
I am currently the sole developer implementing the site using HTML, CSS, and vanilla Javascript.
</p>
</div>
</section>
<section class="case-section">
<div>
<h2>Next Steps</h2>
<p>
If given more time and resources to work with Boba Bar and Desserts, we would:
<ol>
<li>Conduct A/B testing on more components of the site.</li>
<li>Fine tune microcopy and content.</li>
<li>Flesh out microinteractions to make the experience more enjoyable.</li>
</ol>
</p>
</div>
</section>
<section class="case-section">
<div>
<h2>Takeaways</h2>
<div class="takeaways">
<h3>Developers are Stakeholders</h3>
<p>
As the UX Engineer on this project, I’ve learned that developers are another stakeholder that should be considered when designing.
</p>
<h3>Constraints Drive Creativity</h3>
<p>
There were many constraints we faced throughout the project. Whether it be team, client, or design constraints, they pushed us to be more creative in order to overcome them.
</p>
<h3>Humans are More than Users</h3>
<p>
Designing for humans is complicated, but that’s the appeal of UX Design.
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-icons">
<li>
<ul>
<h6>Made with blood 🩸 sweat 💦 and tears 💧 by Calvin Cheung</h6>
</ul>
</li>
<li class="social">
<a href="mailto:[email protected]" target="_blank">
<i class="fa-regular fa-envelope"></i>
</a>
<a href="https://github.com/ccheung8" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/calvin-cheung-designs" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
</div>
</footer>
<script src="../scripts/index.js"></script>
</body>
</html>