mixtable.github.io/a_crash_course_in_ux.html at master · Wowholic/mixtable.github.io · GitHub

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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en-us"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en-us"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie10 lt-ie9" lang="en-us"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10 lt-ie9" lang="en-us"> <![endif]-->
<!--[if lt IE 10]> <html class="no-js lt-ie10" lang="en-us"> <![endif]-->
<!--[if !IE]> > <![endif]-->
<html class='no-js' lang='en'>
<!-- <![endif] -->
<head>
<title>the role of a designer in a startup environment - Dylan Bahnan</title>
<meta charset='utf-8' content='text/html' http-equiv='content-type'>
<meta content='ie=edge,chrome=1' http-equiv='x-ua-compatible'>
<meta content='On this webpage you will find information about the Mixtable journey' name='description'>
<meta content='Dylan Bahnan' name='author'>
<meta content='initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width' name='viewport'>
<meta content='initial-scale=1.0,user-scalable=no,maximum-scale=1' media='(device-height: 568px)' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='black-translucent' name='apple-mobile-web-app-status-bar-style'>
<link href='/favicon.ico' rel='shortcut icon'>
<link href='/favicon.png' rel='shortcut icon'>
<link href='/images/apple-touch-icon-precomposed.png' rel='apple-touch-icon-precomposed'>
<link href='/images/apple-touch-icon-57x57-precomposed.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='/images/apple-touch-icon-72x72-precomposed.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='/images/apple-touch-icon-114x114-precomposed.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Yellowtail|Nothing+You+Could+Do|Pacifico|Satisfy|Handlee' rel='stylesheet' type='text/css'>
<link href="stylesheets/application.css" rel="stylesheet" type="text/css" />
</head>
<body class='page'>
<nav class='topnav'>
<div class='links' id='left'>
<a>
about
</a>
</div>
<div class='logo'>
<a href="/"><img src="images/logo_no_text.png" />
</a></div>
<div class='links' id='right'>
<a>
contact
</a>
</div>
<div class='hiddenContainer container-fluid'>
<div id='about'>
<h3 class='posh'>
We want to share...
</h3>
<p>
...our learnings with you. Mixtable was a Munich based startup built up and run from April 2013 until August 2014. Our mission was to bring people together offline! On this webpage you will find information about our story and who shaped the Mixtable journey. In addition we collected some of our learnings regarding business and technical insights. Don’t be shy and send us an email if you have questions or other suggestions.
</p>
</div>
<div id='contact'>
<br>
<p>
<img id="buisness_icon" src="images/mail_icon.png" />
</p>
<br>
<p>
<a href='mailto:team@mixtable.com'>
team@mixtable.com
</a>
</p>
<p>
or reach individual
<a href="/team_mixtable.html">team</a>
members.
</p>
</div>
</div>
</nav>
<div class='author'>
<strong class='author-content'></strong>
</div>
<div class='post'>
<div class='postHead'>
<img id="buisness_icon" src="images/design_icon_dark.png" />
<h3>
A Crash course in UX
</h3>
</div>
<div class='postBody'>
<p>
<b>Making the jump</b>
</p>
<p>
Making the transition from a pixel pusher to code wielding full stack designer can be one of the most liberating things a designer can do. It gives you a better idea of the implications from your design decisions and more responsibilities for the final look of the product, but best of all it makes teamwork much easier (changing the radius of corners is rarely much of a priority of a back-end developer when they’ve got databases, conflicts and auth problems to think about) and can make for a much higher job satisfaction.
</p>
<p>
This is one of the best decisions i’ve ever made and highly recommend it to anyone considering taking the jump. If you are considering taking the jump and are a little confused as to where to start and what to start with, having a read of the toolkit should give you a good one. It contains what I’ve developed as my process, in order, the tools I’ve used and a load of fantastic resources at the bottom. Enjoy.
</p>
<br>
<p>
<b>The Killer toolkit</b>
</p>
<p>
<b>User Interviews</b>
</p>
<p>
User interviews are one of the most valuable and necessary things you can do to better understand your customer, I'm sorry to say this is something I didn't do enough of. All I would advise on this is do it with two people (one to question and engage the other to take notes) or a Dictaphone. Try not to assume anything, the most valuable insight often come from unexpected places, so instead of asking “how often do you use the internet” you could try “do you have access to the internet” its a more unobtrusive question and can easily lead to follow up questions. Doing user interviews is less about listening to your users, and more about getting to know your customers, the better you can understand what your users do, rather than what they say, the more suited your product can become.
</p>
<p>
<b>Research and Inspiration</b>
</p>
<p>
One of the best discoveries I made was a chrome add-on called <a href="https://chrome.google.com/webstore/detail/panda-dribbble-layervault/jhiocdmmaannaccoofjfmjpbfkogmnap">Panda</a>. It sources the most popular shots from Dribbble and latest news from Layervault Designer News. Great if you want a little eye candy and for keeping up to date with the latest methods, patterns and opinions. But when looking for UI patterns that are well thought out and recognisable, wether it be a navigation menu or a share button, dribbble is your best mate.
</p>
<p>
<b>Whiteboard</b>
</p>
<p>
Gather the troops around the whiteboard with a clear objective and get on designing. Iteration comes far quicker and more naturally with a team all on the same page. The outcomes aren't supposed to be pieces of art, but more simple shapes that vaguely represent the pages functions. The secret is, if your teammates can draw a square, circle and a triangle they can be part of the design process.
</p>
<p>
<b>Wireframe</b>
</p>
<p>
Wireframes can be a deliverable, but can also provide some basis for usability testing. I use Balsamiq mockups, its a very straightforward program. Drag and drop components from the UI library onto the canvas and before you know it you’ll have something that looks vaguely like your end project. From there you can add ‘hotspots’ that allow you to link screens together to make a semi-functional mockup. They can then be shared and evaluated to find any major flaws before production. The trick to wireframes is make them quick, scrappy but exhaustive, there is no point in forgoing a feature, even if its an existing one, to perfect the radius of a corner.
</p>
<p>
<b>Sketch (if visual design is necessary)</b>
</p>
<p>
For those times when you need to get a better idea of the visual design of a page, design an icon or do a little illustration, sketch has your back in a lightweight and easy-to-use pro package. Photoshop and illustrator are very powerful tools and have set the standard for pro programs, but they have also been around since the 90’s. A lot has changed in the way we work since the 90’s and it often feels you are hacking them to work the way you want to do. What sketch lacks in seniority it makes up for in efficiency, in the words of Meng to; “There is no other tool out there that is so intrinsically connected to the way designers work today.”. With the latest release sketch 3, it brings with it fantastic features for exporting, responsive design and component styles. It is well worth taking a look at and using their trial, maybe this way your hair will stay intact.
</p>
<p>
<b>Sublime Text 3</b>
</p>
<p>
There is a solid reason they call it ‘sublime’ text instead of ‘alright’ text or ‘pretty nice’ text. It really is sublime to use; tabs, themes, extensions, language colouring, all available through the app. Its not open source, but its loved by the open source community. I really enjoyed using it and have even started to use it for writing reports. I highly recommend it and the best part of all, its free to use!
</p>
<p>
<b>Learn it</b>
</p>
<p>
Code school, code school, code school. If you hadn’t already guessed I’m a massive fan of code school. Code school provides video tutorials to cover the basics, exercises to build and re-iterate your skills and consistent metaphors, gamification and catchy theme tunes to keep you interested. “CSS its such a mess sometimes you know. Lets all go riding in the snow. Crrrosss-Countrrry”. It can seem a little cheesy and patronising at times but put the video speed up to 1.5x, grit your teeth and you’ll be staring at the screen cross-eyed, trying to figure out boolean again in no time
</p>
<p>
<b>Google Chrome dev tools **Ignore if wearing smarty pants**</b>
</p>
<p>
this one you already have if your using chrome, all you have to do is right click and at the bottom of the menu you’ll see ‘Inspect element’ click it and your in. When you do, you’ll see the rendered HTML on the left and CSS on the right. This is fantastic for bug squashing, experimenting and tweaking. Say your trying to find out why your link isn't styling as a button, you can smash around like a bull in a china shop fixing it, without messing up your source code. Cool beans. You can also use the emulation feature in the console to see what it looks and works like on an iPhone, iPad, Nexus, Blackberry, etc. In short, this is your sandbox.
</p>
<p>
<b>Github</b>
</p>
<p>
Github is a stellar website, its based on the GIT version control system. It allows for powerful collaboration for private and open source projects. With github in your toolbox you can start to be accountable for the code you write, have a backup of all your previous versions if something goes Pete Tong and best of all you have access to the open source community in a big way. You’ll be surprised by how many companies have a github and use it for publishing open source projects. Its a lot of fun and can give you a lot of insight into how a company operates and how to improve your code practice.
</p>
<p>
<b>Google Analytics</b>
</p>
<p>
I would love to tell you google analytics is as straightforward or as self-explanatory as youtube or google maps or google mail, but its not. What GA (google analytics) lacks in ease of setup, use or understanding, it makes up in power, 10x. You can run A/B tests, it has a heat mapping tool, you can track what social networks visitors to your site use! GA is a grumpy hairy ugly beast that constantly wants to be told its the prettiest beast in the whole wide world. It will spit at you, make you pull your hair out and at points question whether its worth the effort. It is. Stick with it. All I can say is read a book, read two! Get the developer excited about it (somehow) and try and make it relevant for the whole team. The better you know it, the better it will become.
</p>
<p>
Once you’ve read a book, check this out <a href=http://www.optimizesmart.com/google-analytics-setup-checklist/">this setup checklist</a>.
</p>
<p>
Then checkout the Kissmetrics blog, they have tonnes of stuff on GA. All you have to do is search it.
</p>
<br>
<p>
<b>
Extra Goodies:
</b>
</p>
<p>
<a href="UXMastery: everything UX - Blog, resources, interviews">http://uxmastery.com</a>
</p>
<p>
<a href="UXMastery: everything UX - Blog, resources, interviews">http://uxmastery.com/</a>
</p>
<p>
<a href="Treehouse Blog: the blog from the treehouse team. Great for insights and tutorials">http://blog.teamtreehouse.com/</a>
</p>
<p>
<a href="A List Apart: A super high quality blog, only featuring the best insights on web developent and practices.">http://alistapart.com/</a>
</p>
<p>
<a href="Stack Overflow: Your ultimate resource for bug fixing solutions and code help. Seriously, I couldn't have done my job without it!">http://stackoverflow.com/</a>
</p>
<h5 class='right-txt grey-txt'>
Dylan Bahnan
</h5>
<p>
<p class='share'>
<a class='twitter-share-button' data-via='mixtable' href='https://twitter.com/share'>Tweet</a>
<script>
  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</p>
<p class='share'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'></script>
<![CDATA[
    lang: en_US
]]>
<script data-counter='right' type='IN/Share'></script>
</p>
</p>
</div>
</div>

<footer>
<div class='welcome container-fluid impressumContainer'>
<div class='row'>
<div class='col-xs-12'>
<a href="/impressum.html">impressum</a>
</div>
</div>
</div>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="javascripts/application.js" type="text/javascript"></script>
<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-47225726-3', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>