3 Product Principles Our Startup Learned From Material Design

Alexis Fogel
Dashlane Insights
Published in
5 min readMay 7, 2015

This morning I’m pleased to announce the release of our Material Design Android app. I’m even more excited to announce that Dashlane is now featured in the Google Play store as a result!

Now seems like the perfect time to look back on our experience with Material Design, and share the product insight we gained with startup and app developer communities.

Dashlane Materialized app on Nexus 10

Our Design “Kick Up the Backside”

When we started developing the first Dashlane Android app, our number one priority was to have a stable and fast app that didn’t compromise on security. After all, as a Password Manager, the ability for users to store and retrieve their data securely is the most important priority.

At this early stage — even though I am a little ashamed to say it — we spent very little time on design.

For starters, like most young startups, we had few internal design resources. But we also operated with the assumption that as long as we respected the basics of Android UX, we should be able to “reuse” much of what we had on our iPhone app.

As you could guess, that was not the case at all.

The app was functional. But functional isn’t what great companies do. We knew we wanted a world-class app that was fun to use; one that our Android users could get passionate about.

When Google released its Material Design guidelines, we were spurred to action. Not only did Android get a beautiful new form that was really well documented, but it was clear that the Android ecosystem was upping its game. Creating a good experience wasn’t a luxury anymore, but a necessity. Android users’ expectations were being transformed by the beautiful designs they were experiencing on other apps.

In short, Material Design gave us both the opportunity and the impetus we needed to address our Android design head on.

Interpreting Google’s Guidelines

Guidelines are great for two reasons:

First, the fact that many apps are using them means it’s much easier to create something that is easy for people to understand. As they get used to Material Design across other apps, they come to know what to expect when they land in yours.

Secondly, guidelines raise the bar in terms of app expectation. When you are freed from those tricky, fundamental design and UX choices, you can focus your time on experimenting with cool new styles.

Animation for unlocking the application

Guidelines, however, also come with a big disclaimer.

In the same way that Agile development is not just about having a product owner and a whip, Material Design is more than flat styles and a “+” button at the bottom of the screen. There are fonts, spacing, color, animations, architecture, and the list goes on… One of the biggest traps of great guidelines is to think that they can be applied without a designer.

There’s no shortcut to a brand new app.

Our entire Android project was led by a designer whose job was to ensure that the guidelines were interpreted in the best possible way and also to add these little things that make your app stand out.

3 Material Design Product Principles

  1. Focus on your own users

When prioritizing the redesign elements, we tried our best to keep our core user experience in mind.

People come to Dashlane to manage their personal data. Our goal? Make sure these elements were at the center of our redesign.

This meant creating a pleasant interface for passwords, a more subtle app menu, and the famous floating plus button to reduce barriers to storing new data.

Revamped password screen

2. No shortcuts: think about every form factor and operating system

Building an app for Android actually means building a whole host of apps that must work on phones, tablets and phablets. Dashlane is built to scale, and our UX varies from platform to platform. For instance, a list view is great on phones, but on tablets more complex grid views work better.

Password list on mobile
Password grid on tablet

As such, we made a smooth UI for all Android versions a critical requirement of our revamp project. Nobody wants to feel like an afterthought. Sure, Lollipop gives you access to out of the box animations to help you achieve Material Design, but to account for the older versions of Android (that our users still use heavily) we re-coded every element that was made readily available for Lollipop.

Breakdown of new Dashlane users by Android operating system versions

3. Combine good design with good features

Our focus on creating a great visual design didn’t mean we ignored features. Instead, we thought about how we could use Material Design to create brand new experiences for our users. A new feature we shipped with the revamp release is universal in-app automatic login. The great feature adds an impressive layer of convenience that means our users never have to type their passwords to get into their other Android apps.

New in-app auto-login account selection

What’s Next?

The problem with redesigning an app is that it can go on forever. At some point a red-line must be drawn and a project must be completed. Once we had crossed off every item on our revamp checklist, we choose to close the project and release the app.

But that doesn’t mean we’re done.

Keep an eye out as we have more cool visuals and an even greater user experience on the way. As a treat for reading this far, here’s a sneak peek at some cool animations that didn’t make it in our latest release, but we’ll be coming to your Android device in the very near future!

Unreleased Dashlane login animation
Unreleased password saving animation

--

--

Alexis Fogel
Dashlane Insights

Co-founder @stonly & @dashlane, passionate about UX/UI, innovation, code, photography and a lot more.