Material Design and Photography: 6 Things We Learned Applying Google’s Design Language to EyeEm

By: Jaime Muñoz, Senior UX/UI Designer

Today we are releasing EyeEm 5.6 for Android, where we applied Google’s Material Design to create a more fluid, simplified and clean app experience.

Our main challenge in applying Material Design to EyeEm was to take full advantage of its unified design framework while keeping our own identity that community members feel familiar with — i.e. keeping the photographs front and center as colorful and highly visible elements. Here are some of the things we learned along the way.

1. Balance Consistency vs Identity

One of the most useful things about Material Design is the consistency it provides. Users will instantly feel familiar with your app if you use Google’s patterns correctly, and the 8dp grid, keylines and icons system will make your design look great on any screen size and resolution.

But consistency, especially when applied on different apps, carries the risk of making apps too uniform. It’s hard to find the balance between the guidelines and your own product. When you have very detailed guidelines and pre-defined suggested color schemes, how do you keep your unique style and identity?

When reading through the Material Design guidelines, you’ll not only learn what you should do, but also what you shouldn’t. It’s important to understand this, as you don’t want to implement no-go’s. However, in order to make your design work with your brand colors and type of content, you might have to stretch what’s recommended.

As a general rule: A guide is simply a guide, not the law. But — if in doubt: Follow the guidelines.

Old vs. new profile

2. Think first before you move

Embarking on a redesign gives you the option to look at your app holistically, but this doesn’t mean you have to redesign it from scratch to apply Material Design. We realized it’s better to focus first on the key elements of the new design in order to ship as quickly as possible — then see how it performs and keep refining it. If you focus on the here and now, you will not miss tomorrow.

In our case, the timing seemed ideal to simplify the navigation structure, decrease complexity and regain some valuable real estate for the content. We removed the tool bar that was seated on top of the tab bar, moved the search field on top of our home feed and incorporated app notifications into the tab navigation.

Finally, we removed the tab dedicated to EyeEm Missions and integrated it with the notifications tab. EyeEm Missions are photo contests that get updated several times a week and run for a short period. By moving this feature to an area of the app that people check much more frequently, we hope to increase participation and make sure our photographers don’t miss any updates.

Old vs. new navigation
Old news screen vs. New notification center

3. Add depth

A fundamental characteristic of Material Design is the concept of depth. Objects and sheets of material have physical characteristics — they sit on top of each other, reflecting light and casting shadows. Here’s where we found another challenge: most of EyeEm’s design was pure black, meaning no shadows would be visible.

Google provides an example dark theme, but it actually didn’t work for us. We wanted to create a sense of depth without adding too much contrast that drew attention from the photos. We tried dozens of combinations of dark grey tones and tested them on every device and light condition until finally getting it right.

It’s not easy applying a black theme to Material Design and there aren’t many good examples of it — but all of our testing and trying finally got us there.

4. Break the rules

We didn’t strictly follow the guidelines when it comes to cards. We added elevation to hint that it’s possible to tap on them and expand the information. We also made the cards from edge to edge, so photos can be enjoyed as big as possible and without distractions.

Normally cards are displayed with side margins. However, after looking at several iterations we found that for our product, an immersive feeling is more important than structure and clarity. Facebook also took this approach and removed card margins in their last Android update.

5. Rework the Flow

When we saw the FAB (Floating Action Button) in the Material Design guidelines we were really excited. EyeEm has worked with a FAB for a long time, and it’s great to see now that the platform offers a native control.

To keep the consistency, we aligned our FAB with the new guidelines, making it smaller and simpler. We also opted for the bottom right placement, easy to reach without getting in the way of enjoying the photos.

We reworked the flow behind the FAB to take the photographer to their image gallery instead of the camera. As our data shows, it is fairly rare for our users to take photos directly from the app.

Finally, we implemented Material’s circular reveal transition. It works great and makes the whole flow feel much more fluid.

FAB circular reveal transition

6. Make Transitions Meaningful

The Android system provides a whole set of ready-made transitions and animations that can be implemented in no time. We tried many of them, but what looked cool at first turned to be incredibly annoying over an extended use.

Our advice, and also Google’s recommendation, is to use these animations with care. We ended up implementing only a few key ones that felt natural and help the user better understand the experience.

Besides the beautiful FAB circular reveal, another great transition example is the one that rearranges photos from a grid-view to a list of cards.

Transition from a grid of photos to a list of cards

What’s next?

Here we are — releasing the first version of EyeEm in Material Design. We feel it’s a great step in the right direction and we managed to refresh the app in a fairly short amount of time. Could there be more transitions and more refinement? Yes — but as with any design change, release early, test often and keep refining.