The problem is that using opacity to lighten a color makes it appear washed out.

Flexoki emulates the feeling of pigment on paper by exponentially increasing intensity as colors get lighter or darker. This makes the colors feel vibrant and warm, like watercolor.

Space-saving combination of a bar chart and color-coded table. Source

Combines averaged data with a preview of the full data set as you move your cursor around. Source

Storytelling + financial data in a relatively easy to understand format due to intelligent shading, color choice, and animation. Source

Radar chart that presents data on five axes, using transparency to make comparison easy. Source

Attractive line charts that stay bearable in 3D because of overlaid elevation markers. Source

Great color choice and chart annotations. Source

Great use of color and shapes, though hard to read at times. Source

Radar charts again used to quickly present comparisons. Source

Great use of animation to show cyclical data. Source

Seamless transitions between different chart types. Source

This post was originally published on Medium in 2014.

Every so often, an app comes along that just completely understands the way you think. I don’t normally write long posts about an app I’ve used. But Citymapper is so incredibly well-made that I decided to put together a list of common use cases of a maps app, and how both Google Maps and Citymapper handle them.

Scenario 1: I need to get somewhere as fast as possible.

Citymapper, 10 seconds: I can see all 4 options (public transport, walking, car/taxi, and biking) side-by-side, allowing me to compare options quickly.

Google Maps, 20 seconds: I need to click through each individual option and remember which is the fastest. Also, the flyover animation is cool but unnecessary when I’m trying to see what the fastest time is.

Scenario 2: I want to see the time needed to get from point A to point B.

Citymapper, 10 seconds: I can enter my origin and destination at the same time.

View video demonstration

Google Maps, 30 seconds: I need to first enter my destination, then specify how I want to get there, and then change my origin from “My Location” to a different address.

View video demonstration

Scenario 3: What are the trains near me?

Citymapper, 2 seconds: Since I know the subway system pretty well, I don’t always need full directions — I just need to know where the closest subways are so I can judge which one I should take. With one click on the train icon, I can see all the trains near me, sorted by distance. Same thing for buses.

View video demonstration

Google Maps, 30+ seconds: There’s no way to see all nearby trains, so you have to manually look around your waypoint and click on each station. There is a public transit option in the sidenav, but it only highlights the lines on the map and you still need to click through to see which stations are closest. And at transit hubs (in this case, Union Square) it considers different subway entrances and lines as separate, so it won’t let you see aggregate information for a particular station.

View video demonstration

Scenario 4: How long will it take me to get somewhere by Citibike?

Google Maps, can’t do it: Google Maps doesn’t have bikeshare integration, so I’m forced to switch apps and use the equally scatterbrained Citibike app to find availability.

Citymapper, 15 seconds: Not only does Citymapper find where the nearest Citibike location is and let me choose whether I want the fastest route or the quietest (read: safest) route, it also notices that the closest Citibike location to my destination has no available spaces and reroutes me to the next closest one that does. That’s magical.

View video demonstration

Scenario 5: I just searched for directions at the office, and now I want to see those directions again.

Citymapper, 5 seconds: Previously searched destinations can be found right underneath the search bar for easy access.

Google Maps, 10 seconds — if you know where to find it: For some reason, previously searched destinations are found under your profile (the person icon next to the search bar) instead of when I search. I never noticed that until I started writing this post.

Scenario 6: I’m late to a meeting so I’m sprinting as quickly as possible down the street, looking at my phone for directions.

In any other app, shaking my phone might mean “undo last action” (e.g. Mailbox) or “submit feedback” (e.g. some beta builds of mobile apps). In a maps app, though, there’s pretty much one thing a shaking phone means — I’m running, biking, or just moving. And when I do any of that with Google Maps, this happens:

It blocks my view, it shuts off turn-by-turn directions, and is altogether a pretty terrible interaction.

Other design details

City icons

Going to a different city? Citymapper’s customized icons for each of its supported metro areas gives the app personality.

Offline subway map

If you’re in the subway, you can access a full offline zoomable subway map by clicking on an icon on the homescreen. They also have a “Save trips” option on the directions screen so you can save directions for offline use (e.g. on a subway).

Humor

First, their release notes are legitimately funny (see Twitter examples).

And when presenting your transit options, Citymapper will occasionally throw in a funny option:

or sometimes:

But I guess I’m easily amused.

Final thoughts

Citymapper is more thoughtfully designed for urban travel. But for people who drive cars, something like Waze — with its fullscreen interface and crowdsourced realtime information — is a better choice.

And there are still features I would love to have in Citymapper. Turn-by-turn directions. Spoken directions for when I’m on a Citibike. Maybe personalized time estimates that are tailored to my walking, running, and biking speeds. But whatever Citymapper adds to the app in the coming months, I know it will be thoughtfully engineered and designed to make finding directions almost fun.

If you’re so inclined, you can download Citymapper here. (And disclaimer: I have no relation to Citymapper. Just a happy user. They didn’t even know I was writing this post.)

Ask any Mac power user about their menubar and you’ll get a different list of 5-10 must-have applications and utilities that boost productivity. The menubar is the mission control of a user’s computer, giving them an at-a-glance view of stats and apps that are important to them. The menubar can become so crowded, in fact, that’s there’s a menubar app that collects menubar apps. So meta.

History of the Menubar App

As far as I can tell, the first menubar app appeared in the 2002 release of Mac OS X 10.2, nicknamed Jaguar. Apple had just released iChat, and part of the iChat interface was the ability to change your availability status from the menubar. But as Mac Developer Ari Weinstein has pointed out in a note, “NSStatusItem, the API developers use to create menu items, has existed since OS X 10.0 (or longer, it probably originated as part of Rhapsody in the late ’90s).”

By 2005 and the release of OS X 10.4 Tiger, other apps began to use the menubar interface to expose app status, preferences, and frequently-used features.

The menubar is a uniquely restrictive interface. Animations on the menubar icon can be distracting, but can also be a useful status indicator. Windows aren’t persistent, so you can’t count on the user keeping the window open as they multitask.

In short, menubar apps face unique design constraints. Let’s take a look at 15 apps with a menubar presence— Caffeine, Layervault, Skitch, F.lux, Cloudup, Crashplan, 1Password, Day One, Dropbox, Twitter, Cloudapp, Evernote, Droplr, Fantastical, and Mint.

Window dimensions

The sizes and aspect ratios of 15 top menubar apps range pretty significantly:

Width vs. Height (in Pixels) of the Apps Listed Above

This isn’t an entirely fair comparison, however, since not all the apps are stateful. Some (like Caffeine) are glorified context menus, while others (like Mint) display changing information and allow users to interact with the app. If we remove Caffeine, Skitch, Layervault, and F.lux, we get a good estimate of the ratio of width:height for full-blown menubar apps.

Width vs. Height (in Pixels) of Stateful Menubar Apps

Resource Usage

A few things about my process here — these metrics were taken on a Late 2013 Retina Macbook Pro running OS X 10.9.4 with Activity Monitor 10 minutes after a fresh restart (to deal with any usage spikes immediately after a restart). None of the apps were doing active work (e.g. Dropbox wasn’t syncing any files). I only took metrics for the “helper” process if the menubar app was an interface for a larger app (e.g. Evernote and Skitch have separate app and menubar processes). And I excluded Twitter because it doesn’t have a separate menubar process and it didn’t seem fair to include the entire app’s usage in the comparison. Obviously some of these stats will depend on your system, hardware, OS, etc.

RAM Usage (in megabytes)

Processor threads used

Most Common Colors Used in Icons

Quit with ⌘Q?

Only 5 of the 15 apps (Cloudup, Cloudapp, Droplr, Fantastical, Mint) listed allow users to quit the app by pressing ⌘+Q while the menubar app is enabled.

Icon interactivity

Most of the menubar apps have an icon that animates or changes color (i.e. the Dropbox icon when files are syncing). Only 4 don’t— 1Password, F.lux, Skitch, and Evernote.

Gradient in menubar icon

There’s no consensus on whether menubar icons should be monochromatic (all black) or use a gradient.

Thanks for reading!

Like this post? You should also check out Bowery.io, an easy way to set up your development environment, visit my website, or follow me on Twitter at @zmh.

This post was originally published on Medium in 2015.

The value of design in a consumer app is fairly well appreciated today— design, branding, and user experience have a meaningful impact on customer happiness and retention.

For enterprise companies, however, it would be easy to underestimate the power of design. Many of these tools operate behind the scenes or on a server farm, so visual design isn’t a priority.

Yet some of the best enterprise companies took design to heart. Their websites are an extension of their brand, and they use design to personify an otherwise faceless product. Stalwarts like Oracle and SAP might not have the most attractive sites, but new players leverage design to connect with their customers and differentiate themselves from their older and slower competitors:

Some takeaways for enterprise companies:

1. Plan an annual redesign. Most of the sites above completely overhauled their websites at least once a year. While some of the changes are visual, the general UX of the page also improves. A lot changes in the design world in a year’s time, and a lot also changes in enterprise. Redesign your site to reflect that.

2. Photos of people help humanize your brand. Some of the above use stock photos (e.g. VMware), others use custom photos (e.g. Rackspace), and others use illustrated people (e.g. Joyent). In every case though, it seems like the company is trying to put a human touch on an otherwise amorphous product offering.

3. Today, whitespace, color, and photos are preferred over dense text. This is partly a broader web design trend, but even enterprise companies that have complex offerings are putting documentation and features on separate pages, leaving the homepage free for calls-to-action, customer testimonials, and eye-catching photos. Consider Salesforce’s site in 2010, VMware’s site in 2010, or Heroku’s site in 2012 versus their sites today.

If you found this post interesting, take a look at Bowery. We’re reinventing the local development environment, and it’s free.