Telling Stories

One of the biggest strengths we carry at Slice of Lime is our ability to be ‘in’ our projects. We find the best way to produce solid, relevant, high-quality work is to know our clients inside-and-out. Our company is built on creating amazing experiences, and we believe the best way to create amazing experiences for our clients is to understand who they are, who they aren’t, and who they want to be. We believe in this so much, that we go to great lengths to make sure it happens. We spend extra time visiting our clients in person, touring their offices/facilities/factories/quarries, meeting their teams, and getting out of our designer-selves to see, first-hand, the problems we are trying to solve. We use their products, research their competition, get involved in their conversations, and listen to their customers and fans.

Once we begin crafting a User Experience Strategy and putting our thoughts together, it’s important for us to consider the challenge in articulating solutions back to the client. Some of the client teams we work with are dedicated to the project (which is great!), but others are also focused on handling the day-to-day intricacies of running a company. While our teams may be 100% dedicated to a project, our clients may not be, and that’s ok. Here’s how we make sure we stay in sync while building amazing experiences:

We tell stories.

Part of what we do early in the process is to learn about and expose ourselves to the stories that exist within the project. Is the shopping cart abandonment rate high because of a technical issue, or are customers just not confident in the order process? Are new customers really overwhelmed by the complexity of your application, or are they simply having trouble knowing who you are? Questions like these produce narratives that can be pieced together to form a clear picture of the problems at hand. With enough research and digging, the stories really start writing themselves.

IMG_4702

The journey map.

Something we use at Slice of Lime to help us build and refine these stories is a Customer Journey Map (or “User Journey Map”). This is the framework we use to craft the overall story. It describes the main characters (user-types), the various landscapes (tasks involved) and the challenges the main characters face along the way (what’s working and what’s not). What’s great about this approach is that it provides us with a holistic narrative that allows us to spot inconsistencies.

To bring the story to life, we use tools like InvisionApp or Solidify to help us “narrate” while allowing us (and our clients and users) to click-through user-flows in real-time. Since all of our wireframes and UI designs are part of a larger story, it’s easy to build and test a working user-flow that is analogous to the final, working product. This approach also has the added benefit of allowing us to gather feedback on the spot, limiting the time needed for revisions and approvals.

If you haven’t taken a story-based approach to UX, we suggest you try it. Don’t be afraid to start small. Let your research and creativity narrate the solutions you are presenting and don’t be afraid to tweak the story a bit to make it more effective. Storytelling has been a natural way of communicating ideas for thousands of years. We hope it becomes a natural part of your UX strategy as well.

Nike+ Accelerator and Lean UX in a Day

A few weeks ago, Slice of Lime was invited to speak at the TechStars-powered Nike+ Accelerator in Portland, Oregon. The accelerator’s purpose is “to allow companies to leverage the Nike+ platform, and NikeFuel, to build offerings that inspire and assist people to live more active, healthy lifestyles.”

We held office hours with the teams and gave a presentation on “Lean UX”, stressing that user experience can be done quickly and effectively without investing a lot of time and money. In fact, it could be done for free within one day’s time.

In the Nike+ Accelerator, ten startups receive $20,000 to build an application over a three-month period. With a tight schedule, and a relatively small budget, each startup needs to iterate quickly and be willing to pivot when necessary (which is often). For many startups this is easier said than done. It’s hard to get through a large queue of ideas quickly while also allowing for customer feedback.

At Slice of Lime we don’t start a project without knowing how we will be getting feedback and validation on our work. We use a variety of tools to get feedback from our client’s users. We typically start by sharing our own internal sketches, move to high-fidelity wireframes, and eventually show designs and functioning code.

As an early-stage or pre-funded startup, working with a UX Design agency may not be in the budget. And that’s OK! It’s still possible to integrate a smart user experience into your workflow.

To demonstrate this, we came up with our own Nike+ Accelerator startup, and used it as a case-study.

Enter “Gut Check,” a conceptual iOS app based on the Nike+ API. The idea is simple: after checking in to one of Portland’s many great breweries (Foursquare, Facebook), Gut Check prompts the user to enter how many beers they’ve consumed, then calculates an activity that will burn off those extra (delicious) calories. Once the activity is complete, some clever calculations are done, letting the user know if they have kept off the beer gut.

How long did it take us to develop a basic idea like this, sketch out a few prototypes, AND get user feedback? Five hours. That’s right. Less than a day’s worth of work.

The only bit of technology we used is POP App (free on the Apple App store). A couple pieces of paper and some pens and we were on our way! Here’s how it works:

  1. Sketch out the idea on paper.
  2. Snap a photo of the paper using the POP App.
  3. Add some tappable areas and link them to other “pages.”
  4. Grab someone to test on.
  5. Push play!

It’s pretty simple, and was actually quite fun. The best part about this approach to an idea is the ability to rapidly iterate and adjust based on feedback. A tester doesn’t like one of the navigation labels? Change it, and test again.

Here’s some video of one of our test sessions below.

A few things to keep in mind:

  1. Get feedback, and get it early.
  2. Don’t worry about making the sketches perfect. They are going to change.
  3. Have fun!

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!

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!