mixtable.github.io/the_role_of_a_designer_in_a_startup_environment.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
<!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>
the role of a designer in a startup environment
</h3>
</div>
<div class='postBody'>
<p>
<b>How / Why I came to the realisation</b>
</p>
<p>
When I first started working at Mixtable my job was to be a Visual Designer. At the time I was designing the iOS app (in sketch), making the iconography, building the brand image and eventually relaunching the website with a fresh look. Pretty typical stuff for a pixel pusher.
</p>
<p>
However, once I had handed off the mockups to the iOS team, the company’s needs had changed and my role had to be changed. What became apparent was having a full time visual/UI designer wasn't the most useful way to use our limited resources, therefore I was asked to take on some front-end responsibilities. This meant changing my workflow from just designing on vector and photo editing software to taking a concept from whiteboard to working webpage. What I soon realised was this was not only a change in tool and medium but also in process and mindset. So here are a couple of tid-bits I picked up along the way:
</p>
<br>
<p>
<b>Designers role - Not to design</b>
</p>
<p>
A designers role in a startup is not to design. Contrary to popular belief the designers role in a startup isn't to be a ‘design guru’ or a ‘design rockstar’ or even the all-singing all-dancing design department. No, its to take the opinions, needs and ideas of everyone involved (users, marketers, developers and stakeholders) and turn it into a functional solution. That's why its important to be the design equivalent of a swiss-army knife.
</p>
<p></p>
<br>
<b>Multi-tool / UX designer</b>
</br>
<p>
I think the title that best fits that description is a UX designer, lets be honest its such a vague term with very little pre-conceptions it can let you be the person a team needs without being limited by the baggage of being branded “designer” brings with it.
</p>
<p>
There are a tonne of articles on the web already about what a UX designer is, isn’t and should be so I wont get into it too much here. I’ll just list the kind of skills I think a UX designer should have in their toolbox:
</p>
<p>
<i>HTML & CSS</i><br/>
<i>USABILITY AND ANALYTICS</i><br/>
<i>VISUAL DESIGN</i><br/>
<i>MOCK-UP’S</i><br/>
<i>BASIC PSYCHOLOGY</i>
</p>
<br>
<p>
<b>Cheer the fuck up</b>
</p>
<p>
One of the most frustrating things about being a designer is the “no face”. That moment when you’ve shown the thing you’ve been slaving over to your boss/client/manager and their face re-coils, your stomach drops and you’re back to the proverbial drawing board with a chip on your shoulder and a frown on your face. What you should realise is <a href="https://medium.com/@youngbradford/youre-a-designer-not-the-ceo-173226d042ff"> “We designers have the best jobs in the world. If you’re walking around with a look on your face suggesting otherwise I suggest you get a new job. Or a new face.” </a>. Being the kind of designer that actively listens to every stakeholder, involves the whole team in designing and doesn't take the job as a solemn pursuit can make a real difference to your life, team and face.
</p>
<br>
<p>
<b>Iteration for the nation</b>
</p>
<p>
Sometimes as a perfectionist in the fast-paced startup world you can find yourself very conflicted. On the one hand you’ve settled on a solution in great time, its a pretty good one and your CEO is happy with it. On the other hand you've spent the last 3 hours trying to get the details right,
your university professors words are ringing though your head; “its the details that make good design, great design” like the ghost of design past. While this is still true there is something that got lost along the way (or maybe I was a little hungover that day). If you haven’t taken the time to refine the design, the details don't mean sh*t. Trying to polish turds is always a fools errand. At the end of the day <a href="http://alistapart.com/column/letter-to-a-junior-designer"> “Don’t mistake speed for precocity: the world doesn’t need wrong answers in record time.”</a>
</p>
<br>
<p>
<b>Time can’t be changed but a colour can</b>
</p>
<p>
If one of the main goals of a startup is validated learning, nothing can be learnt or validated in the time it takes to get a colour, line or font ‘just right’. Spending a lot of time or money working on perfecting every page in every format of your show-stopping new app is a waste of time; <a href="http://www.smallhq.com/blog/your-startup-is-overthinking-design/"> “Until you find product-market fit, you’re essentially a chicken running around with your head cut off.”</a>. So instead of using your time tailoring each page, make a solid, coded, dev-friendly style guide.
</p>
<p>
Make a style guide and make it early! CSS has a reputation for being messy, unwieldy and its  methods being a thing of personal taste. Making a live style guide early can lead to a cleaner codebase, quicker development process and an overall better looking site.
</p>
<p>
The best part of having a developer friendly style guide, is it allows your developers to use the classes and id’s from the styleguide to transform their scrappy, in the works versions to great from the get go, so the only thing left to do it tweak. I'm not by any stretch of the imagination saying you should be a lazy designer or not take pride in your work, just know the difference between good and good enough. Having a style guide can alleviate a lot of the more tedious design work a tailored website usually involves without compromising on the individuality that happens when using a framework or theme like Bootstrap or foundation.
</p>
<br>
<p>
<b>Re-inventing the wheel</b>
</p>
<p>
Unless your startup is actually trying to re-invent the wheel, try and avoid re-inventing the wheel. When your trying to be disruptive in the dating industry, there's no need to be disruptive with your share icon. Pick a style that works for you and your users and go with it! Remember,  <a href="http://vimeo.com/14912890"> everything is a remix.</a>
</p>
<p>
Please excuse me if I have come off a little confusing or a little strong. Sometimes its only in hindsight that everything becomes very obvious. I hope in reading this you’ll get there much quicker than I did.
</p>
<br>
<p>
<i>One final note;</i><br/>
Next time you find yourself facing a serious problem that can only be solved through highly creative thinking remember the difference between <a href="https://www.youtube.com/watch?v=gdWKQ36JkwE"> serious vs. solemn.</a> Its a clip from a speech by John Cleese, if you have the time watch the whole thing.
</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>