-
Notifications
You must be signed in to change notification settings - Fork 1
/
case_study--design_sprint.html
184 lines (159 loc) · 14.1 KB
/
case_study--design_sprint.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design sprint for JoraLocal | by Vedran Arnautovic</title>
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="public"/>
</head>
<body>
<!-- NAV -->
<nav class="nav nav--on-light-bg noselect" id="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html">Home</a></li>
<li class="nav__item"><a href="about_vedran.html">About me</a></li>
<li class="nav__item nav__item--selected"><a href="vedrans_design_work.html">My work</a></li>
</ul>
</nav>
<!-- Make nav sticky on scroll -->
<script type="text/javascript" src="/js/sticky_nav.js"></script>
<script type="text/javascript">formatStickyNav("@colour-light-gray");</script>
<!-- lazy load images -->
<script src="js/lazy_img.js"></script>
<!-- CASE STUDY INTRO -->
<div class="section section--medium">
<div class="section__content section--top-of-page section--last-in-section section__content--allow-wide">
<h1 class="h1-heading">Design sprint for JoraLocal</h1>
<p><a class ="link link--on-light-bg link--inline" target="_blank" href="https://www.seek.com.au/">SEEK</a> is the largest online employment marketplace in Australia.</p>
<p>Recognising that the competition in the hospitality and retail job ad market was heating up, we decided to design and quickly validate our own product to compete directly in this space.</p>
</div>
</div>
<div class="section section--light ">
<div class="sub-section__content sub-section--first-in-section">
<h2 class="h2-heading">The process</h2>
<p>I've previously written extensively about our design sprint process, so if you want to see more details including some tips on how to run a design sprint, check out <a class ="link link--on-light-bg link--inline" target="_blank" href="https://medium.com/seek-user-experience/using-design-sprint-to-accelerate-innovation-part-i-of-ii-f643ad42cf60#.8f4gtb119">my post on Medium</a>.</p>
<p>Our process heavily borrowed from Google’s design sprint process, but we did make some key modifications, which I cover in the article above. So here is Our process in a nutshell.</p>
<h3 class="h3-heading">Day 1 – Unpack and immerse</h3>
<p>The first day was spent ‘unpacking’ all the information we knew about our target audience. The stragegy team shared their knowledge gathered through Jobs To Be Done research. We had representatives form customer support and sales share their kowledge, since they spend most of their time with customers.</p>
<div id="unpack-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_unpack.jpg">
<img id="unpack-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_unpack_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('unpack-img-container','unpack-img-placeholder',"The team paying close attention to research findings");</script>
<div class="image-caption">The team paying close attention to research findings</div>
<p>Us designers contributed our insights gathered through extensive user research conducted over the past couple of years.</p>
<p>At the end of the day we had a lot of information covering the walls of our design room which needed to be sythesised into something useful.</p>
<h3 class="h3-heading">Day 2 – Build empathy</h3>
<p>We took the information we shared on day 1, and set to work building empathy maps and customer journey maps. This would form the foundation of insights we would use to decide which opportunities to focus our attention on during the ideation phase.</p>
<div id="empathy-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_empathy_map.jpg">
<img id="empathy-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_empathy_map_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('empathy-img-container','empathy-img-placeholder',"Empathy map");</script>
<div class="image-caption">One of the empathy maps we built</div>
<h3 class="h3-heading">Day 3 & 4 – Ideate and test</h3>
<p>In order to design a solution for this target segment, we had to priritise the opportunities we identified through empathy and customer journey maps.</p>
<p>Once we agreed on our priorities, the team set out to design potential solutions, using the <a class ="link link--on-light-bg link--inline" target="_blank" href="https://medium.com/seek-user-experience/two-types-of-collaborative-design-sessions-46c6d7090b70#.q12go7h1x">design studio method</a>.</p>
<div id="sketching-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_desing_sprint_sketch.jpeg">
<img id="sketching-img-placeholder" class="img-small" src="resources/images/seek_desing_sprint_sketch_PLACEHOLDER.jpeg">
<div style="padding-bottom: 66.8%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('sketching-img-container','sketching-img-placeholder',"The team sketching together");</script>
<p>However, we had to work quickly – during each of the two ideation days, we had real users coming in during the afternoon to test our designs, using paper prototypes.</p>
<div id="test-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_test.png">
<img id="test-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_test_PLACEHOLDER.png">
<div style="padding-bottom: 66.8%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('test-img-container','test-img-placeholder',"Testing paper prototypes with users");</script>
<div class="image-caption">Paper prototype testing with a bar owner</div>
<h3 class="h3-heading">Day 5 – Converge</h3>
<p>Day 5 was spent taking stock of everything we learnt during the unpacking phase, as well as from the feedback we gathered from our users.</p>
<p>After organising all the information, we voted on and prioritised the ideas we developed during the previous two days.</p>
<div id="converge-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_converge.jpeg">
<img id="converge-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_converge_PLACEHOLDER.jpeg">
<div style="padding-bottom: 51.46%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('converge-img-container','converge-img-placeholder',"Voting on design features to take to the next phase");</script>
<div class="image-caption">Voting on design features to take to the next phase</div>
<h3 class="h3-heading">Day 6 – Prototype</h3>
<p>With most of the decisions made, we could focus on cranking out the prototype. The only thing left to design at this point was the navigation model for the app, since we wanted the users to be able to use the app as they would in real life. We quickly put pen-to-paper to investigate possible options.</p>
<div id="navmodel-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_desing_sprint_nav_model.png">
<img id="navmodel-img-placeholder" class="img-small" src="resources/images/seek_desing_sprint_nav_model_PLACEHOLDER.png">
<div style="padding-bottom: 70.7%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('navmodel-img-container','navmodel-img-placeholder',"Voting on design features to take to the next phase");</script>
<div class="image-caption">Designing our nav model on paper</div>
<p>At this point, most of the team want to their day-to-day jobs, while one of my designer colleagues and I dove into prototyping the mobile application we needed to validate our idea with real users.</p>
<p>We designed in Sketch and prototpyed the application using <a class ="link link--on-light-bg link--inline" target="_blank" href="https://marvelapp.com/">Marvel</a>.</p>
<div id="prototype-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_prototype.png">
<img id="prototype-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_prototype_PLACEHOLDER.png">
<div style="padding-bottom: 86.72%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('prototype-img-container','prototype-img-placeholder',"Artboards in Sketch");</script>
<div class="image-caption">One of the many sets of artobards in Sketch</div>
<div id="marvel-img-container" class="image--small image--with-caption placeholder" data-large="resources/images/seek_design_sprint_marvel.png">
<img id="marvel-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_marvel_PLACEHOLDER.png">
<div style="padding-bottom: 202.7%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('marvel-img-container','marvel-img-placeholder',"Mobile prototype in Marvel");</script>
<div class="image-caption">A screen from the prototype</div>
<h3 class="h3-heading">Day 7 – Guerilla testing</h3>
<p>The final day was the most daunting, but also most rewarding. We split into pairs and hit the streets with our prototpyed app in hand. Walking into cafes and restaurants, we tested the app with owners and shift managers.</p>
<div id="guerilla-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_guerilla_test.jpg">
<img id="guerilla-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_guerilla_test_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('guerilla-img-container','guerilla-img-placeholder',"Artboards in Sketch");</script>
<div class="image-caption">Me, guerilla testing with a local cafe owner</div>
<p>We received a lot of feedback – some positive, and some negative, but always constructive in terms of giving us a direction to pursue.</p>
<p>If I learnt one thing from this guerilla testing exercise, it was that when you go out to your users unannounced, you face an altogether different type of reaction. Users are more likely to reject your idea and to provide critical feedback.</p>
</div>
<div class="sub-section__content sub-section--last-in-section">
<h2 class="h2-heading">The outcome</h2>
<p>The design sprint allowed us to come up with an innovative idea, and validate it, within the space of one week. We learnt a lot about our target audience and with the input of real users, we pivoted on a number of aspect of the product during the course of the sprint.</p>
<p>Since running the design sprint, we have created a spin-off company to take this product to market – that is how JoraLocal was born.</p>
<div id="outcome-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/seek_design_sprint_jora.png">
<img id="outcome-img-placeholder" class="img-small" src="resources/images/seek_design_sprint_jora_PLACEHOLDER.png">
<div style="padding-bottom: 55.57%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('outcome-img-container','outcome-img-placeholder',"Screenshots of JoraLocal app");</script>
<div class="image-caption">Some of the screens frome the live product</div>
<p>The sprint itself was a major success, now it is up to us to further refine the idea as we take the JoraLocal product to market.</p>
<h3 class="h3-heading">On a personal note...</h3>
<p>Personally, I gained a lot from the sprint, as did most of those who participated. Many of the techniques we used during the week have become part of my personal design process, and I have been able to run simplified design sprints for a couple of my freelance clients.</p>
</div>
<div class="section section--medium section--nav">
<div class="sub-section__content sub-section--last-in-section">
<a class="link link--on-light-bg link--case-study-nav" href="vedrans_design_work.html#DesignSprintForJoraLocal">Back to ‘My work’</a>
<a class="link link--on-light-bg link--inline" href="case_study--hirer_vision.html">Next case study</a>
</div>
</div>
</div>
<!-- START FOOTER -->
<script src="js/clipboard.min.js"></script>
<script src="js/copy_email.js"></script>
<div id='footer'></div>
<div class="footer section--dark footer__content">
<div class="section__content noselect">
<div id="email-bttn" class="bttn bttn--almost-black bttn--email">
<span class="bttn__label" id="email-label"
onmouseover="mouseOver('email-label')"
onmouseout="mouseOut('email-label','[email protected]')"
data-clipboard-text="[email protected]">
</span>
</div>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://twitter.com/vedranio">Twitter</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://medium.com/@vedranio">Medium</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.linkedin.com/in/vedran-arnautovic-716a1b128">LinkedIn</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://github.com/vedranio">GitHub</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.instagram.com/vedran_arnautovic/">Instagram</a>
<script type="text/javascript">copyEmailToClipBoard('.bttn__label','email-label', "bttn__label","[email protected]");</script>
</div>
</div>
<!-- END FOOTER -->
</body>
</html>