How we build a solid base for a Material Design App. A Case Study…
Trivago: A free hotel-comparison app that helps you find your ideal hotel for the best price.
Designers at trivago have a common understanding of the company branding, but with Trivago being a fast growing company we have a increasing problem with consistency. Today, in 2016 we are more than 25 Designers. We need rules that we can apply to our products we are working on and keeping true to our overall brand. Rewind to 2015, Daniel Riemer and anki delfmann started to build a pattern lab based on the idea of atomic design by Brad Frost to tackle this major problem.
In Q3 2015 the team of Christoph Reinartz started the project IRONMAN. CSS Refactoring of the whole core-website of trivago. Every asset, color and font was changed in that time to fit on a new, solid fundament. The time has come to apply these patterns to the android app and also to follow the guidelines by Google to have the best branding and user experience.
Don’t call it a redesign! It’s about polishing and alignment. Call it #lics! It stands for Layout, Icons, Colors & Standardization.
Rafael Alves, Product Manager Android
The challenge
In Germany we say “zu viele Köche verderben den Brei”, meaning that “too many cooks spoil the broth”. This has happened in the past. Layouts were built by different people with different focus areas. Things worked out well for each screen/project/story, but it was never a unit.
That’s why we decided to clean this up and polish it a bit more instead of doing a complete redesign. We needed a base from where we could expand on and grow.
My Idea was to create a system that allows me to adopt all patterns that I use in my sketch-file to use them over and over again. Changing logics, measurements and so on should be dynamic. My solution was to create a single file where I could stick the components together like lego. That’s the reason I made it modular.
How we build a solid base for material design
Trivago is all about numbers therefore we have been testing the android app all along. By living the Power of proof - one of our core values, we can easily see what is a good idea and improve upon it. However, sometimes we have to break this rule to set up a foundation. This is used as the growing ground, from where we can plant our ideas that can grow into something beautiful in the most efficient way.
#LICS
(Layout, Icons, Colors, Standardization)
First things first. Before we think about fancy animations, brand-new navigations and easter eggs — we have to do our homework. With the intention to follow the Material Design, as the only design language Designers should be using in the Android ecosystem, we start rethinking the design of our app . So lets get started …
The most important rule: “No changes in functionality”. It’s only about what you see.
Doing one logic for toolbars, snackbars or dialogs seems super consistent to me and also easier for our developers to implement.
I have created a ton of modules. We, a joint team (product managers, developers and me), printed all the modules on paper and played around with ’em. It was super easy for us to built new screens for the whole project in a timely manner.
Layout
Choose your weapons — I have been using Sketch for years as my default tool to design interfaces. We even wrote a own plugin for generating photos and strings. Besides, Sketch works perfectly with the following apps as well. For all transitions and animations, I choose Principle to easily explain ideas or communicate with Product Managers and Developers. The best way to describe layouts to developers is zeplin. There is a option on every Android device to show the layout bounds. By using invisible boxes in sketch I could replicate this feature in zeplin to easily show the layout limitations.
These tools mentioned above have made our work and life easier and better! :D THX to the creators!!!
Common understanding with Managers and Developers
Putting everything in new layouts has lead me to create everything in modules. The best thing for the team and me was to avoid reinventing the wheel over and over again. So I have developed a system that allowed the developers and me to speak the same language. Through this process the developers were able to find mistakes I made. We started to discuss on a whole new level. It was now possible to focus on the plain ideas instead of discussing non-trivial things. Through the prototyping on paper everybody was now able to cleanly explain their thoughts and ideas to the others. Also it was possible for me to talk to my teammates about the designs and layouts and through the visual real-life experience they could grasp the ideas even better. That way everyone was on the same ‘page’, which was super nice. (See what I did there #worstpunever). Product Development Manager could easily write user stories without putting too much energy in describing every detail of the layout.
Prototyping on paper was super easy and fun with this LEGO Bricks — Farhoud Cheraghi, Lead App Development Manager
Icons
All Icons have been redesigned to fit perfectly into the material design grid of 24x24 dp. All of them have been tinted by the system in code so it’s now possible to change some icon colors in a wink, without the need of exporting them again.
Tinting the icons and drawing shapes made the app (apk file) much lighter. Usually, we would need an asset for a button each in its different state, like the pressed state, inactive state and an active state. Now we just need only one asset to do all. The next step would be to use .svg to convert them to vector-drawables.
Colors
Setting up a base-theme for the overall appearance. My colleagues from Brand & Web Design have already defined really nice and solid colors for the product.
I’ve set up some default rules for using these colors, as an example: Dark blue is used for important texts like a title and a other example would be the green color which is only used for the clickout call-to-action.
These two screenshots show you how the colors were defined before and after #lics check ‘em out. As you can see on the right it is now a lot clearer and tidier.
Standardisation
FOUR font sizes only.
There is ONE huge font size for hotel names, ONE big size for menu points, ONE small size for informational text and ONE tiny size for sub-lines.
We have applied the same guidelines for stacked objects as it is in the default Material Design app. E.g.: The Elevation and shadows.
Objects in material design possess similar qualities to objects in the physical world. In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects cast shadows and reflect light.
(Test)-Results
We will measure our outcome with a net promoter score survey, reviews and ratings from the Play Store and some business KPI’s. But this is an example what we know now…
Design increases installs by 16%
Is design important for a product? YES, even such a small thing as an icon can be incredibly effective and clever while poorly made ones fail to communicate.
I have created over 30 conceptual & realistic icon designs that resemble the material design. Marketing have tested 5 different areas in 6 variants on 3 platforms, and found out that different icons do effect installs significantly. The trivago wordmark icon has performed best, showing 15.9% more installs compared to the old icon.
Why do we need to test?
Controlled testing is the best way to measure your work, to find the most effective graphic for the app, and to see what users truly like. In trivago, we can run A/B tests to compare test variants against the current version, so that we can see how best to optimize our app.
*/ Tip:
No testing tool at hand? No worries, you can use the powerful A/B testing feature provided by Google Play which can help you to optimize app store listing.
User Interface Design
Following are some real-life screenshots in a comparison v2.9. (left) vs. v3.0 (right) … ah! I have especially chosen the german language to show how good the design works even with long strings :D
Simplified Home is our internal name for the start screen above. It’s the entry door to the trivago universe. Users can directly and quickly start searching for their ideal hotel. By using the lightest color for the input field we create the biggest focus on the search.
The focus lies now more on the readability of the app. The font in the toolbar is thicker and bigger than before, so that a user is able to read it more easily. The thickness of the font is nearly the same as in our icons.
The same applies to the dealform, the text is better to read and shows an important sub-line: arrival and departure.
Using more native components makes the app faster and better to use. Using more whitespace leads to a better readability.
Clear segments, proper touchable areas and native controls give the filter panel a nice material look and also improves the usability of the filters. Here we introduced to “trivago-button”. A special button with custom ripple effects for toggle, label and standard buttons. We excluded the “iOS-chevrons” and replaced them with arrows pointing in the air to show dialogs after pressing them.
We got a new home for the settings. In 2.9. we had all our settings in the filter panel. Now we have a new activity for all of them. In this example above you can see the language picker in comparison. Here we also use native radio buttons for the best user experience (ux).
What I learned
Working in modules was super efficient. It has saved the team and me a lot of time. By using ‘symbols’ (something like smart-objects in Photoshop) I could build screen-designs in just a couple of minutes. Changing a small part of the app automatically changed several parts in my (monster)-sketch file. Also uploading them to zeplin was really handy.
One of the best things was to have a workshop with the developers. They got a really good understanding for the design language. They really digged it and wanted to keep the app consistent. Some developer even corrected me if I sad things that collided with my own rules :). That’s the reason why I always say we have built it together, and that was a good feeling.
Now it’s up to you! Try our newest version of trivago for android and let us know what you think!
DOWNLOAD ON GOOGLE PLAY STORE
Thanks to my mobile team never giving up on improving our app!
This post is dedicated to the trivago mobile dudes Simon Hinz, Andreas Kwiatkowski, Rafael Alves, Stephanie Preuthen, Oleg Stirbu, Anting Chen, Farhoud Cheraghi, Alicja Ryczak, Martin Schramm! Thank you for being such a great team. Last but not least our awesome developers Daniel Lyssi, Adam Harazim, Alexander Laws, Julian Horst, Carsten Drösser, Giulio Petek and Frederik Schweiger.
Thank you for reading my first medium post!
— Cheers Georg
