Month: March 2014

CloudForge New User Experience Map

experience map

An example Experience Map done in the traditional group setting.

This is a visual map of an exercise that we did early on. The idea is to gather the over all user story into a narrative journey that highlights obvious pain points along the way. People doing user research can use this as a model while product managers/engineers use this when forming plans. I actually find this circular representation far easier to digest than the traditional linear model.

You can see from the map that we’ve assumed pain points in five areas. Those are the areas that we would then try to focus on coming up with solutions for as those are possible points of losing a customer forever.

Personally, I’m not a fan of always getting the whole team into a room to make decisions. In the real world it’s not always efficient to put work on hold for even an hour. However, this particular exercise is staggeringly important as it sets the tone for most of the user centered decisions you’ll be making for the life of the product. So for this exercise I’d pretty much insist that EVERYONE be there, not just the stakeholders.


If I had to pick one tool… wipe board.

Wipe Board

You’ll have to pry it from my cold dead hands! More than Photoshop, Sublime Text, or even Balsamiq (which I use A LOT) this wipe board is the most useful tool in the box. It never autocorrect embarrasses me, runs on it’s own power, and can be used anywhere.

I’ve also never really liked paper. I just don’t. Give me a full sized wipe board and a new set of multi-colored markers and I am home. Since I do a lot of work on wipe boards I’ve learned to use Apple’s My Photo Stream. Snap a pict of the board and it’s instantly on all your devices for review. Sometimes I even throw stuff into Pinterest from My Photo Stream. It’s faster than doing it from the Pinterest app while in a session. Try it. You may like it.

Biz cards that I don’t hand out?


Got my new b-cards! Went with a mini size because they are easy to hand to someone. I keep them in a cool little sliding door case that’s hooked to my bag. 👊💥!

The QR code contains my v-card so when you scan with a mobile device it just creates a contact with the info on the card. That way you don’t even have to keep the card. What?! Yep, I’m not trying to put more paper into the trash so why keep the card if you don’t need it? This gives the people that I connect with a choice that’s best for the way they live and work.

Adobe Edge Reflow

ReflowI’ll admit it. I’m a Bootstrap man. That’s how I learned how to work in grids and you can’t teach an old dog new tricks. Well… if they’re good tricks and Reflow is a really good trick!

Adobe Edge Reflow is a WYSIWYG editor especially focused on building static responsive layouts. I say “static” because it’s not too friendly in an enterprise production environment where you can be using erbs, js, or a myriad of other templating systems. This software will crank out basic HTML, CSS, and related fonts and images. That made it perfect for this landing page project I’m doing for The Jerry Garcia Amphitheater.

Edge ReflowScreenSnapz002

Reflow makes it super fast to work on mobile, tablet, and larger at the same time. I can switch between views with a click and see exactly what the layout is going to look like on a given platform. You know me, I like to code so WYSIWYG tools usually make me wince. This one actually cranks out pretty clean and compact code. I was pleasantly surprised.

The Font support is nice but fairly proprietary at the moment. You can use web fonts from Typekit, which Adobe owns, or another partner service. There’s no ability to simply install the fonts you already have locally into a project.

Adobe has not released an official version yet. The one I’m using is a preview release but it’s stable and… well… useful as hell! I’m not a fan of the AdobeCC monthly payment system but that’s the only way to get Edge Reflow at the moment. It’s definitely worth checking out with a Free Trial.

Coupa Widget Redesign


Fig. 1

“Coupa’s cloud procurement software application is a powerful procure-to-pay system that brings consumer e-commerce shopping ease and bottleneck-busting functionality to the procurement workflow.” – Coupa Web Site

Basically, the system lets you buy stuff in bulk for your business. Items like computers, staplers, etc are offered at a discount using an interface that’s more pleasant than most terminal looking systems installed in most traditional businesses. An added value of using Coupa is that you can easily have access to items that are not already inside your company “stock”. For instance, if I add a Lenovo laptop to my cart the system let’s me know that there are related items found on partner sites. These sites are not inside of the Coupa framework but they are affiliates. When you click on one of these items you are leaving the Coupa site with a token to associate the impending purchase. It’s a clever system but it has some issues.

The screen grab (Fig. 1) is an approximation of the initial screen I was shown by the product owner. It shows a widget with related items when you add something to your cart. It list the raw item name and the price. I was asked if I had any ideas to make it “less sucky”.


1. If the product owner had not explained what that section at the bottom of the page was I would not have known what that section was intended for or even made a connection between the action I had just completed. A clearly defined section name would allow me to determine relevance quickly.

2. I tend to lean toward establishing relationships with users through “conversation”. This is an established UX method geared toward building a rapport which keeps people comfortable while using the interface. Plain language helps users feel like they understand what’s going on.

3. The text list of items with the prices on the right did contain all of the pertinent information but how scalable and effective is it? Let’s show the user a picture of the item which increases the speed of cognitive recognition. People recognize shapes much faster than words. Putting the list into a carousel uses an established pattern (people see these all the time), allows for an infinite list of items in a finite space, and invites interaction which  increases the likelihood of clicking a listed item.

4. Any time you send someone away from your site it’s difficult to get them to return. Even if they do, it’s rarely in context of why they left. They usually return with a new context. It’s a good thing to let people get what they need but let’s make sure that they understand why we’re doing it and the benefit of the trip. I threw out the idea of comparing the price listed (show in red if higher, green if lower) in an effort to show the value of staying in Coupa. Not sure if that would really work given the situation but perhaps we could show the “savings” in this way. The point is to convey a value for the information listed.