-
Notifications
You must be signed in to change notification settings - Fork 1
/
for-goodness-cakes-project.html
325 lines (325 loc) · 12.1 KB
/
for-goodness-cakes-project.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>For Goodness Cakes Project</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta
name="description"
content="Explore Steven Liu's work as a digital designer and project manager for For Goodness Cakes, a bespoke bakery. Delve into his portfolio showcasing UX/UI design expertise, highlighting how Steven optimized communication channel s and elevated the ordering experience. Discover innovative projects, user research, and prototyping skills." />
<meta
name="keywords"
content="Steven Liu, digital designer, UX design, UX/UI design, product design, user experience, innovative projects, user research, prototyping, visual design, proof-of-concept, user flows, information architecture, personas, affinity maps, project management" />
<meta name="author" content="Steven Liu" />
<link
rel="canonical"
href="https://www.stevenliudesign.com/for-goodness-cakes-project.html" />
<link rel="stylesheet" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="nav flex">
<div class="container">
<a href="index.html" class="logo">Steven Liu Design</a>
<div class="nav-menu desktop">
<ul>
<li><a href="index.html">HOME</a></li>
<li>
<a href="mailto:steven.v.liu@gmail.com?subject=Portfolio%20Mail"
>CONTACT</a
>
</li>
<li>
<a
href="https://www.dropbox.com/scl/fi/5t53ycs0imfh98oe4ukv4/Steven-Liu-Resume.pdf?rlkey=lcgvawp9u4vxpsjikkdm8eqjx&dl=0"
target="_blank"
rel="noopener noreferrer"
>RESUME</a
>
</li>
</ul>
</div>
<div class="toggle mobile">
<span class="top"></span>
<span class="mid"></span>
<span class="bot"></span>
</div>
<div class="nav-overlay">
<ul>
<li><a href="index.html">HOME</a></li>
<li>
<a href="mailto:steven.v.liu@gmail.com?subject=Portfolio%20Mail"
>CONTACT</a
>
</li>
<li>
<a
href="https://www.dropbox.com/scl/fi/5t53ycs0imfh98oe4ukv4/Steven-Liu-Resume.pdf?rlkey=lcgvawp9u4vxpsjikkdm8eqjx&dl=0"
target="_blank"
rel="noopener noreferrer"
>RESUME</a
>
</li>
</ul>
</div>
</div>
</div>
<div class="banner hidden">
<img
src="image/for_goodness_cakes_banner.jpg"
alt="Cupcakes - Banner"
loading="lazy" />
</div>
<div class="intro">
<div class="container">
<div class="overview">
<div class="split">
<div class="section">
<h4 class="hidden">CLIENT</h4>
<p class="hidden">For Goodness Cakes</p>
</div>
<div class="section">
<h4 class="hidden">MY ROLE</h4>
<ul>
<li class="hidden">Project Manager</li>
<li class="hidden">UX/UI Designer</li>
</ul>
</div>
</div>
<div class="section">
<h4 class="hidden">SUMMARY</h4>
<h2 class="hidden">
<span class="highlight">For Goodness Cakes</span>, a bespoke
bakery specializing in custom cakes, wanted to
<span class="highlight">optimize their communication</span>
channels and
<span class="highlight">elevate the ordering experience</span>.
</h2>
</div>
</div>
<div class="project-image hidden">
<img
src="image/for_goodness_cakes_hero.jpg"
alt="For Goodness Cakes - Desktop Mockup"
loading="lazy" />
</div>
<div class="brief">
<div class="header hidden">
<h4>THE BRIEF</h4>
<div class="divider"></div>
</div>
<div class="split">
<div class="section">
<h2 class="hidden">BUSINESS GOALS</h2>
<p class="hidden">
Develop a <span class="highlight">landing page</span> to
actively <span class="highlight">proactively engage</span> with
customers and <span class="highlight">enhance clarity</span> of
the ordering process.
</p>
</div>
<div class="section">
<h2 class="hidden">PROBLEM</h2>
<p class="hidden">
As a small business primarily operating on social media, posting
announcements on multiple platforms creates
<span class="highlight">confusion and difficulties</span> for
both parties. This complicates the ordering process, introducing
the <span class="highlight">potential for errors</span>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="research">
<div class="container">
<div class="header hidden">
<h4>RESEARCH PROCESS</h4>
<div class="divider"></div>
</div>
<div class="section">
<h2 class="hidden">METHODS USED</h2>
<ul>
<li class="hidden">User Interviews</li>
<li class="hidden">User Flow</li>
<li class="hidden">Information Architecture</li>
<li class="hidden">A/B Testing</li>
<li class="hidden">Prototype Testing</li>
</ul>
<p class="hidden">
I <span class="highlight">interviewed</span> customers about their
cake ordering experiences to create an optimized
<span class="highlight">user flow</span>.
</p>
</div>
<div class="section hidden">
<h2>INFORMATION ARCHITECTURE</h2>
</div>
</div>
<div class="img-container">
<img
src="image/for_goodness_cakes_information_architecture.png"
alt="Information Architecture"
class="zoomable hidden"
loading="lazy" />
</div>
<div class="container hidden">
<h2>USER FLOW</h2>
</div>
<div class="img-container">
<img
src="image/for_goodness_cakes_user_flow.png"
alt="User Flow - Ordering a custom cake"
class="zoomable hidden"
loading="lazy" />
</div>
<div class="container mobile hidden">
<img
src="image/for_goodness_cakes_animated_asset2.gif"
alt="For Goodness Cakes - Ordering a custom cake on Mobile"
loading="lazy" />
</div>
<div class="container desktop hidden">
<img
src="image/for_goodness_cakes_animated_asset1.gif"
alt="For Goodness Cakes - Ordering a custom cake on Desktop"
loading="lazy" />
</div>
</div>
<div class="needs">
<div class="container">
<div class="header hidden">
<h4>USER NEEDS</h4>
<div class="divider"></div>
</div>
<div class="split">
<div class="section">
<h2 class="hidden">ANNOUNCEMENTS</h2>
<p class="hidden">
Currently, announcements and updates are posted manually on
several social media platforms. This is tedious for the client as
well as the customers.
</p>
<p class="hidden">
A dedicated section on the landing page would make it easier for
customers to keep up with business announcements.
</p>
</div>
<div class="section">
<h2 class="hidden">INSPIRATION IMAGES</h2>
<p class="hidden">
Customers often struggle with depicting their cake ideas in words.
This often leads to unmet expectations.
</p>
<p class="hidden">
Many customers want the ability to upload their inspiration for
designs and styles to help the baker.
</p>
</div>
</div>
<div class="prototype mobile">
<div>
<img
src="image/for_goodness_cakes_animated_asset3.gif"
alt="For Goodness Cake - Mobile Landing Page"
loading="lazy"
class="hidden" />
<p class="hidden">Landing page</p>
</div>
</div>
<div class="prototype desktop">
<div>
<img
src="image/for_goodness_cakes_landing_page.png"
alt="For Goodness Cake - Desktop Landing Page"
loading="lazy"
class="hidden" />
<p class="hidden">Landing page</p>
</div>
<div>
<img
src="image/for_goodness_cakes_order_form.png"
alt="For Goodness Cake - Desktop Order Form"
loading="lazy"
class="hidden" />
<p class="hidden">Order form</p>
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class="work">
<div class="container">
<div class="header hidden">
<div class="header-row">
<h4>PREVIOUS</h4>
<h4>UP NEXT</h4>
</div>
<div class="divider"></div>
</div>
<div class="card-container">
<div class="project-card">
<a href="cardio-project.html">
<img
src="image/cardio_project_card.jpg"
alt="Card.io Project"
class="project-image hidden"
loading="lazy" />
</a>
<p class="project-title hidden">Gamified Health and Fitness</p>
<p class="project-type hidden">Mobile</p>
</div>
<div class="project-card">
<a href="we-intervene-project.html">
<img
src="image/we_intervene_project_card.jpg"
alt="We Intervene Project"
class="project-image hidden"
loading="lazy" />
</a>
<p class="project-title hidden">Student Management Platform</p>
<p class="project-type hidden">Mobile - Website</p>
</div>
</div>
</div>
</div>
<div class="jump-top flex">
<span class="triangle"></span>
</div>
<div class="footer">
<div class="container">
<div class="divider"></div>
<div class="section">
<p class="hidden">© STEVEN LIU DESIGN</p>
<div class="links">
<a
href="mailto:steven.v.liu@gmail.com?subject=Portfolio%20Mail"
class="hidden"
>EMAIL</a
>
<a href="https://www.linkedin.com/in/steven-v-liu/"
target="_blank"
rel="noopener noreferrer"
class="hidden"
>LINKEDIN</a
>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="js/scroll.js"></script>
<script defer src="js/nav.js"></script>
<script defer src="js/matchHeight.js"></script>
<script defer src="js/top.js"></script>
<script defer src="js/topMargin.js"></script>
<script defer src="js/zoom.js"></script>
</body>
</html>