Design at Imgur: From 188 Colors to 12
Let’s take a little look back in time, through the history of Imgur. In 2009, Imgur started as a passion project in the dorm room of our CEO, Alan Schaaf. Through the next few years, it saw incredible growth, to the point where the company saw millions of users and billions of image views every month. If you thought that a company of this influence had a large team throughout those years, you’d be incredibly wrong. Imgur was a rag-tag team of engineers, design, product and community, not even breaking the 10 employee mark until just a couple years ago. One of the largest online entertainment sites was about the same size as the late-night shift at your local diner. The reason I bring all of this up is because it’s important to understand where Imgur came from in order to understand where Imgur is going.
So when I joined the two-person design team, we were responsible for creating a product for four platforms (now six — desktop, mobile web, Android Phone, Android Tablet, iPhone and iPad), that was being used by literally millions of people. Not only that, but a product that had been designed by a diverse cast of employees. Sometimes a backend engineer, sometimes a product manager, and sometimes even the CEO. Naturally, over the course of a few years of iterating the product in this way, things started to look a little inconsistent. It was at that point that we realized the need to unify our experience across all platforms, internally and externally.
Now that there is a team dedicated to design, we’ve begun the hefty project of unifying our brand and products. And since babies pretty much come out of the womb with a smartphone in hand, we decided to focus on mobile first.
Android Design
Let’s take a look at our most popular mobile product, Android. Before this last update, we had an engineer run a little analysis of all the colors we were using in the app. 188. Yep, you heard that right. We had 188 colors. So, we reigned it in and came up with a simple, 12-color palette. We even gave them cool, space-themed names like #gooGreen, #whiteDwarf, and #cosmicBlue. It will take a little bit of time for these colors to appear everywhere, but now whenever we’re designing new product features or re-designing old pages, we have a very simple palette to choose from.
Grid View
This is something Imgurians hold dear to their heart. It’s the leaderboard, the internet’s pulse. An Imgurian (that’s what Imgur users call themselves) would sacrifice his or her first child in order to make Most Viral. Okay, that’s an exaggeration (maybe), but it’s an important feature to our users. And we wanted to give this baby the attention it deserved.
Notice the previous design. Now, imagine you’ve crafted the most beautiful post in the world. You’ve chosen photos with extreme consideration, produced the wittiest of titles, and sent off your baby to be seen by millions (I really don’t know why I keep using the ‘baby’ analogy. My Facebook page is littered with them now and maybe it’s having an effect). Our previous grid view covered parts of the post in metadata, transparent bars, and truncated titles. If the image you submitted contained text, we were about to put text on yo’ text. So, we made some changes. Post titles now have two full lines of space and aren’t covering your image. Instead of three pieces of metadata, we now just show points — the one metadatum to rule them all. The updated grid is simplified, doesn’t break our 12-color palette, and adheres to Google Material Design guidelines.
Post Page
This is where the new design language really shines. Before, we broke Google’s design guidelines in order to preserve all of our actions at the bottom of the screen. However, this covered content and distracted users from the post on the screen. Upvoting is one of our most popular and important actions, so we needed a quick and easy way to do that. Hence, the new ‘double tap to upvote’ feature. Other actions — like downvoting and favoriting — are important too, so they now lock at the top of the screen and can be accessed at any time. We’ve moved the ‘share’ action into the FAB at the bottom, per Material Design Guidelines.
Topic Select
Of all the screens we designed, the topic select is one of my favorites. Looking at a long list of vague topics doesn’t make much sense to a new user. Why would I click on something without knowing what I’m going to get? Awesome? Anything could be awesome. Adding an image and a brief description not only creates a more visually exciting topic select menu, but one that’s more easily understood. You now have a peek into what you’re going to see when going into a topic, and the fact that they are always updating reflects our ever-changing content.
iPhone
Let’s take a minute to talk about the most important iOS design update, the stack. Our iPhone app received the same facelift that the Android app experienced, but in addition to the cosmetic fixes, we did a serious UX overhaul in order to better adhere to some of Apple’s Human Interface Guidelines. Mainly, the stack.
What is the Stack?
When we refer to ‘the stack,’ we’re talking about how screens are presented to the user as s/he navigates deeper into the Imgur abyss. Want to go from the grid view, to a post, to a user’s profile, to one of their favorites? Well, it would have been an exciting, but unpredictable journey on our old iPhone app. Now, everything pushes in the stack. When going forward, the next screen will push from the right. Going back, the previous screens slides from the left. Simple.
An added advantage of this is the ever-present bottom tab bar navigation. Users can quickly get back to grid view after they’ve gone down the rabbit hole, or switch over into their profile. No need to swipe 10 screens down and out of the way.
What’s Next?
Well, this is just the tip of the (design) iceberg. With the apps updated and looking great, we’ve created a solid foundation for some really exciting features. What an exciting time to be alive. And if you’re interested in being part of the team that decides the future of design at Imgur, we’re hiring :)
