MapQuest Discover

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.

UX Strategy

Inception

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.

Personas

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.

Gamification Strategy

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.

Information Architecture

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.

Wireframes

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.

UI Design

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.

Front-end Coding

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.

User Validation

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!

Slice of Lime on Conan O’Brien

At Slice of Lime we like to “create amazing experiences.” That’s applied to the work we produce as well as the way we want our clients to feel about working with us.

Of course, it also means that we try to create amazing experiences for ourselves…which brings us to our recent trip to Hollywood to rub elbows with Coco himself, otherwise known as Conan O’Brien.

One of our favorite clients, BrightLeaf, is run by Conan’s brother, Luke O’Brien. Luke was incredibly generous in not only getting Slice of Lime into the show, but also getting us access to the “Green Room” where the cast and special guests hang out and have their dressing rooms. Here’s a pic of us hanging out in the green room, not exactly sure what to do with ourselves. While we didn’t get to see special guest star Kelly Cuoco (from The Big Bang Theory), we did get to see Andy Richter in his underwear, so we’ve got that going for us…which is nice.

The show was a blast. We’re all true fans and consider ourselves a part of “Team Coco.” It was amazing getting to see what happens behind the scenes and to walk backstage and see props from previous shows that we loved. We also got to walk the Warner Brothers Studios lot and check out other studios where both classic movies and new movies were shot.

Before leaving California, we managed to squeeze in a late night that ended in mechanical bull-riding…

…and to go on all the rides at Universal Studios (where we posed with Dora the Explorer for our kids):

Thank you again to the kind people at Conan O’Brien for allowing us to check one more thing off our bucket lists. We had a fantastic experience!

Sketching for Understanding

Even though our sketching styles differ and our proficiencies at drawing vary, our goals are always the same. At Slice of Lime, sketching is an integral exercise in our UX and UI design process. And its goal is to help us quickly communicate our ideas and understand our thoughts on everything from business model canvases, mind maps, personas, user flows, site maps, wireframes and visual designs. Heck, one of our more nervous employees has even sketched a Zombie escape plan from their house. Sketching allows us to quickly iterate and test our ideas before we make UX and UI design decisions and take them into high-fidelity wireframes and design.

As part of the Denver and Boulder UX and UI design community, Slice of Lime will be hosting the Nathan Curtis webinar, Sketching for Understanding, on Thursday January 17th from 11:30am-1:30pm at Galvanize. This webinar will explore sketching as a form of communicating early in the creative process. Slice of Lime will be providing lunch from the Denver Pizza Company. After, join us for a pizza induced sketching session about… sketching.

You may RSVP for free here. We look forward to seeing you at Galvanize!

 

The UX of selling a house

Selling a house is not an easy task, and neither is User Experience Design. What’s interesting though, is how similar these two activities are. No, really!

In September of this year, I was hired as Sr. UX Designer for Slice of Lime. I love it here, and Boulder is an awesome place to be! Living here though, meant relocating my family from San Antonio, TX and doing so quickly… like in a matter of three and a half weeks! We had already been considering a move so we had a good idea of what needed to be done to get our house ready to sell. What we didn’t expect though, is the amount of work that we hadn’t thought about.

Take Inventory

The first task after deciding to move was getting organized. We made collections of things to sell, donate, pack and throw away, becoming quite surprised by amount of stuff we could easily part with. Some items were seldom used, others were duplicates, and some were just trash. Once things were sorted, it was much easier to see just what we had left to deal with. It was absolutely necessary to take this inventory before picking up the moving truck, otherwise we could have ended up with too much (or too little) room! To me, this felt a lot like the initial scoping and content audit that usually happens during the first stages of an interactive project. It’s all about knowing exactly what type of content there is and how much there is to deal with.

We also looked at things we could do to make the house more appealing to buyers. We prioritized the projects we had already decided to tackle and then looked for anything else we would be able to address over the next few weeks. Now that we had the lay of the land, it was time to get to work.

Don’t sweat the small stuff

We knew there were glaring issues like some wall cracks that needed to be patched up (pretty common in South Texas), but I started to become distracted by the things that had bugged me for a long time; a cobweb up in a tall corner of the ceiling, a chip in the paint, a sticking door. These issues were truly pretty trivial compared to the wall cracks, the missing baseboards, and the yard work that needed to be finished up, but I would still get hung up on them. Why? Well I think it has a lot to do with being too familiar with a system, and I find this to be true for UX projects as well. Clients usually have their own perspectives on what’s ‘broken’ because they are intimately familiar with their product. In reality though, those same issues may be pretty minor. Trying to address every issue within a set budget means compromising (ignoring) other areas that need the most attention. Often times, these details will disappear within the scope of a larger redesign.

The bottom-line? If it’s functional then fix it. Otherwise just come back to it and don’t let it get in the way of progress. Customers will gladly articulate what needs to be fixed during user research sessions.

Sweat the small stuff

“Wait, but you said…” Yeah, I know. Don’t sweat the small stuff. Instead, worry about small details that will delight or add to the big picture. Assuming the glaring, functional items have been addressed, there are little details that can leave a substantial positive impression. For me, this meant planting some colorful flowers in the front, doing a quick mulching around the plants in the back, and leaving our (beloved) Nest Thermostat installed on the wall. These are things that didn’t take a whole lot of time, but have resulted in a lot of great feedback. The right touch of personality in copy, greeting a user by name, hinting at hidden functionality and using well-crafted graphical elements are examples of small details that can go beyond the average experience to make a difference.

First impressions go a long way and injecting personality and taste is a nice touch. Just make sure the larger issues have been addressed.

Listen

It’s a bit strange letting people come into my home. We had a few showings in the midst of the packing process, and I must say it’s a little uncomfortable discovering that buyers had gone through our cupboards and drawers. That’s what people will do though, if given the opportunity. The same is true for UX projects; it’s easy to think people will just fall in love with a product homepage and immediately start sending in the checks, but that’s just not the case. People are nosy by nature, and they will venture into the nooks and crannies of a product, discovering all there is to see. Should that be a cause for discomfort? Not at all! If customers are going to provide feedback, it’s best to have an efficient and structured way to hear what they have to say. Prepare for opened drawers and cupboards!

Before the move we conducted a little usability study of our own; inviting our friends over for drinks and free food in exchange for packing help and mock-walkthroughs. Throughout the afternoon, our friends walked through the house while in the buyers shoes, taking note of things that stood out to them. It was great feedback and by the time everyone was done, we had a house we could take to the market confidently. This confidence is exactly what the UX process seeks to provide. It does so by allowing users to explore without feeling like they have to invest much of anything. This candid feedback may be hard to swallow, but it’s exactly the type of feedback that helps craft a great product.

Let go

There’s a point where I had to start thinking of my house not as ‘mine’ but as someone else’s. It’s wasn’t easy – especially after investing so much of my own blood, sweat and tears, but was required. It’s difficult to craft a UX strategy and help develop amazing products without considering the end user. I’ve seen this in startups especially where the ideas are fresh and creative, but there is a dissonance between the company goals and those of the end-users. Include them in the process, and do so EARLY!

Having a deep understanding of our clients, their business and their customers is the main philosophy we preach at Slice of Lime. We apply UX strategy to all that we do because it would be short-sighted to assume we have all the right answers. Even though we may love and use the products that our customers have created, we bring our own biases and tastes to the table with us. So how do we get around this? We schedule mock “house showings” with real-life customers who may or may not be familiar with the product. We let them open the drawers and cupboards in a controlled environment where their feedback is logged and can be synthesized. We let them take the reins and tell us what they think and feel.

Letting customers provide their thoughts may be uncomfortable, but to make a great product their feedback must be considered throughout the UX process. It’s a better use of time and money to fix what they feel is broken, than to obsess over sticky doors and cobwebs. The customer isn’t ALWAYS right, but if they are using the product, talk to them first.

Earning the Product Designer Badge

While some may think of “gamification” and “badges” as a passing fad, we can’t forget that one organization has successfully been using badges for over 100 years:

The Girl Scouts of America

We recently had the pleasure of hosting Girl Scout Troop 3919 to help them earn their “Product Designer” Junior Badge. As their website describes it, “When you’ve earned this badge, you’ll know how to think like a product designer: observe what makes a great product, be an innovation detective, figure out what’s working and what’s not, innovate to find solutions, mess up so you can try again.”

To help them earn their badge (see a picture of the badge, below), we described our process in creating a website and web app for GeoPalz. GeoPalz is the first fitness tracker that lets you “Walk to Win.” The more steps you take, the more points you get. You trade points in for all types of prizes, from Frisbees and jump ropes to baseball bats and footballs.

The folks at GeoPalz were kind enough the donate a bunch of product for the girls to take home and play with. To our surprise, the troop spent the following week analyzing their GeoPalz and provided us with some great feedback (see one example,below):

While not seeking to do a user validation exercise, Slice of Lime wound up learning quite a bit about the likes and dislikes of the Girl Scouts. We’ve since shared that feedback with GeoPalz to help steer the next generation of their product!

Our favorite piece of feedback was “It doesn’t come in horses.”

The troop was wonderful – very engaged and articulate. We’re happy we could be a part of them earning their “Product Designer” badges and thank the troop for their time with us.

Troop 3919 is welcome back to Slice of Lime anytime!