Published on <a href="https://blog.prototypr.io/how-dropbox-lost-it-ce9ee8852597?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Momoh Silm 
We all know something is awfully wrong with the new Dropbox design, a design Dropbox says it’s the biggest change to the Dropbox brand in their 10-year history (might not necessarily be the best).
In this post, I attempt to simplify where Dropbox went wrong and why all the noise you’ve been hearing is something they should look into.
<h3>What is design?</h3>
In simple terms, design is all about reducing the friction between users and their goals. Design is not only software. There are various design systems around us.
Nowadays, companies employ design to reduce the friction between users &amp; their goals and to convert visitors into recurrent users of their product.
<h3>Dropbox’s Problem</h3>
We all know what Dropbox is — A storage service. Simple as that.
Another thing that’s also simple is that Dropbox is boring &amp; it’s not a household name. Storing files is boring. Recovering files is boring. A lot of other apps &amp; products you use actually use Dropbox for storage but we couldn’t care less.
Now the problem is that Dropbox is a rich company. Rich companies want to get richer but mere file storage as a service won’t cut it. A lot of us use the free tier of Dropbox. To get richer, Dropbox needs to build products that people love to use every day. Something they have tried with both <a href="https://www.mailboxapp.com/">Mailbox</a> and <a href="https://carousel.dropbox.com/">Carousel</a>. Needless to say, both didn’t work out so well &amp; Mailbox was shut down on February 26, 2016.
Enter Dropbox <a href="https://www.dropbox.com/paper">Paper</a>. Paper is Dropbox’s latest attempt to create an everyday product users will actively interact with. It has received a reasonable amount of love so far &amp; now Dropbox is trying to create a lot of buzz for their new baby.
<h3>Dropbox &amp; The Basics of Design</h3>
Another thing has just become clear — Dropbox’s redesign is because of Paper.
Their new logo, images and language overhaul is all because of Paper. Now where’s the problem?
<h4>1. Branding &amp; Identity</h4>
<ul>
<li>Identity — You produce it, and you market it. In order to get enough attention from potential customers to convert them, you need to communicate well with them to get them to know your product. You want to show them your identity over and over again till they recognize you unconsciously. Not 49 variants of your logo.</li>
<li>Branding — This is how people perceive your product. Great design well serves your product in establishing positive perceptions by potential and current customers. Uber? Airbnb?</li>
</ul>
It looks like Dropbox is going about their Identity &amp; Branding well, except that they’re not. Their concepts lack empathy, it lacks any personal connection with the users.
<blockquote>At the core of design is people, So it’s important to have empathy for the user.</blockquote>
Take their logos for instance, the image below are only the ones they showed on Dropbox.design, I wonder how many more are in their raw “dropbox_logos.ai” file. Great brands are known for their logos in terms of colour &amp; uniqueness — Starbucks, for example, is known for their green colour while Netflix is known to be red. Dropbox? The jack of all colours, master of none.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yL0tae2GDtFMBEznE3_I3Q.png">27 variants of one logo. Lost identity
<h4>2. Colour</h4>
<ul>
<li>Product — Our brains always like to focus on brands that are immediately recognizable. In order to create the product look engaging and recognizable, you have to use the colors properly that align with your business ideas, personality and emotion.</li>
<li>Users — For users, different colours mean different things. Once again empathy comes into play as you want to use a colour that interprets your brand well and rests easy with your users depending on the product or service you’re offering e.g G-Shock wristwatches are usually very durable &amp; tough = black.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ygMoq9Pxi7wPsjLsIrXE2g.png">The New Dropbox
To a new or recurring user what does this colour mean? What do all the million colours they’ve combined mean? How do I relate to these? Let me make a quick case of why they should have stuck with Blue as their primary colour (if they still have a colour system).
Blue is one of the most commonly used colors when coming to product design. Once you see a product that’s blue, you’re calm &amp; you already feel like you’re in familiar territory. The blue color is considered to give emotions such as trust, safe (Dropbox storage) + creativity and calmness (Dropbox Paper).
Sounds like a match made in heaven right? Dropbox didn’t think so.
<h4>3. Typography</h4>
This is where they totally lost me. Typography is just as sensitive as colour.
But they got this all wrong by a wide margin most people sincerely thought there was something wrong with their browsers.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iSqSTDdShYu_-AQKeKBpnQ.png">This makes reading so hard. This is a headache
You don’t have to “speak in a variety of tones”. You don’t need to “speak in a variety of tones”. Find your voice &amp; be known for that. Create an identity for your brand. Trying to satisfy everyone satisfies no one.
Standalone, nothing is bad. This typeface is not bad but the implementation is horrific. It makes scanning the website impossible, it makes reading a chore. The line-spacing is wrong, and the font looks stretched horizontally sometimes. Other times, it looks stretched vertically. How hard is it to pick a font that works? Scrap that. How hard is it to continue with whatever font you were using already?
<h4>4. Consistency</h4>
As a brand, you want to maintain consistency across your web pages, products and everything else. It makes you organized, sorted and life is easier for your users. They know what they’re expecting before they see it &amp; interaction is seamless. Remember when I said design is reducing friction between users &amp; their goals? Sadly, Dropbox doesn’t believe in consistent systems.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CAyCxrcmvsSbmdXhZLbnug.png">1. Font consistency is null<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AStAup9ZAXCV2L8KcU8Ldg.png">2. Colour &amp; Content Alignment makes each page extra work before you can consume the information<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f4LmRK7N9oMCrwySPhmmlA.png">3. Lack of icon consistency on dropbox.com/paper
Strong visual hierarchy and composition will guide your eyes fluidly across a layout. Poor visual hierarchy will result in miscommunication or confusion. Repetition &amp; Rhythm = Scanning efficiently.
<h3>Stitching the Paper</h3>
Dropbox has no design system and it’s fast losing its identity. In the name of thinking outside the box, you do not dumb the basics, the core of what a process stands for and begin to look like an art exhibition platform. To fix this broken system, Dropbox needs to go back to basics. Ask core questions &amp; come up with a design styleguide.
What is Dropbox (Storage &amp; Paper)? Answering this question means you can define your market &amp; users and not just feed everybody a website meant for only hipsters.
<h4>Benefits of a styleguide for Dropbox</h4>
i. A Styleguide Makes Designs Concrete and Branding Clear.
ii. Addresses their colour palette. &#8211; Choose a neutral background color. Then choose a primary and secondary accent color. Finally based on your colors, choose an error and success color for your different UI states.
ii. A Styleguide Makes Your Design More Consistent. &#8211; This fixes their font sizing which at this point is nothing short of comedy.
iii. Reusing the Same System Components Makes Your Product Easier to Use. &#8211; This fixes their inconsistent use of icons across the platform.
Abrupt End. Yours Truly, <a href="https://twitter.com/M_Silm">Silm</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ce9ee8852597" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-dropbox-lost-it-ce9ee8852597">How Dropbox lost it</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How Dropbox lost it

Top Stories