Earlier last year, MapQuest partnered with Slice of Lime to help with a major new initiative, MapQuest Discover. The focus was to branch out from MapQuest’s core services (getting directions from A to B) and to provide more inspiration and serendipity around travel planning.
What followed was a 9 month project that brought us into the crowded world of travel-based applications and websites. The end-result is a content rich application that works both on desktop browsers and mobile devices. It launched at the end of last year and has already resulted in an upswing in user registrations for MapQuest. We couldn’t be happier with this first iteration of MapQuest Discover and look forward to seeing future enhancements to the product.
This article documents the process we brought the MapQuest team through this year.
We started the project with an “Inception.” This day-long meeting uncovered the goals, competitors, user types, main actions, and “stories” that would take place within the application. Using sticky pads, notecards, and whiteboards, we fleshed out the details. We then used candy to collectively vote on what actions were a priority and what areas of the application presented risks to success.
After this exercise we conducted several informal interviews with MapQuest’s target audience and began to flesh out ”personas”. Personas are a simple way of identifying common character traits, motivations, and goals of a web application’s users. We referred to these personas throughout the project as a touchstone for strategic decisions.
We also spent some extra time thinking about gamification and what role this would play in MapQuest Discover. To help think through the strategy, we created an infographic that represented the three goals we were aiming to achieve through gamification.
From here, we were able to start thinking through the structure of the application and the paths we wanted users to take through the application. We call this work “Information Architecture.” It’s a visual way of representing the key pages of the application and the way they relate to one another.
Information Architecture spills into “Wireframes.” These are black and white representations of the key pages of the application. They are meant to stir up conversation around the priority of elements on each page and how well the page is working towards the goals of the project.
At this point we had also started working side by side with MapQuest’s development team as well as another partner on the project, Pivotal Labs, a company specializing in Ruby on Rails development. Our process is fine tuned to work seamlessly with back-end development teams. We work in weekly “sprints”, attend “daily stand-ups”, and assist in “iteration planning meetings.” All of these things are very familiar to back-end developers which means that we simply feel like an extension of the team.
Even our wireframes are formatted in a way that’s useful to back-end developers. They use a “grid-system” and “Twitter Bootstrap” design elements. Developers can easily take this format and create working prototypes from them. This means our clients can start seeing code even before we’ve started our design process.
As we became comfortable with the wireframes, we began to introduce design concepts as well. Over the course of several iterations, we landed on a design that everyone was feeling pretty excited about and was well suited for MapQuest’s target audience. We opted for the masonry layout that has been popularized by sites like Pinterest as a way to encourage exploration and discovery of new content.
Early on, we decided that MapQuest Discover would be accessed from from both the desktop as well as from a mobile devices. To handle this, we worked with MapQuest and Pivotal Labs to code the application to be “responsive”. This coding technique allows for the layout, text size, and image size to change dynamically based on the device it’s being viewed within. Using the same code-base, the experience on an iPhone is optimized for that specific screen size.
With the release of the Minimal Viable Product or “MVP” of MapQuest Discover, we’re now anxious to get real user feedback and to validate what’s working and what’s not. This information will help steer future iterations on the product so that it continues to grow as a useful application for MapQuest’s end users.
That’s where you come in! Head on over to http://discover.mapquest.com to check out the app for yourself. We’d love to hear your feedback.
Thank you to the talented internal MapQuest team as well as the amazing Pivotal Labs “pivots” for their hard work on the project. We had a fantastic time collaborating with you on this project!