-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcase_study--design_workshop_facilitation.html
161 lines (136 loc) · 12.1 KB
/
case_study--design_workshop_facilitation.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Workshop facilitation and wireframe design | 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">Workshop facilitation and wireframe design</h1>
<p><a class ="link link--on-light-bg link--inline" target="_blank" href="https://www.rubicon-world.com/">Rubicon</a> are a small software development company based in Sarajevo, who work with clients around the world. They wanted to try a different way of kicking off product development with their clients, and chose me as a design workshop facilitator.</p>
</div>
</div>
<div class="section section--light ">
<div class="sub-section__content sub-section--first-in-section">
<h2 class="h2-heading">The challenge</h2>
<p>Rubicon were embarking on a project with a Dutch client,<a class="link link--on-light-bg link--inline" target="_blank" href="https://en.assessment-training.com/"> Assessment Training</a>, and wanted to try a different approach. To this point, they worked purely from client briefs, with little say in the design. They wanted to get the whole team, including the developers and the client, involved in the design process.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">A lucky coincidence</h2>
<p>It just happened that I had kickstarted <a class ="link link--on-light-bg link--inline" target="_blank" href="https://www.meetup.com/Sarajevo-UX-Design/">the first UX meetup group in Sarajevo</a>, and was delivering my <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#.buw82p9vg">talk on design sprints</a> a month before Rubicon were to begin working with their client.</p>
<p>After the presentation, I was approached by Rubicon’s CEO, and we decided to try the design sprint process with their client.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">One size does not fit all</h2>
<p>In engagements like this, my first job as a designer is to figure out what the client actually needs. Just because the client says “we want to run a design sprint” doesn't mean they need a design sprint.</p>
<p>I had previously <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#.buw82p9vg">writen</a> about how we customised the Google Design Sprint process at SEEK, in order to fit our needs.</p>
<p>After a conversation with the team at Rubicon, it was clear that the stage the client’s product was at did not require a full blown design sprint. What they needed was a targeted design workshop to help everyone understand the user base, the existing product, the challenges it was facing and to address those challenges. We all agreed that the best way to do this was through a set of collaborative design activities.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Workshop planning</h2>
<p>I spent about half a day coming up with the <a class ="link link--on-light-bg link--inline" target="_blank" href="https://docs.google.com/document/d/1-KMmRPKAmp5R-mmDty8x7VkCjmbSbuX3Kx4SdJmOVWI/edit?usp=sharing">workshop plan</a>.</p>
<p>The fact that the client had an existing, validated product, justified the decision not to validate our design with users at this stage. Because the clients were coming to Sarajevo from The Netherlands, I knew I had limited time to work with, so I focused on group discovery and collaborative design, in order to make best use of everyone’s time.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Running the workshop</h2>
<h3 class="h3-heading">Day one</h3>
<p>The first day of the workshop was spent on discovery activities including empathy mapping and product mapping. This allowed the whole team, from the product owners to the developers and testers, to gain a common understanding of the problem we were trying to solve.</p>
<div id="empathy-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/rubicon_empathy_map.jpg">
<img id="empathy-img-placeholder" class="img-small" src="resources/images/rubicon_empathy_map_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('empathy-img-container','empathy-img-placeholder',"One of the Rubicon devs adding to our empathy map");</script>
<div class="image-caption">One of the Rubicon devs adding to our empathy map</div>
<p>Empathy mapping was particularly useful as it allowed the team to put themselves in the shoes of the end users. Later on, as we started getting into the design, we often reflected on what we discovered during empathy mapping.</p>
<h3 class="h3-heading">Day two</h3>
<p>Once we had a good understanding of the existing product and its audience, we spent the second day designing the product together. We used a couple of collaborative design techniques<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#.vchxvmfst"> I wrote about before</a>, as well as a <a class ="link link--on-light-bg link--inline" target="_blank" href="https://medium.com/seek-user-experience/4-simple-steps-to-improve-your-ui-sketches-4ad2f1433373#.fecl4kbil">sketching technique</a> I had used a number of times.</p>
<div id="sketching-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/rubicon_design_sketching.jpg">
<img id="sketching-img-placeholder" class="img-small" src="resources/images/rubicon_design_sketching_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('sketching-img-container','sketching-img-placeholder',"The Rubicon team and the clients sketching together");</script>
<div class="image-caption">The Rubicon team and the clients sketching together</div>
<p>The key here was that everyone was inloved in the design. This was something new for both Rubicon and their clients.</p>
<p>At the end of the day, there was a feeling that we came up with some great ideas, but most importantly, that we were all involved in the design and decision making proces.</p>
<div id="discussing-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/rubicon_discussing_design.jpg">
<img id="discussing-img-placeholder" class="img-small" src="resources/images/rubicon_discussing_design_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('discussing-img-container','discussing-img-placeholder',"One of the clients presenting his designs");</script>
<div class="image-caption">One of the clients presenting his designs</div>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Post-workshop wireframe design</h2>
<p>With designs and user flows agreed upon, I took our sketches and started work on detailed wireframes. Designing in Sketch and prototyping with InVision, allowed me to turn around a full product low-fi prototype, and gather client feedback within three days.</p>
<div id="wireframes-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/rubicon_sketch_wireframes.png">
<img id="wireframes-img-placeholder" class="img-small" src="resources/images/rubicon_sketch_wireframes_PLACEHOLDER.png">
<div style="padding-bottom: 77.44%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('wireframes-img-container','wireframes-img-placeholder',"Part of the Sketch file I produced as my final output");</script>
<div class="image-caption">Part of the Sketch file I produced as my final output</div>
<div id="sample-img-container" class="image--medium placeholder" data-large="resources/images/rubicon_invision_prototype_sample.png">
<img id="sample-img-placeholder" class="img-small" src="resources/images/rubicon_invision_prototype_sample_PLACEHOLDER.png">
<div style="padding-bottom: 41.6%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('sample-img-container','sample-img-placeholder');</script>
<p>The visual design for this product was handed over to a designer in The Netherlands and is not shown here.</p>
</div>
<div class="sub-section__content sub-section--last-in-section">
<h2 class="h2-heading">The outcome</h2>
<p>At the end of the workshop, Rubicon and their clients had a common understanding of the product they were building as well as the audience they were building it for.</p>
<p>The wireframes and the prototype I delivered allowed Rubicon to start development straigth after the workshop.</p>
<p>The product has since been launched.</p>
<br>
<a class="link link--on-light-bg" target="_blank" href="https://en.assessment-training.com/">Visit Assessment Training</a>
</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#WorkshopFacilitationAndWireframeDesign">Back to ‘My work’</a>
<a class="link link--on-light-bg link--inline" href="case_study--credit_card_form_redesign.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 -->
</html>