Embarking on a Journey in the Material World

Geocaching Design
Geocaching Design
Published in
4 min readJul 14, 2015

--

by Michelle Li and Abby Deering

Shortly after we launched our Geocaching Android free app in April 2014 Google unveiled Lollipop to the world and with it came the launch of a new design language, Material Design. The fundamental concept of the new language is to provide new ways to delight and engage users. We wanted to update our app to Material Design to provide new, fun ways to enrich our users’ geocaching experience and keep up with current Android usability and design trends. Geocaching is an anytime, anywhere real-world adventure where users find geocaches (containers) by navigating to specific coordinates. When Material Design was still in its infancy the design team first evangelized the new language to our product team. Together, we all watched the 2014 Google I/O keynote and the team learned what the new language was all about. This is the story of how we are slowly updating the Geocaching App to Material Design.

Strategy

It was difficult to convince our product team of the benefits to use our design resources and time to redesign our Android app in Material Design. Our team is small and scrappy and very engineering focused. As a design team we had to develop a strategy that would work for our team while also meeting our design deadlines and goals. We needed to figure out a way to wrap the Material Design project within our feature work.

Wireframes in Material Design

One of the first things we started doing was creating all our wireframes and visual design mockups in Material Design. We wanted to show the team the possibilities and benefits of the new language even though the developers were still coding in the Halo style. We also did a spike to research motion, animation, and transitions that we could potentially put in our app with examples of exactly where we could use them. We were trying to get our team excited about Material Design. Motion UI was not in the design team’s wheelhouse so we all took a two-day training with Issara Willenskomer, Founder of UX in Motion. With a new skill set under our belt, we are now able to prototype and convey our motion ideas to our development team.

After that we decided to comb through our app and choose elements we could easily redesign that would have the most impact. We decided redesigning the action bar would be a great place to start because it is seen on every screen and something the user is constantly interacting with. We have continually referred to the action bar redesign as our app wearing a new jacket. You might be wearing an ugly sweater, but if you have a nice jacket on over it, it won’t be as noticeable. From there our engineers suggested it would be really easy to switch our modals over to Material Design. After that one of the projects on our road map was to add some additional functionality to our navigation so we decided it would be a great time to update the nav drawer to Material Design as well.

Material Design (left) vs. Halo style (right) of the navigation drawer

The most impactful visual update within our app came when we had the opportunity to redesign one of the most visited screen in our app, the Cache Details screen. We thought this would be a great time to update some of the global design elements and redefine our typography hierarchy and color palette. We knew it wasn’t going to be perfect, but it was going to be the start of getting our entire app switched over to Material Design. We also used this screen as an opportunity to bring in some motion design. Slowly, but surely our app is making the switch to Material Design.

Motion design of the cache details screen

What’s Next?

Evangelizing for the switch to Material Design took nearly a year, but we’re happy to say our team is fully onboard and committed to the app refresh. At Google I/O 2015, Matias Duarte, VP of Design at Google closed out his Material Now talk with amazing work companies have done with Material Design and how the new language benefited them. For example, he mentioned Pocket Casts and how they saw a 30% increase in revenue. Taking these stories back to our team reinforced the idea that Geocaching should prioritize refreshing our app as well. In order to measure our success we pulled data from when we first launched our Android app and can’t wait to see the benefits of when we make the full switch to Material Design.

--

--

Geocaching Design
Geocaching Design

Geocaching is an anytime, anywhere real-world adventure.