The Journey to Material
How I redesigned Photo Editor by Aviary for
Google’s new design language
By Emmi Hintz, Product Designer at Aviary
For the past three years, I’ve been the lead Android designer for Aviary, and I’ve been extremely fortunate to help design an app that so many people rely on to express their creativity through mobile photography. Recently, I completely redesigned the app for Google’s new design language, Material. I wanted to tell the story of not only that redesign, but also about the progression of my own design experience, shaped by the change in a platform’s design language. I discovered how to be inspired by guidelines set by a platform, not constrained. It’s important to know where a platform has come from to know where it’s going. Taking Aviary from its previous aesthetic to Material was a long journey, but one that taught me many lessons of how to approach mobile design. It also taught me how to learn to love the unique qualities of the Android platform.
ANDROID BEGINNINGS
When I first started at Aviary, one of my first big UI projects was taking our iOS app design and converting it to Android. At the time, I was an iPhone user and was just beginning to grasp the concepts of mobile design. I had an Android for a short time in college, but never fully explored the platform.
My first step was to study our Android test devices and try to come up with a formula I could use to tweak our iOS app design for Android. We designed Aviary for iOS in a skeuomorphic aesthetic with heavy shadows and textures. Holo was the design language Android used at the time, which I used as a guide for transforming the heavier styling. I boiled it down to tighter drop shadows, removed textures with lighter strokes, and added sharper corners throughout the app. This preliminary design project was how the first Android-influenced version of Aviary was born.
Because Aviary focused on iOS at the time, Android became a playground for me after this initial “redesign”. We created most features for iOS first, so I had creative freedom to learn more about designing for mobile. At this point, there wasn’t much expectation for Android since we had a small user base. But, we quickly learned just how valuable the Android platform was. We started getting tons of usage and Android users as our downloads started increasing. So as a company, we decided to make more of an effort on Android.
At the time, I was working with a developer who was a hardcore Android user and advocate. He thought it was insulting that I was using an iPhone and designing for Android, and he was right. So in 2013, I took the plunge and got an HTC One. I began to download apps and found that there wasn’t much structure or a unified design aesthetic in Android apps like there was on iOS. I was thrown off by how customizable the phone was and the flexibility and options within and between apps. After sifting through a lot of apps, I began to learn the conventions of Android and I started to see some of the design patterns. I took what I learned and slowly improved the Android app through usability improvements and aesthetic changes to make it feel more native.
MATERIAL DESIGN IS INTRODUCED
Fast forward to June, 2014. After almost two years of being an Android user, Google introduced Material design. At this point, our old “redesign” was extremely out of date. The minor improvements we made weren’t enough to show how much we valued the Android platform. The release of Material design was the perfect reason to invest the time and resources into an Android-specific redesign.
The process of transforming our app began with a lot of research. Google had just started to release documentation and resources for Material. In the summer of 2014, I began reading and trying to learn all that I could. Fortunately, there was much more guidance for this redesign than before. The documentation Google provided clearly explained the purpose of Material. They were definitely making an effort to lay a foundation for a design language that would make the platform much more consistent and united.
I began researching the fundamental concepts of Material Design; the paper and ink metaphor, the influence of bold and graphic layouts taken from print design and the use of motion that would bring meaningful continuity and feedback to the platform. However, the guidelines seemed more tailored for apps that use a lot of lists, like mail apps or content readers.
As I continued researching, I wondered how our custom app would fit within these guidelines. How should we display our content? Which buttons should be raised, flat or floating? How can we use a single floating action button when we have so many immediate actions? Where could we add transition animations into our linear editing flow? How should we add color when the main visual focus should be the photo? Instead of focusing on the unknown, I started by just stripping the app down to nothing.
COLOR PALETTE
I figured some major visual changes would be a good place to start. I laid out each screen without styling or thinking about transitions. I chose a primary color, secondary color and accent color from the Material color guide that were similar to our branding colors. I went with a basic blue grey for our primary color. This was a neutral tone not super contrasty like black, but enough to help the photo pop. For iconography and text, I used white and bright blue for the accent color. Stripping everything of the shadows and strokes was already a big improvement.
ICONOGRAPHY
The next step was to rethink iconography. Our old icons were thick, bubbly and outdated. I used Google’s icon grid and explored their system icons for inspiration. The grid helped maintain consistency between Android’s icons while incorporating my own styling to keep Aviary’s personality and brand. I used a lot of repetition of shapes to create icons that were symmetrical, bold and simplified for each tool. After plugging these into the mockups, it was starting to shape up.
PHOTO SELECTION
After bringing the app back to basics, I started to think a little bit more about the flow. Our app’s user flow is a straightforward, linear process. Users first choose a photo from a standard photo grid. This could remain the same with some minor changes. We decided to replace the top bar with the new app bar, and add a slide navigation drawer to our account section. Finally, we added a floating action button for the gallery entrance, the most important action on this screen.
APP FLOW
After choosing a photo, the next step is choosing a tool. Users have twenty tools to choose from in a horizontal list to edit their photo. After choosing the tool, we transition the user into the secondary actions for that tool. For example, in our one-touch enhance tool, the user has three different options to optimize their photo. This secondary level had to feel different than the first. To accomplish this, we changed the background color to a lighter version of our primary color, and added circular borders to the icons so that it was clear you were one level deeper. We also added an expanding circular “ink” animation to transition from the darker primary color into the lighter version of the second level.
SUPPLY SHOP & CONTENT
Another example of secondary tools (and major focus of the app) is our content tools. These include effects, stickers, frames and overlays. Inside the content tools users can view and buy more content related to that tool. There is also an entrance to our Supply Shop where they can browse more content. We decided to start with the Supply Shop. We took some influence from Google Play, using cards and a menu tab bar with featured images. We thought this inspiration would help to familiarize people with the buying experience. With that foundation in place, adding some of the Material design elements created a more immersive buying experience. We updated the card styles and implemented the mobile app bar with tab bar making it easy to slide from one type of content to the next.
COLOR & IMAGERY The Supply Shop and its content were also big opportunities to use some of the other guidelines encouraged by Material design, mainly color and imagery. Our content packs are all identified by a carefully chosen marketing photo that illustrates how the content could be used. With these photos, we decided to take advantage of the new color palette engine. We could pull the most dominant color from the photo, make it vibrant and use this color to create the detail screen interface. We also extended the images to make them more full-bleed and remove margins, making the experience more immersive. We used the color palette engine to accent pack titles in the content tray. This helps to identify the pack and also give the tray a pop of color.
DYNAMIC COLOR
After our experiments with the color palette engine, we realized that we could also use it in other places throughout the app. We pull the most dominant color from the photo being edited and use it as complementary color throughout the UI. We also added this to the slider and loading icons, giving the app a more spontaneous and magical feel with every edit. To push this “magic” feel even further, we also used the color palette engine to pull colors for the Draw and Text tools. In addition to the several default swatches, and also add some pulled from the photo, so doodles and text can accent the photo.
APP ICON
The finishing touch was redesigning the app icon. Using Google’s grid, I took our old icon and gave it a facelift. We removed heavy gradients and flashy decoration to create a clean and vibrant new icon. We replaced the colors with more lively ones from Google’s material color palette, and added a light source to create depth and layering without being too heavy.
RELEASE
After months of hard work, we finally unveiled the redesign on April 9th, 2015. Android users are notoriously passionate about their platform, and they loved that we took the time to revamp our app specifically for them. It was rewarding to see that all of our work was appreciated.
After going through this redesign, I realized that initially I was overly concerned about sticking to the guidelines that Google set so that our app felt totally native. What I learned was that Google doesn’t necessarily want us to do exactly what they did. The guidelines are just suggestions and a foundation to inspire. They want beautiful apps that have a consistent foundation, but interpret the guidelines within their own context. Once I allowed myself to think more outside the box, something clicked: Platform design languages are not meant to limit us, but give us a starting point to express our creativity and better display our app’s personality.
In my next post, I will talk about an upcoming Material iteration, which will include more dramatic transition animations. In the meantime, if you have any feedback or ideas to improve Photo Editor by Aviary for Material design please leave a comment.
Thank you for reading! If you found this post helpful, please click the “Recommend” button below.
To download Photo Editor by Aviary for Android, find us in the Google Play Store.
Follow us on Behance
