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

LEGO Bricks

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.