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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Unsolicited Design Review - Dropbox</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="unsolicited-design-review---dropbox">Unsolicited Design Review - Dropbox</h1>
<p>2017-10-10</p>
<p>Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven’t seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait).</p>
<p><img src="/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" alt="Dropbox Logo" /></p>
<p>I won’t mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p>
<p>So without anymore fluff - let’s get into it. Please leave your bias at the door.</p>
<h2 id="purpose">Purpose</h2>
<p>It’s good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is no real problem to solve.</p>
<p>On the marketing site promoting the new design system, the Dropbox team doesn’t mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p>
<blockquote>
<p>We realized our brand needs to change</p>
</blockquote>
<p>As I stated at the beginning of this review - it’s a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p>
<blockquote>
<p>Our new brand system shows that Dropbox isn’t just a place to store your files - <strong>it’s a living workspace that brings teams and ideas together</strong></p>
</blockquote>
<p>Let’s stop right there. “A place to store your files” is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox <em>is</em> a cloud storage service. Why is there a desperate need to shift away from that?</p>
<p>There isn’t much else to speak of in terms of ‘purpose’ regarding the redesign since there doesn’t seem to be one. Let’s move on.</p>
<h2 id="design-principles">Design Principles</h2>
<p>I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best:</p>
<ol>
<li>Good design is innovative</li>
<li>Good design makes a product useful</li>
<li>Good design is aesthetic</li>
<li>Good design makes a product understandable</li>
<li>Good design is unobtrusive</li>
<li>Good design is honest</li>
<li>Good design is long-lasting</li>
<li>Good design is thorough down to the last detail</li>
<li>Good design is environmentally friendly</li>
<li>Good design is as little design as possible</li>
</ol>
<hr/>
<ol>
<li><p><strong>Good design is innovative</strong>. There is zero innovation in this re-brand, it’s simply following the trend of quirky / brutal / modern flat elitism that is currently sweeping the industry. It’s a fad and will be out-of-date rather quickly.</p></li>
<li><p><strong>Good design makes a product useful</strong>. Looking through their reasoning and explanations I can see no boost or improvement to the usefulness of the product. Not to repeat myself, but without any supporting data as to <em>why</em> this change was made we have nothing to base it off of.</p></li>
<li><p><strong>Good design is aesthetic</strong>. See #1.</p></li>
<li><p><strong>Good design makes a product understandable</strong>. Were customers not able to understand the Dropbox brand prior to this update? Were users misinformed about what the product could do for them? The previous design did a wonderful job of getting out of the way and showing the user exactly what they needed / wanted.</p></li>
<li><p><strong>Good design is unobtrusive</strong>. Talk about going backwards on this one. Original system was clean, readable and friendly to new users. Their current system uses an illegible typeface, colors with terrible contrast and a lack of support for the visually impaired, crude illustrations that give no explanation as to what they represent (more on that later), and a lack of browser support / performance issues.</p></li>
<li><p><strong>Good design is honest</strong>. Dropbox still maintains this principle. They don’t over-promise or outright lie about who and what they are as a product.</p></li>
<li><p><strong>Good design is long-lasting</strong>. See #1 & #3 again.</p></li>
<li><p><strong>Good design is thorough down to the last detail</strong>. The fact that even their marketing site crashes latest Firefox, lags on Safari for iOS and stutters in Chrome on desktop shows the lack of performance testing that was done. Not to mention the complete disregard for those with visual impairments with their color palette, typeface and contrast selections.</p></li>
<li><p><strong>Good design is environmentally friendly</strong>. Doesn’t really apply here.</p></li>
<li><p><strong>Good design is as little design as possible</strong>. This new brand system is incredibly over-designed.</p></li>
</ol>
<blockquote>
<p>Our users…tell us they feel overwhelmed and distracted during the workday…we want to change this, by building products and a brand that help people focus on meaningful work, instead of busywork.</p>
</blockquote>
<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user’s content.</p>
<p><strong>Remember: a great design system should go completely unnoticed.</strong></p>
<h2 id="accessibility">Accessibility</h2>
<p>Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere.</p>
<blockquote>
<p>With 259 fonts, our new typeface Sharp Grotesk gives us lots of versatility, allowing us to “speak” in a variety of tones.</p>
</blockquote>
<p><img src="/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" alt="DropBox fonts" /></p>
<p>Not a single one of these typeface styles is initially readable…</p>
<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can’t help but feel this falls into the “let’s be trendy” category and ends up sacrificing almost all good usability practices for gimmicky type.</p>
<blockquote>
<p>Our users run the gamut from business professionals to scientists and creative types. Most of these folks tell us they feel overwhelmed and distracted during the workday, and that this is one of the biggest barriers to creating work they’re proud of.</p>
</blockquote>
<p>Irony at it’s finest. “Our users tell us that they hate being distracted and overwhelmed, so we’ve decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system”. I hate coming off as mean-spirited - but this is some elaborate joke, right?</p>
<p><img src="/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" alt="DropBox color logos" /></p>
<p>After running it through a color contrast accessibility checker:</p>
<p><img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="DropBox contrast" /></p>
<p>Multiple accessibility failures…</p>
<p>Next we have the child-like ‘scribble’ illustrations. Now don’t get me wrong, I love seeing different illustration styles and I actively use ‘sketch / scribble’ artwork myself, but I don’t believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p>
<p>Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.</p>
<p><img src="/public/images/dropbox-404_bovayg_c_scale,w_758.webp" alt="DropBox 404 page design" /></p>
<p>What does this have to do with a 404 error page?</p>
<h2 id="closing-thoughts">Closing Thoughts</h2>
<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I’ve spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p>
<p>Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
