-
Notifications
You must be signed in to change notification settings - Fork 4
/
Focusing Design with Design Strategy - UX Booth UX Booth.html
679 lines (594 loc) · 51 KB
/
Focusing Design with Design Strategy - UX Booth UX Booth.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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
<!DOCTYPE html>
<!-- saved from url=(0081)http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/ -->
<html class="wf-refrigeratordeluxe1refrigeratordeluxe2-n4-active wf-abriltext1abriltext2-n4-active wf-abriltext1abriltext2-i4-active wf-refrigeratordeluxe1refrigeratordeluxe2-n7-active wf-abriltext1abriltext2-n7-active wf-abriltext1abriltext2-i7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="readability-verification" content="hrChHYRh8s8EAWTRYwXyVdeDcEFZgU7yzsEfsSWc">
<title>Focusing Design with Design Strategy - UX Booth | UX Booth</title>
<link rel="shortcut icon" href="http://uxbooth.s3.amazonaws.com/favicon.ico">
<script async="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/analytics.js"></script><script id="twitter-wjs" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/widgets.js"></script><script type="text/javascript" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/jquery.min.js"></script>
<script type="text/javascript" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/xzw2eqk.js"></script>
<style type="text/css">.tk-refrigerator-deluxe{font-family:"refrigerator-deluxe-1","refrigerator-deluxe-2",sans-serif;}.tk-abril-text{font-family:"abril-text-1","abril-text-2",sans-serif;}</style><link rel="stylesheet" href="http://use.typekit.com/k/xzw2eqk-d.css?3bb2a6e53c9684ffdc9a9bf01b5b2a62ec6379d745fd2575909b931ba2232752420ccdc065efca2e7efc8b707ed5b6866655ee590a6fb0b728915a936d85ddea220081de5ec31fc35086a1dc639cc10fece5c3d2499aa72e77571df0b248f09f981777364a7e36e9d8177b9d1ae86ba94bd53f37467c7882a51a4ee579d778a54f70a0e71023c68df89143164cafd0459ff3fdc2486cf8eba54fffb0ed5d6b5366"><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="http://assets.uxbooth.com/themes/uxbooth/javascripts/html5shiv.js"></script>
<![endif]-->
<link href="./Focusing Design with Design Strategy - UX Booth UX Booth_files/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/basic.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/stylesheets/header.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/stylesheets/footer.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/stylesheets/single.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://assets.uxbooth.com/themes/uxbooth/stylesheets/ie.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="./Focusing Design with Design Strategy - UX Booth UX Booth_files/print.css" type="text/css" media="print" charset="utf-8">
<link rel="alternate" type="application/rss+xml" title="The UX Booth" href="http://feeds.feedburner.com/uxbooth">
<script src="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/javascripts/compress.js?v=2013241814" type="text/javascript" charset="utf-8"></script>
<script src="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/javascripts/jquery.pagination.js?v=2013241814" type="text/javascript" charset="utf-8"></script>
<script src="http://www.uxbooth.com/wordpress/wp-content/themes/uxbooth/javascripts/add_pagination.js?v=2013241814" type="text/javascript" charset="utf-8"></script>
<!-- BuySellAds PRO Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://cdn.buysellads.com/ac/pro.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script><script type="text/javascript" async="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/pro.js"></script>
<!-- End BuySellAds PRO Ad Code -->
<script id="_notify_projs" type="text/javascript" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/pro.js"></script><script type="text/javascript" id="_bsaPRO_js" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/CAAIV;C67D62V;C6SE" async="async"></script><script type="text/javascript" id="_bsaPRO_js" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/saved_resource" async="async"></script></head>
<body id="blog" data-twttr-rendered="true">
<div id="ux-booth">
<header id="header" role="masthead">
<div class="site-width">
<h1><a href="http://www.uxbooth.com/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'BigBanner', 'UX Booth Ticket']);">UX Booth</a></h1>
<ul id="global-navigation">
<li><a href="http://www.uxbooth.com/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Home']);">Home</a></li>
<li class=" current">
<a href="http://www.uxbooth.com/articles/" title="User Experience Articles" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Blog']);">Articles <span class="drop-down-trigger"></span></a>
</li>
<li>
<a href="http://www.uxbooth.com/about/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'About']);">About</a>
</li>
<li><a href="http://www.uxbooth.com/contribute/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Contribute']);">Contribute</a></li>
</ul>
<form id="search" class="search" method="get" action="http://www.uxbooth.com/search/">
<input type="hidden" name="cx" value="007238140087581621538:llm-htna2fm">
<input type="hidden" name="cof" value="FORID:11">
<input type="hidden" name="ie" value="UTF-8">
<div class="search-input field">
<span class="search-icon icon-search icon"></span>
<label>Search</label>
<input type="text" tabindex="1" id="s" name="q" placeholder="Search UX Booth">
</div>
<div class="search-button field">
<input type="submit" name="sa" value="Search" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Search', 'Search Button']);" class="button">
</div>
<script type="text/javascript" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/brand"></script>
</form>
</div>
</header>
<div id="breadcrumbs">
<div class="site-width">
<ul>
<li class="home"><a href="http://www.uxbooth.com/"><span>Home</span></a></li>
<li><a href="http://www.uxbooth.com/articles/"><span>Articles</span></a></li>
<li><a href="http://www.uxbooth.com/topics/articles/interaction-design/"><span>Interaction design</span></a></li>
<li class="last-child"><span>Focusing Design with Design Strategy<span class="fade"></span></span></li>
</ul>
</div>
</div>
<div id="content" class="single post articles interaction-design" role="main">
<div class="site-width">
<div class="primary-secondary-content">
<div class="primary-content">
<article class="hentry single" id="post-5480">
<header>
<h1 class="entry-title"><a href="./Focusing Design with Design Strategy - UX Booth UX Booth_files/Focusing Design with Design Strategy - UX Booth UX Booth.html" rel="bookmark">Focusing Design with Design Strategy</a></h1>
<dl class="entry-meta">
<dt class="author">By</dt>
<dd class="author vcard">
<a class="url fn" href="http://www.uxbooth.com/author/andrewmaier/">
Andrew Maier <img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc" alt="Andrew Maier" width="64" height="64">
</a>
</dd>
<dt class="date">On</dt>
<dd class="date"><abbr class="published" title="9:30 am">October 20th, 2009</abbr></dd>
<dt class="category">Category</dt>
<dd class="category">
<ul class="categories">
<a href="http://www.uxbooth.com/topics/articles/" title="View all posts in Articles" rel="category tag">Articles</a>, <a href="http://www.uxbooth.com/topics/articles/interaction-design/" title="View all posts in Interaction design" rel="category tag">Interaction design</a> </ul>
</dd>
<dt>Social</dt>
<dd>
<div style="margin-bottom: 3px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/tweet_button.1400006231.html" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-none" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 56px; height: 20px;"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</dd>
<!-- <dt class="comments">Comments</dt>
<dd class="comments">
<a href="#comments">3</a>
</dd> -->
</dl><!-- dl.entry-meta -->
</header>
<div class="content entry-content">
<p class="important">Design has a reputation for being one of the more ambiguous areas of product development. I don’t know how many times I’ve heard clients say: “first we’ll get the application functionally correct and then we’ll put a skin on top of it.” This gets my blood boiling.</p>
<p>As <a href="http://whitneyhess.com/blog/">Whitney Hess</a> stated earlier this year: <a href="http://mashable.com/2009/01/09/user-experience-design/">UX Design isn’t just “a step in the process.”</a> Users themselves experience much more than just the look and feel of an application. By the time the aforementioned client addresses their application’s aesthetics, many decisions will have been made that have affects the user experience of a project.</p>
<p>Therefore, I engage clients as early as possible in the course of their application’s development, preferably before any code has been written. As <em>a consultant first and a designer second</em>, I work hand-in-hand with my clients—because building a website isn’t easy. I know this because I build websites for a living. With that in mind, empathize with your client: all they want is an application that does “what it says on the box” from day one. This is the reason why functionality is so important to them.</p>
<p>But as interaction designers, we know that <em>the ideas behind the design</em> are much more important than the depth of a dropshadow or the size of the copy. <a href="http://www.zeldman.com/">Jeffrey Zeldman</a> addressed these kinds of concerns in his latest presentation at An Event Apart Chicago: <a href="http://www.lukew.com/ff/entry.asp?913" title="Luke W's notes from Zeldman's presentation.">A Site Redesign.</a> The ease-of-use and learnability of our application must supersede the vacillating predilections of entrepreneurs (unless, of course, those selfsame entrepreneurs are the application’s target demographic). In other words: our designs should <strong>help real people do real stuff.</strong></p>
<h3>Enter design strategy</h3>
<p>After reading books on information architecture, interaction design, and project management, I couldn’t find a consolidated tool to focus my design process. So I created one. The method I’m sharing here has worked for me over the past couple of months, but it’s certainly an evolving one. Like any other UX tool, this document is only as valuable as the ongoing processes it drives.</p>
<p>Think of a Design Strategy document as a <strong>a design blueprint</strong> outlining the operating assumptions and intentions of the project team: why are we doing what we’re doing? who will use our application? what are their goals? what interactions (and underlying functionality) do we believe is necessary to facilitate those goals? </p>
<p>Keep in mind that this document is based on assumptions. In order for a design strategy document to truly facilitate a user-centered design process, those assumptions must be validated and informed by user research.</p>
<h3>Stakeholder interviews</h3>
<p>All design processes begin with <a href="http://www.boxesandarrows.com/view/setting-up-business">stakeholder interviews</a>, whether informal or not. After all, it’s their baby you’re creating. All you need is a conference room, your client(s) (preferably in person), and a dry-erase board. Make sure that you bring an information architect, interaction designer, or some other “systems thinker” to the meeting. Next, simply ask clients basic questions about their website or application.</p>
<p>To facilitate conversation, take a cue from <a href="http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470084111">Alan Cooper’s “About Face 3.”</a> Namely, think of the <strong>interface as magic</strong>. When you’re brainstorming solutions to a problem, don’t get specific. Just assume that an interface that will make something happen exists.</p>
<p>In other words: don’t focus on implementation details. Don’t talk to your client about HTML5 or how you’ll use a modal box to do something. They likely don’t think in these terms (just yet). Instead, ask “what people are going to <em>do</em> with the system?”</p>
<h3>Identify “working” personas</h3>
<p>Although guesses will be rough without proper user research, ask your client to describe <strong>who will use their application.</strong> Do they know? Have they talked to them yet? Based their responses and audience segments you may have used or seen in previous applications, segment your users <strong>based on current behaviors, not demographics.</strong> Sometimes you’ll end up with one group. More likely, though, you’ll end up with two or three. Create a table for each of these user types in your document</p>
<p>Don’t share your groups just yet. Once you believe you’ve sussed out what kind of users this application will target, ask leading questions about these user groups: how will this application behave differently based on which kind of user is using it? Will one type of user (an administrative user) see a different interface than another type of user? Make sure that your ideas about the kinds of users of an application match up with your clients’ ideas.</p>
<p>When you think you’re on to something, share. Odds are you’ve identified the audience segments that your client is approaching in a broad way. If, however, either you or your client can’t identify user archetypes, you’ll need to hit the pause button on the project and conduct more thorough user research. I recommend following along with Indi Young in her book <a href="http://www.amazon.com/gp/product/1933820063?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1933820063">Mental Models</a>, where she gives practical advice on how to really nail down who will use an application and how they will conceptually approach it.</p>
<h3>Identify use cases</h3>
<p>Once there is agreement on who will use the application, it’s time to figure out what these users are going to be doing. Inside of each persona’s table, create rows enumerating the overarching goals that they are trying to accomplish. Stick to as few “major” goals as possible. Each user only has a couple of things that motivate their interactions with your system.</p>
<div class="image-container">
<img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/key_interactions.png"><p></p>
<p class="caption">A table helps you parse the major goals that your application will accomplish for each of its user groups. On the right, we list the interactions that will be required.</p>
</div>
<p>Invariably your stakeholder will list things like “feel good”, or “make money.” Cooper refers to these broad objectives as “life goals.” That’s okay at this point. If it’s believed that a persona will hav this goal in mind, make sure it’s captured here.</p>
<h3>Identify interactions to design</h3>
<p>Next we go from abstract to concrete, in essence, laying the blueprint for interaction design. In order to accomplish the goals that users have, they will need to take part in a number of high-level interactions—jot these down. Next to each goal that a user group has, specify the interactions that users will have take part in to drive them closer to that goal. Don’t worry if you repeat some; sometimes users do the same things for different reasons.</p>
<p>At this level, what you’re really defining are use cases. Wise Sage Wikipedia sayeth:</p>
<blockquote><p>
A use case in software engineering and systems engineering is a description of a system’s behavior as it responds to a request that originates from outside of that system. In other words, a use case describes “who” can do “what” with the system in question. The use case technique is used to capture a system’s behavioral requirements by detailing scenario-driven threads through the functional requirements.
</p></blockquote>
<p><cite><a href="http://en.wikipedia.org/wiki/Use_case">wikipedia.org</a></cite></p>
<p>Optionally, you may choose to create a separate spreadsheet orf each user group that to elaborates on that group’s use-cases. This can be especially useful if the information/system architecture of the application is complicated. If users have to “trek across” their portion of the system (for example, say that have to take part in a multi-step process) to get something done, elaborating how a user gets from “a to b” can really clarify how the system should function as a whole.</p>
<h3>Final words</h3>
<p>So there you have it. After 2-4 days worth of stakeholder interviews, what do you have to show for it? Our design strategy document is a patchwork of different thoughts, providing insight for a variety of different roles:</p>
<ul>
<li><strong>Team members</strong> can see the application’s presumed user groups, perhaps doing research to validate underlying assumptions.</li>
<li><strong>Interaction designers, information architects, etc.</strong> can begin wireframing the major interactions in the system to get an idea of what kinds of UIs will facilitate the desired interactions.</li>
<li><strong>Stakeholders <span class="amp">&</span> project managers</strong> can get a high-level view of what the application does and what interactions will need to be built to make that happen.</li>
</ul>
<p>In addition to jumpstarting the roles of your colleagues, a design strategy document brings structure to your design process. Done correctly, it manifests a a unified thought process across your projects’ handoff points.</p>
<p> Each interaction that your designers are called upon to create can be shown to directly drive a user towards a valuable goal—something that can’t be said for the broad goals themselves. Said another way, we can’t say that an application makes people “feel more social,” but we can say that, as a collection, a group of interactions drives a user towards that sensation.</p>
<p> Design strategy helps remove the “fog” clouding the path towards user goals. And as farfetched as it might seem, sometimes a spreadsheet of goals and interactions is the most effective thing we can do to prove the value of design.</p>
<h3>Further Reading</h3>
<ul class="books">
<li class="book"><a href="http://www.amazon.com/gp/product/1933820063?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1933820063"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/mental_models.png"><span>Mental Models: Aligning Design Strategy with Human Behavior</span></a></li>
<li class="book"><a href="http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111/ref=sr_1_1?ie=UTF8&tag=ux-booth-20&s=books&qid=1256015728&sr=1-1"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/about_face.png"><span>About Face 3: The Essentials of Interaction Design</span></a></li>
<li class="book"><a href="http://www.amazon.com/Designing-Web-Interfaces-Principles-Interactions/dp/0596516258/ref=sr_1_3?ie=UTF8&tag=ux-booth-20&s=books&qid=1256015682&sr=8-3"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/web_interfaces.png"><span>Designing Web Interfaces: Principles and Patterns for…</span></a></li>
<li class="book"><a href="http://www.amazon.com/Sketching-User-Experiences-Interactive-Technologies/dp/0123740371/ref=pd_sim_b_1&tag=ux-booth-20"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/sketching_user_experiences.png"><span>Sketching User Experiences: Getting the Design Right and…</span></a></li>
<li class="book"><a href="http://www.amazon.com/Making-Things-Happen-Mastering-Management/dp/0596517718/ref=sr_1_1?ie=UTF8&tag=ux-booth-20&s=books&qid=1256015845&sr=8-1"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/making_things_happen.png"><span>Making Things Happen: Mastering Project Management</span></a></li>
</ul>
</div>
</article>
</div>
<script src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/notify.js" id="_notify_js"></script>
<div class="secondary-content">
<div id="bsap_750" class="bsap" data-serve="CAAIV"><style type="text/css">
</style>
<a id="_bsap_ad_6673" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL5QJF6B4YKQWCTYIT5QNFTAD4Z3JCEYD4KQECAYI45QKC6BDTKQEF6ADVK3EHJNCLSIZ" target="_blank"><img class="adcreative" id="adslot" alt="Download UX & UI Design Assets" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/12898"></a>
<script type="text/javascript" id="auto_1" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(6673, 'CAAIV', ''); </script>
<script type="text/javascript" id="auto_2" class="ignoreme"> if (typeof(BSAProLoadedCallback) !== 'undefined') BSAProLoadedCallback(750); </script></div>
<div id="contribute">
<h4>Write for UX Booth</h4>
<a class="page-icon" title="Contribute to UXBooth" href="http://www.uxbooth.com/contribute/"><span>Contribute to UX Booth</span></a>
<h5>Contribute</h5>
<p><a href="http://www.uxbooth.com/contribute/" title="Learn more about contributing content to the community" onclick="_gaq.push(['_trackEvent', 'Sidebar', 'Get Paid', 'Contribute Post'])">Contribute a guest post to UX Booth</a> and let the community know what's important to you!</p>
</div>
<br><br>
<div id="bsap_985" class="bsap" data-serve="C67D62V"><style type="text/css">
</style>
<script type="text/javascript" id="auto_3" class="ignoreme" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/adsbygoogle.js"></script>
<!-- 300x600 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-6506933565836828" data-ad-slot="5695635701" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><iframe width="300" height="600" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins>
<script type="text/javascript" id="auto_4" class="ignoreme">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script type="text/javascript" id="auto_5" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(3823, 'C67D62V', ''); </script>
<script type="text/javascript" id="auto_6" class="ignoreme"> if (typeof(BSAProLoadedCallback) !== 'undefined') BSAProLoadedCallback(985); </script></div>
</div>
</div>
<!-- The Post Followup -->
<div id="post-followup" class="primary-secondary-content">
<div class="primary-content">
<div id="bsap_9" class="bsap" data-serve="C6SE"><style type="text/css">
.one{position:relative;}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative;}.one .bsa_it_ad a{text-decoration:none;}.one .bsa_it_ad a:hover{text-decoration:none;}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0;}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%;}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0;}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px;}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none;}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic;}
</style>
<div class="bsa_it one"><div class="bsa_it_ad">
<a target="_blank" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL53WC6SLYKQWCTYIT5QMCA7ILZ3JCEYD4K37CA7DE23KC6BDTKQEF6ADVK3EHJNCLSIZ">
<span class="bsa_it_i">
<img alt="Free Prototyping Software" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/10957">
</span>
</a>
<a target="_blank" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL53WC6SLYKQWCTYIT5QMCA7ILZ3JCEYD4K37CA7DE23KC6BDTKQEF6ADVK3EHJNCLSIZ">
<span class="bsa_it_t">Free Prototyping Software</span>
<span class="bsa_it_d">The fastest UI prototyping & IxD tool, helps you create UX focused prototypes!</span>
</a>
<div style="clear:both"></div>
</div>
<script type="text/javascript" id="auto_7" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(5787, 'C6SE', ''); </script><span class="bsa_it_p">
<a href="http://buysellads.com/buy/detail/1514/zone/1248667?utm_source=site_1514&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1248667">ads by BSA</a>
</span>
</div></div>
<h3 id="comments">Comments</h3>
<ol class="comments">
<li class="comment
" id="comment-28703">
<div id="div-comment-28703">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/2b4d84a0b36ca6db5113fc3067f38a1b" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.rohnerstudios.com/" rel="external nofollow" class="url">Angela</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28703">October 20, 2009</a></span>
</div>
<div class="content">
<p>This is a great article Andrew. Great information here and written so well. Thanks!</p>
</div></div>
</li>
<li class="comment
" id="comment-28705">
<div id="div-comment-28705">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/fe6e514d7d124fb61bfc0fa19413683a" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://twitter.com/Taylor_Regan" rel="external nofollow" class="url">Taylor Regan</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28705">October 20, 2009</a></span>
</div>
<div class="content">
<p>Nice article Andrew. Working with clients who know little to nothing about Interaction Design or User-Centered Design can be a challenge and I like the way you address some of these potential challenges. Soft skills are a huge asset during the client engagement process.</p>
</div></div>
</li>
<li class="comment
" id="comment-28706">
<div id="div-comment-28706">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/c807c5c9307434fb8efa8fc781608b38" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.csslab.cl/" rel="external nofollow" class="url">Jorge Epuñan</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28706">October 20, 2009</a></span>
</div>
<div class="content">
<p>Great article, I’ve been usin a method similar to yours, and my focus and most important step of the proccess is your first one: “stakeholder interview”; get the information from the client itself is the most valuable and creates from the beginning a closer relation, and a potencial co-worker.</p>
<p>congratulations.</p>
</div></div>
</li>
<li class="comment
" id="comment-28708">
<div id="div-comment-28708">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/194eeae201f11393bc70b9b93ac4b5ee" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.2sidesdesignstudio.com/" rel="external nofollow" class="url">Rob Jones</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28708">October 20, 2009</a></span>
</div>
<div class="content">
<p>Nice article.<br>
In my experience, it is extremely difficult for most of my clients to turn over core interaction design, especially if the application is already coded.<br>
It’s funny, even though most people watch TV, they don’t think they could direct a TV show. But EVERYONE thinks they are a UI designer.</p>
</div></div>
</li>
<li class="comment
" id="comment-28718">
<div id="div-comment-28718">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/b06dd14112c57bcb920a53fde1164add" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://uncommondesign.com/" rel="external nofollow" class="url">Preston</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28718">October 20, 2009</a></span>
</div>
<div class="content">
<p>Great article.</p>
<p>Another nice thing about conceptualizing a project this way is that it scales very well. Larger projects will just have more user groups, goals, and interactions.</p>
</div></div>
</li>
<li class="comment
" id="comment-28773">
<div id="div-comment-28773">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28773">October 20, 2009</a></span>
</div>
<div class="content">
<p>Thanks guys for the feedback. I’m always tweaking the formula to have design preempt development without making the process resemble waterfall.</p>
</div></div>
</li>
<li class="comment
" id="comment-28824">
<div id="div-comment-28824">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/2d9d88185bfa11d6820dcc79d36e394b" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://nacho-lopez.com/" rel="external nofollow" class="url">Nacho López</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-28824">October 21, 2009</a></span>
</div>
<div class="content">
<p>Fantastic!</p>
</div></div>
</li>
<li class="comment
" id="comment-29122">
<div id="div-comment-29122">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/6afa12f746d326fc496dd605b8daaeb8" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://erova.com/" rel="external nofollow" class="url">Chris</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-29122">October 23, 2009</a></span>
</div>
<div class="content">
<p>A good article, for sure, but I’m not sure it’s necessarily interaction design, no? </p>
<p>These pre-design steps could work just as well (and should certainly be used) for a static brochure web site with no complex interaction or dialogue, or no impression of time at all. </p>
<p>Regardless of whether we’re calling web design interaction design, interactive design (with the emphasis on technology) or something else entirely, it’s always good to document how you arrive at the decisions you’ve made, and it’s a benefit to UX Booth readers to de-mystify the user/client research that’s so critical to achieving success.</p>
</div></div>
</li>
<li class="comment
" id="comment-29127">
<div id="div-comment-29127">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/51a4c5a799eb725e8f2e2c721606985f" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">Corinne</span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-29127">October 23, 2009</a></span>
</div>
<div class="content">
<p>Thanks a lot for this interesting article.</p>
</div></div>
</li>
<li class="comment
" id="comment-29672">
<div id="div-comment-29672">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/1b7a19ee8c1bad32527111772df0dc82" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">@deholandadesign</span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-29672">October 26, 2009</a></span>
</div>
<div class="content">
<p>Awesome! Great information that designers should know. Thanks.</p>
</div></div>
</li>
<li class="comment
" id="comment-29688">
<div id="div-comment-29688">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/a85f93ad66a633ce9924d370089ac8a9" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://acleandesign.com/" rel="external nofollow" class="url">Loren Baxter</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-29688">October 26, 2009</a></span>
</div>
<div class="content">
<p>This is a very clear and well written article, and I think covers the case for very simple applications.</p>
<p>However I do feel that you’ve neglected users too much. Early stage user research while generating Personas and Use Cases can lead to insights that will be far more valid than guesswork. I can’t imagine writing down User Goals without involving users.</p>
<p>Something deeper here is troubling me… Design Strategy cannot be taught in such a short post, and perhaps it’s unethical to present it that way. I feel a longer response brewing, and will save it for my blog. Thanks for getting me thinking :)</p>
</div></div>
</li>
<li class="comment
" id="comment-29696">
<div id="div-comment-29696">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/a85f93ad66a633ce9924d370089ac8a9" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://acleandesign.com/" rel="external nofollow" class="url">Loren Baxter</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-29696">October 26, 2009</a></span>
</div>
<div class="content">
<p>Ok, so this isn’t something for my blog. But here are my problems with this article:</p>
<p>It feels like Cliff Notes for design strategy.</p>
<p>It severely understates what it takes to make a successful design strategy. The process can perhaps be summarized in 1500 words, but no article can replace the depth and editorial vetting provided in numerous books on the subject, written by established luminaries. While you link to these books on Amazon (the sales from which, I believe, UX Booth receives a referral fee), this here feels inappropriately like a self-standing primer on the subject.</p>
<p>It regurgitates established UX processes and deliverables with new names, adding to the already silly amount of confusion about the names of things in this field. What everyone else calls Personas, this calls “User Groups”. Use Cases become “Interactions”. Sure, these alternate names are understandable, but why change them? Perhaps because phrasing it that way makes the article sound redundant to anyone who practices IxD / UX. Personas, Use Cases, User Goals? Are these news to anybody? If they are, then they should get a whole hell of a lot more education before calling themselves an Interaction Designer or proposing that they can make a good design strategy.</p>
<p>Finally, and criminally, the article leaves the user almost entirely out. There is a passing mention of user research, which I will paraphrase as “if you have too much trouble making up Personas yourselves, consider doing user research to build them”. An article on the UX Booth that discusses strategy without discussing the user, in your words, makes my blood boil. I’ll avoid describing why the user is important because it has been written about so extensively, and is believed so thoroughly, that the profession is called User Experience (and UX Booth is named after it).</p>
<p>I think that this blog has put out some very solid articles, and therefore I care enough to voice my concerns here :) Keep up the hard work.</p>
<p>Cheers,<br>
Loren</p>
<ul class="children">
<li class="comment
" id="comment-34903">
<div id="div-comment-34903">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-34903">November 29, 2009</a></span>
</div>
<div class="content">
<p>Loren, I agree with your response. Over the next couple of days I mean to go back and edit the article to adjust for the terminology that you suggested. Indeed, I’ve been practicing Interaction Design for a number of years, but introducing user research at the strategy level has been difficult. Only recently (in the past couple of months) have I had more success. I’ll introduce my more recent insights as time permits. Thanks for your feedback!</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-50248">
<div id="div-comment-50248">
<div class="meta">
<img alt="" src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/58ace5a078f05cc487dedecb221ac39b" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.zurb.com/" rel="external nofollow" class="url">Bryan Zmijewski</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/focusing-interaction-design-with-design-strategy/#comment-50248">March 4, 2010</a></span>
</div>
<div class="content">
<p>Andrew-<br>
We’ve been honing our design strategy for the last 3 years- I think the business units/groups/roles have to play an equal part in the thinking.</p>
<p>Here is our rough outline we’ve been using:<br>
<a href="http://www.zurb.com/words/design-strategy-framework" rel="nofollow">http://www.zurb.com/words/design-strategy-framework</a></p>
</div></div>
</li>
</ol>
</div>
<div class="secondary-content">
<h3>Related Posts</h3>
<div class="related posts">
<article class="post hentry">
<header>
<h1 class="entry-title"><a href="http://www.uxbooth.com/articles/ux-documentation-why-what-and-how/" rel="bookmark" title="Permanent link to UX Documentation: Why, What and How">UX Documentation: Why, What and How</a></h1>
<dl class="entry-meta">
<dt class="author">By</dt>
<dd class="author vcard">
<a class="url fn" href="http://www.uxbooth.com/author/pamelarodriguez/">
Pamela Rodríguez
</a>
</dd>
</dl><!-- dl.meta -->
<a href="http://www.uxbooth.com/articles/ux-documentation-why-what-and-how/" title="UX Documentation: Why, What and How"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/documentation.jpg" alt="UX Documentation: Why, What and How" title="UX Documentation: Why, What and How"></a>
</header>
<div class="entry-summary"><p>Documentation helps designers tell a story and facilitate change. Pamela Rodriguez investigates how holistic, project-wide documentation helps teams avoid repeating mistakes, organize their ideas, and improve their process.
</p></div>
</article>
<article class="post hentry">
<header>
<h1 class="entry-title"><a href="http://www.uxbooth.com/articles/personas-putting-the-focus-back-on-the-user/" rel="bookmark" title="Permanent link to Personas: Putting the Focus Back on the User">Personas: Putting the Focus Back on the User</a></h1>
<dl class="entry-meta">
<dt class="author">By</dt>
<dd class="author vcard">
<a class="url fn" href="http://www.uxbooth.com/author/jamescosta/">
James Costa
</a>
</dd>
</dl><!-- dl.meta -->
<a href="http://www.uxbooth.com/articles/personas-putting-the-focus-back-on-the-user/" title="Personas: Putting the Focus Back on the User"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/persona-lead.jpg" alt="Personas: Putting the Focus Back on the User" title="Personas: Putting the Focus Back on the User"></a>
</header>
<div class="entry-summary"><p>User-centered design is tricky because people don’t tend to act predictably. Contributor and Creative Director at The Phuse James Costa explains how useful personas can be to the oncoming design process.
</p></div>
</article>
<article class="post hentry">
<header>
<h1 class="entry-title"><a href="http://www.uxbooth.com/articles/mission-impossible-shrinking-the-ux-process/" rel="bookmark" title="Permanent link to Mission Impossible: Shrinking the UX Process">Mission Impossible: Shrinking the UX Process</a></h1>
<dl class="entry-meta">
<dt class="author">By</dt>
<dd class="author vcard">
<a class="url fn" href="http://www.uxbooth.com/author/lishubert/">
Lis Hubert
</a>
</dd>
</dl><!-- dl.meta -->
<a href="http://www.uxbooth.com/articles/mission-impossible-shrinking-the-ux-process/" title="Mission Impossible: Shrinking the UX Process"><img src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/lead1.png" alt="Mission Impossible: Shrinking the UX Process" title="Mission Impossible: Shrinking the UX Process"></a>
</header>
<div class="entry-summary"><p>Sticking with high–level concepts allows designers to implement a UX strategy without disrupting a traditionally development-heavy workflow. In this post, Lis Hubert and Gabi Moore recount their story creating a UX process at AnyClip in just three weeks.
</p></div>
</article>
<!-- Similar Posts took 401.101 ms --> </div>
</div>
</div> </div>
</div>
<footer id="footer">
<div class="site-width">
<section class="about-us">
<h1>About The UX Booth</h1>
<p><span class="lead">The UX Booth</span> is the web’s leading publication written by and for user experience designers. <a href="http://www.uxbooth.com/about/" title="About the people behind the UX Booth">Learn more about us</a> or <a href="http://www.uxbooth.com/contribute/" title="How to write for our community">share your thoughts</a>.</p>
</section>
<nav>
<ul>
<li><a href="http://www.uxbooth.com/about/" title="About the people behind the UX Booth">About Us</a></li>
<li><a href="http://www.uxbooth.com/advertise/" title="Ways to advertise on UX Booth">Advertise</a></li>
</ul>
<ul>
<li><a href="http://www.uxbooth.com/contribute/" title="How to write for our community">Become an Author</a></li>
<li><a href="http://www.uxbooth.com/contact/" title="Get in touch with the editors">Contact Us</a></li>
</ul>
</nav>
<section id="join-the-community">
<h1>Join the community</h1>
<ul>
<li class="rss">
<a href="http://feeds.feedburner.com/uxbooth">
<span class="icon"></span>
<span class="count">38,102</span>
<span class="service">RSS</span>
<span class="constituents">Subscribers</span>
</a>
</li>
<li class="twitter">
<a href="http://twitter.com/uxbooth">
<span class="icon"></span>
<span class="count">34,651</span>
<span class="service">Twitter</span>
<span class="constituents">Followers</span>
</a>
</li>
</ul>
</section>
<section id="copyright-and-hosting">
All content © Copyright 2008-2013 <span class="ux">UX</span> <span class="b">B</span>ooth.
<a href="http://www.enginehosting.com/" id="engine-hosting" rel="nofollow">Hosting provided by <span class="icon"></span> <span class="label">EngineHosting</span>
</a></section><a href="http://www.enginehosting.com/" id="engine-hosting" rel="nofollow">
</a></div><a href="http://www.enginehosting.com/" id="engine-hosting" rel="nofollow">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-6485035-1', 'uxbooth.com');
ga('send', 'pageview');
</script>
</a></footer><!-- footer#footer --><a href="http://www.enginehosting.com/" id="engine-hosting" rel="nofollow">
<script src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/prettify.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./Focusing Design with Design Strategy - UX Booth UX Booth_files/prettify.css" type="text/css" media="all" charset="utf-8">
<script src="./Focusing Design with Design Strategy - UX Booth UX Booth_files/html5shiv.js" type="text/javascript" charset="utf-8"></script>
<!-- Coming from EngineHosting! --> </a></div><div id="bsap_978" class="bsap notify_show" data-serve="C6YIL5T" data-segment-placement="uxbooth"><style>
#bsa_notification {
position: fixed;
top: -200px;
font-family: helvetica, arial, sans-serif !important;
right: 25px;
z-index: 10000;
box-shadow: 0 0 3px #aaa
}
#bsa_notification a.bsa_creative_image {
display: block;
position: relative;
width: 320px !important;
height: 100px !important;
background: #fff;
z-index: 998;
}
#bsa_notification a.bsa_creative_image img {
display: block;
width: 100%;
background: #fff;
}
#bsa_notification a.bsa_close {
color: #fff;
line-height: 100%;
font-weight: bold;
padding: 1px 5px 3px;
cursor: pointer;
text-align: center;
border-radius: 2px;
background: #c0c0c0;
position: relative;
font-size: 13px;
top: -9px;
right: -9px;
display: block;
position: absolute;
z-index: 1000;
text-decoration: none;
}
#bsa_notification a.bsa_close:hover {
background: #999;
}
.notify_show #bsa_notification{
-webkit-animation: notify_movedown 1s linear forwards;
-moz-animation: notify_movedown 1s linear forwards;
-ms-animation: notify_movedown 1s linear forwards;
-o-animation: notify_movedown 1s linear forwards;
animation: notify_movedown 1s linear forwards;
}
@keyframes notify_movedown {
0% {
top: -200px;
}
100% {
top: 20px;
}
}
@-webkit-keyframes notify_movedown {
0% {
top: -200px;
}
100% {
top: 20px;
}
}
@-moz-keyframes notify_movedown {
0% {
top: -200px;
}
100% {
top: 20px;
}
}
@-ms-keyframes notify_movedown {
0% {
top: -200px;
}
100% {
top: 20px;
}
}
@-o-keyframes notify_movedown {
0% {
top: -200px;
}
100% {
top: 20px;
}
}
</style><!-- no ad --></div><!-- /div#ux-booth --><a href="http://www.enginehosting.com/" id="engine-hosting" rel="nofollow">
<!-- Dynamic page generated in 0.637 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2014-05-26 06:18:20 -->
<!-- super cache --></a></body></html>