-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscrunch.html
356 lines (346 loc) · 18.4 KB
/
scrunch.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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Primary Meta Tags -->
<title>Scrunch Case Study</title>
<meta name="title" content="Shardé Heim - Scrunch Case Study"/>
<meta name="description" content="Designing the experience for Agencies, Brands and Influencers running social media marketing campaigns globally" />
<meta name="keywords" content="Portfolio, Design Portfolio, Product Designer, UX Designer, UI Designer, Interface Designer, London Designer, Influencer Marketing, Scrunch, Case Study">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.shardeheim.com/scrunch" />
<meta property="og:title" content="Shardé Heim - Scrunch Case Study" />
<meta property="og:description" content="Designing the experience for Agencies, Brands and Influencers running social media marketing campaigns globally" />
<meta property="og:image" content="images/metaphoto9.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.shardeheim.com/scrunch" />
<meta property="twitter:title" content="Shardé Heim - Scrunch Case Study" />
<meta property="twitter:description" content="Designing the experience for Agencies, Brands and Influencers running social media marketing campaigns globally" />
<meta property="twitter:image" content="images/metaphoto9.jpg" />
<!-- Links -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,500i,700,800" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript" defer></script>
</head>
<body>
<!-- nav one for web -->
<nav>
<div class='fade-in-element'>
<div class="topnav">
<div class="topNavLeft">
<div class="navleftwidth1"> <a href="/#work">Work</a> </div>
<div class="navleftwidth2"> <a href="/#experience">Experience</a></div>
</div>
<div class="logo">
<div class="LogoIcons">
<a href="/"><img class="activeLogoIcons" src="images/logo.svg" alt="Logo"></a>
<a href="/"><img class="hoverLogoIcons" src="images/HLogo2.png" alt="HLogo"></a>
</div>
</div>
<div class="topNavRight">
<div class="navrightwidth3"><a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a></div>
<div class="navrightwidth4"><a href="about">About</a> </div>
</div>
</div>
</div>
</nav>
<!-- nav two for mobile -->
<div class="topMobilelNav fade-in-element">
<nav class="mobile-nav">
<a href="/#work">Work</a> <a href="/#experience">Experience</a> <a href="about">About</a> <a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a>
</nav>
<div class="mobileNavbLogo">
<a href="/"><img height="40" src="images/logo.svg" alt="moiblelogoimage"></a>
</div>
<button class="hamburger" aria-label="Hamburger Menu">
<div class="bar"></div>
</button>
</div>
<!-- above fold content -->
<div class="caseStudyTopContainer fade-in-element">
<div class="companyInfoSmaller">
<h1>Scrunch</h1>
<img height="20" src="images/ScunchLogo.svg" alt="ScunchLogoImage">
</div>
<div class="caseStudyDescriptionLarger">
<p>Designing the experience for Agencies, Brands and Influencers running social media marketing campaigns globally</p>
</div>
<div class="rollandtimeleft">
<h3>Roles</h3>
<div class="roleTags">
<div class="UXTag">
UX Design
</div>
<div class="UITag">
UI Design
</div>
<div class="DevTag">
Front End Dev
</div>
<div class="ContTag">
Content
</div>
</div>
</div>
<div class="rollandtimeright">
<h3>Time</h3>
<div class="tableDate">
Oct 2018 - Dec 2018
</div>
</div>
</div>
<!-- rest of case study content -->
<div class="fullwidthphoto fade-in-element">
<img src="images/ScrunchHeaderImage.jpg" width="100%" alt="ShardePostItNotesImage">
</div>
<!-- Entire Wrapper-->
<div class="container-wrapper fade-in-element">
<nav class="sidebarNav">
<div class="container">
<div class="sidebar">
<li class="section-1-smaller">
<img src="images/book.svg" width="17"height="17" alt="Context"/>
<a href="#section-1-smaller">Context</a>
</li>
<li class="section-2">
<img src="images/weight.svg" alt="Overview" width="17"height="17"/>
<a href="#section-2">The Challenge</a>
</li>
<li class="section-3">
<img src="images/search-status.svg" alt="UserFeedback" width="17" height="17"/>
<a href="#section-3">Early stage exploration</a>
</li>
<li class="section-4">
<img src="images/layer.svg" alt="DefiningRequiremnts" width="17" height="17"/>
<a href="#section-4">Consolidation</a>
</li>
<li class="section-5">
<img src="images/chart-2.svg" alt="Requirements" width="17" height="17"/>
<a href="#section-5">Findings</a >
</li>
<li class="section-6">
<img src="images/glass.svg" alt="Research" width="17" height="17"/>
<a href="#section-6">Ideal state exploration</a >
</li>
<li class="section-7">
<img src="images/pen-tool.svg" width="17"height="17" alt="Wireframe"/>
<a href="#section-7">Low fidelity wireframes</a>
</li>
<li class="section-8">
<img src="images/document-sketch.svg" alt="testings" width="17"height="17"/>
<a href="#section-8">Mockups</a>
</li>
<li class="section-9">
<img src="images/brush.svg" alt="Design" width="17" height="17"/>
<a href="#section-9" >High fidelity design</a>
</li>
<li class="section-10">
<img src="images/teacher.svg" alt="Learnings" width="17" height="17"/>
<a href="#section-10" >Learnings</a >
</li>
<li class="section-11">
<img src="images/arrow-up.svg" alt="Top" width="17" height="17"/>
<a href="#section-1-smaller" >Top</a >
</li>
</div>
</div>
</nav>
<!-- content-->
<section id="section-1-smaller" class="sectionImage">
<div class="container-content">
<h4>Context</h4>
<p> Scrunch is an Influencer Marketing Platform that matches 20 million influencers to brands and agencies globally. Scrunch’s Web App works as a directory to filter down influencers based on a range of criteria.
<br><br>
<b> Key roles: </b> During my time at Scrunch, I worked on a number of projects including redesigning the end to end web app experience, a mobile app designed just for Influencers, front end development and design for the Scrunch website, preset development and general content for the company.
<br>
<br>
<br>
</p>
</div>
</section>
<section id="section-2" class="sectionImage">
<div class="container-content">
<h4>The Challenge</h4>
<p>
The goal of the end-to-end Scrunch project was to map out the user’s complete journey through the platform, to use as a foundation when moving forward with new features and products.
<br><br>
<b>Project responsibility:</b> My role in the project was to investigate the current user journey of Scrunch. I then tested and updated what that looked like across Scrunch’s different personas and a multitude of use cases.
<br><br>
<b>The Team:</b> UX Co Research and Design with Timothy James
</p>
<br>
<br>
<br>
<br>
</div>
</section>
<section id="section-3" class="sectionImage">
<div class="container-content">
<h4>Early stage exploration / research</h4>
<p> We began by researching the current process. We analysed the journeys of Scrunch’s three main personas and their communication channels. These included: emails, notifications, Hubspot events etc. After roughly sketching the steps of each user’s journey we conducted user interviews with Scrunch’s stakeholders to validate what we had mapped.
</p>
<div><img src="images/CurrentSiteBrandMap.jpg" width="100%" alt="placeholderimage"></div>
<p> Each interview led to updates to the experience. We digitised each of the user flows so it was easier to consume. In the example below, red markers indicate where the Scrunch platform was being used, while other colours represent other mediums.
</p>
<div><img src="images/DigitisedCampagin.jpg" width="100%" alt="placeholderimage"></div>
<p> Our last step was to sketch out where the three personas correlated and where the touch points were. We drew up four different panels marking out the steps, and noted when any of them required input from the other persona.
</p>
<div><img src="images/ScrunchWireframes.jpg" width="100%" alt="placeholderimage"></div>
<br>
</div>
</section>
<section id="section-4" class="sectionImage">
<div class="container-content">
<h4>Consolidation</h4>
<p>Our research helped us realise we hadn’t addressed the different journeys users would take if they were involved with an in-app campaign vs a managed campaign. Using sticky notes, we mapped out a higher level of detail of the 6 journeys and their interactions in-between.
<br/><br/>Our consolidated map gave us an extensive look into Scrunch as an Agency and a Platform, as well as the journeys our users were taking through both.
</p>
<div>
<img src="images/endtoendpostitnotesimage.jpg" width="100%" alt="placeholderimage">
</div>
</p>
</div>
</section>
<section id="section-5" class="sectionImage">
<div class="container-content">
<h4>Findings</h4>
<p>To create a software-enabled marketplace, we needed everything to be within the Scrunch platform. The six user journeys we had identified needed to be consolidated into three.
<br><br>
<b>
1. Agency (Managed)<br>
2. Agency (In-App)<br>
3. Influencer (Managed)<br>
4. Influencer (In-App)<br>
5. Brand/Client (Managed)<br>
6. Brand (In-App)<br>
</b>
</p>
<br><br>
<p> to</p>
<br/><br/>
<p>
<b>
1. Agency (= managed)<br>
2. Brand<br>
3. Influencer <br>
</b>
</p>
<br><br>
</div>
</section>
<section id="section-6" class="sectionImage">
<div class="container-content">
<h4>Ideal state exploration and testing</h4>
<p>
We grouped the current experiences into six higher-level stages: pre-campaign, campaign preparation, client communication, influencer outreach and negotiation, influencer content, and post campaign report. We leveraged these stages and the way things were currently being done to brainstorm an ideal experience.
</p>
<div>
<img src="images/idealstatepostitnotes.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section >
<section id="section-7" class="sectionImage">
<div class="container-content">
<h4>Low fideltiy wireframes</h4>
<p>
Using the ideal state map, we created low-fidelity wireframes. Wireframe screens were then printed out and placed across the wall so we could physically map the connections between personas and product.
<br><br>
We then walked through each of the wire frames with staff members and collected feedback based on their questions and concerns.
</p>
<div>
<img src="images/idealstatemap.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section >
<section id="section-8" class="sectionImage">
<div class="container-content">
<h4>Mockups</h4>
<p>
We moved the wireframes to slightly higher fidelity designs adding additional states, screens and journeys to create individual prototypes for each persona and their unique journeys. This was done using Invision. We asked internal members to interact with the prototypes and collected feedback based on their actions.
</p>
<div>
<img src="images/wireframecomputer.gif" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-9" class="sectionImage">
<div class="container-content">
<h4>High fidelity designs </h4>
<p>
Moving forward, this complete prototype would be used for continuous development of Scrunch’s highest priorities. Scrunch’s directory was top of the list. You can see below some mockups of how that may be envisioned.
<br><br>
As this was my final of many projects at Scrunch, these are concept mock-ups that co design team Gangplank and I put forward and they may not be the final design Scrunch ends up using.
<br><br>
Credit: Co UI Design by <a href="https://gangplank.com.au/" target="_blank">Gangplank</a>
</p>
<div>
<img src="images/mockupscomputer.gif" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-10" class="sectionImage">
<div class="container-content">
<h4>Learnings</h4>
<p>
I really enjoyed working on this project during my last months at Scrunch: it felt like I was making a large contribution to the company’s direction.
<br><br>
One of the main aspects I would do differently is separately document testing session results. We updated the models directly rather than writing down stakeholder feedback. I would also not have spent as much time digitising all our earlier maps. There were so many changes between the first and final version that digitising could have been done at a later date.
<br>
<br>
</p>
</div>
</section>
</div>
<div class="prevnextwrapper fade-in-element">
<div class="prev">
<a href="airecruitment"><img height="13" src="images/blue-arrow-left.svg" alt="BlueArrowLeftImage"> AI Job Interviewer project</a>
</div>
<div class="next">
<a href="portfolio">Portfolio project <img height="13" src="images/blue-arrow.svg" alt="BlueArrowRightImage"></a>
</div>
</div>
<!-- full width photo-->
<div class="fullwidthphoto fade-in-element"><img src="images/squad.jpg" width="100%" alt="SquadImage"></div>
<!--Footer-->
<footer>
<div class="footerwrapper fade-in-element">
<a href="mailto:%[email protected]">
<h2>Say hi, don't be shy <img height="30" src="images/arrow-right.svg" alt="ArrowRightImage"></h2>
<p>Feel free to reach out for collaborations or just a friendly hello 🚀 <b>Let's chat.</b></p>
</a>
</div>
<div class="socials fade-in-element">
<div class="footerIcons">
<div class="EmailIcons">
<a href="mailto:[email protected]" target="_blank">
<img class="activeEmailImage" src="images/emailicon.svg" alt="EmailIconLight"></a> <a href="mailto:[email protected]" target="_blank">
<img class="hoverEmailImage" src="images/emailicondark.svg" alt="EmailIcondDark"></a>
</div>
<div class="CameraIcons">
<a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="activeCameraImage" src="images/camericon.svg" alt="CameraIconLight"></a> <a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="hoverCameraImage" src="images/camericondark.svg" alt="CameraIconDark"></a>
</div>
<div class="InstagramIcons">
<a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="activeInstagramImage" src="images/instagramicon.svg" alt="InstagramIconLight"></a> <a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="hoverInstagramImage" src="images/instagramicondark.svg" alt="InstagramIconDark"></a>
</div>
<div class="LinkedinIcons">
<a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="activeLinkedinImage" src="images/linkedinicon.svg" alt="LinkedinIconLight"></a> <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="hoverLinkedinImage" src="images/linkedinicondark.svg" alt="LinkedinIconDark"></a>
</div>
</div>
</div>
<div class="madeBy">
Designed and built by Shardé Heim © 2023
</div>
</footer>
</body>
</html>