ef415-blog-blog

[ef415-blog-blog]

Fitting UX in an Agile World

Highlights include:

Overview + problem definition

My take on agile manifesto and UX design

What I've found works for fitting UX into agile

Presentation given 03/12/13.

[ef415-blog-blog]

(Nice re-design, tumblr)

[ef415-blog-blog]

Slides from my presentation entitled "What's UX?".  A good overview for Product, Business and Engineering teams (and, more).

Highlights include:

My definition of User Experience

Explanation of what UX Professionals do

Sample UX artifacts

Enjoy!

E

[ef415-blog-blog]

Lessons Learned from Bad User Experience at the Grocery Store

I make it a point to learn from things that are, well, "bad". In this article, it is my goal to move fairly quickly through the criticisms and get to what can be made better -- and how. The situation I'll examine is Safeway Supermarket. For the uninitiated, Safeway is a grocery store chain operating in North America. You may be asking yourself why a grocery store has turned up as the subject of a design blog. My answer is a simple one: principles of design exist everywhere, not just in software and web sites, but in the world at large including buildings/architecture, products, systems and logistics. The fundamentals of user experience are basically universal (therefore, test subjects and specimens abound).

figure A - Safeway storefront, Daly City, CA

OK, Safeway grocery. As a patron of the store, I am a "user" there. My experience begins roughly upon entering the property, in this case the parking lot (one could argue my experience began earlier had I received a coupon in the mail or some such thing. So, it is an interesting and blurry line). My "user session" has begun, and I'm noticing everything about Safeway. Incidentally, I will correlate what happens directly back to Safeway and its brand (yes, brand and psychology. We keep a scorecard in our subconscious to record the resulting information and emotions). I park my car and walk towards the storefront. I witness an older man nearly get hit by a woman who's driving while talking on her cell phone and dodge a speeding car myself (true story).

I enter the store. It's a bustling and crowded Sunday morning. I look at my grocery list: 3 items. Safeway arranges their stores in similar ways, and though I'm at a location I've never visited before, I quickly locate 2 of the 3 items on my list. I track down the 3rd and head to the front to settle up. There are two check-out options: regular and self-checkout. I choose self-checkout. Why would I do such a thing? Because the lines for regular are very long, and I see carts brimming with provisions while I have few items. However, it's not an easy choice given the following introductory experience...

Phase I - Introduction to the self-checkout area

Observed problems and questions:

Are the people here standing in line? or just shopping in the bins clustered around the self-checkout stations?

Where does the line start? 

Which stations are "open" or available?

Why these problems happened:

Problems 1-3 above were all caused primarily by poor visibility, signage and clutter. I couldn't tell if there was a line at first because there were no signs or designations, and the area was glutted with foot traffic and clutter. 

Possible "fixes":

Add signage above the self-serve check-outs

Replace small green/red open/closed lights on top of stations with more noticeable indicators (perhaps signs that spell out the word "Open" or "Closed" instead of the current color-only technique)

Stanchion off the area from the busy main aisle

Move bins of overstocked candy and DVD's elsewhere in the store

After a short stint in queue, it's my turn at the pay station. Here's what happens next...

Phase II - Operating the self-checkout kiosk

Observed problems and questions:

I scan my first item and my second... Suddenly, a speaker at my kiosk booms: "Unauthorized item in the bagging area!". I've gotten a loud warning that makes it sound like I'm shoplifting. I realize I've placed a bag onto the (weight-sensitive) receiving platform. My unauthorized item is a grocery bag! (I'm not stealing, I just want to transport my items efficiently). I try to remedy the problem by removing it, but the kiosk locks up and starts beeping. It needs "authorization" to continue the transaction. After a few minutes, a clerk arrives at my station. She produces a small key, inserts it into the machine, and turns. She then enters an 8-digit code, and the machine returns to normal operation (see figure B below).

I've scanned my items and want to pay. There are two screens at the station. One directly in front of me and one just to the right (above the bagging area). I began my sojourn interfacing with the former, then switched to the latter when the time came to swipe my credit card. Now that I've swiped, why is the first screen asking me, to select my payment type? I already have by swiping my card, right? The second screen seems more current and is asking me for my zip code (I think: OK, yes, this fits my past experiences when transacting). However, a distinct uneasiness lingers: is the system working properly? Will these two screens come back into parity? Do I need to backtrack or repeat steps? 

Why these problems happened:

Problem 1 stems from a break in the typical mental model humans expect while bagging groceries: scan item, place item at right and/or insert into bag. It took me quite a while to puzzle it out: at self-checkout, bags need to be weighed and paid for in advance for the system to function as expected. However, there are no clues around this, it breaks the normal mental model of bagging groceries. 

The above issue is exacerbated by poor feedback/status. While it's appropriate to know something has gone wrong, it need not be announced over a loud speaker. Error messages should also be specific and understandable, using clear language (Jakob Nielsen recommends using language at an 8th grade level1). 

Possible "fixes":

Aim for error prevention and craft specific, succinct error messages (for those errors that cannot be prevented)

Design a bagging system that compliments the current self-pay system. Bags need to be be set up in the bagging area in the earlier stages of self-pay so groceries can be placed directly into bags after scanning -OR- there needs to be a way to bag after scanning and placing (the conventional mental model). I.e., add (a fair amount) more space to the end of self-pay station so users can deploy bags freely while their haul has already been scanned and piled nearby (note: they will be "nearby" because the mental model is ingrained: scan the item and place it to the right. One could explore designs that operate or change that, as well. Though it's easier to leverage existing mental models than change them. It is sometimes well worth changing and innovating in this manner.).

Problem 2 was caused by lack of integration between the main kiosk's software and the Credit Card payment device's software.

Possible "fixes":

Display clear, synced messaging across screens and systems. If possible, remove duplicate hardware, keeping one screen and eliminating confusion  (Users shouldn't need to understand that a third-party created the credit card swiping device.)

figure B - A frantic clerk attempts to man four "self-checkout" stations. 

A Thought-provoking bottom line

I will conclude with some thoughts on how UX may relate to revenue. It's difficult to directly link weak User Experience to the bottom line. However, in the case of Safeway, correlation is certainly clear. Let's compare Safeway to competitor Whole Foods Market. Whole Foods Market is another grocery store chain where I am also a "user".

Briefly, my experience with Whole Foods is that I typically leave the store feeling good -- or even great. The store is "user-friendly" (I can find my way around and locate the items on my grocery list with ease). I often discover things at this store I either didn't know I wanted or didn't realize existed (net: expectations consistently exceeded).

I researched the financials of both companies and was surprised by how utterly right-on the results seemed to me. Whole Foods is thriving, and Safeway is withering. As a non-financial-analyst-person, it would not have surprised me had the results been inverted with Safeway somehow crushing the market with their hardcore, no-nonsense/no-fluff model. It's pretty hard to ignore that they are absolutely not.

I've created a chart of basic financials below. Whole Foods (WFM) and Safeway (SWY) recently closed on the stock exchange at $16 and $93, respectively. First and foremost, WFM has a 3-year EPS2 of 42.76% compared to SWF 0.00%, which means Safeway has literally flat-lined in terms of earnings growth over the past 3 years. Whole foods has a P/E ratio3 of 36.86 compared to Safeway's 8.61, which indicates analysts expect future growth of Whole Foods to be more than 4 times that of Safeway.

Like I said, it is hard to prove causation as there are often many factors at play. In this case, I believe the existence of "Good UX" within a thriving organization and "Bad UX" within a stagnating organization within that same industry is something to be carefully examined.

Thanks for reading,

EF

Footnotes:

1 Jakob Nielsen - Leading expert on web usability. http://www.useit.com/alertbox/20050314.html

2 Earnings per Share. Cash payout to investors per stock share (profit divided by outstanding shares). Considered a most key financial indicator.

3 Price per Earnings ratio. The higher the P/E the more growth is expected. P/E is a common metric used to compare companies within the same industry.

Sources:

Motley Fool Investment Community: http://caps.fool.com/Ticker/WFM.aspx, http://caps.fool.com/Ticker/SWY.aspx

Donald Norman, The Design of Everyday Things

[ef415-blog-blog]

If your ship doesn't come, swim out to it.

- author unknown

[ef415-blog-blog]

Something from "The Design of Everyday Things"

"Appropriate human-centered design requires that all the considerations be addressed from the very beginning, with each of the relevant design principles working together as a team...

There is no need to sacrifice beauty for for usability or, for that matter usability for beauty. No need to sacrifice cost or function, time to manufacture, or sales. It is possible to create things that are creative and usable, both pleasurable and completely workable. Art and beauty play essential roles on our lives. Good design will have it all - aesthetic pleasure, art, creativity - and at the same time be usable, workable and enjoyable."

- Donald Norman, from "The Design if Everyday Things"

[ef415-blog-blog]

Why a UX Process?

"A UX process helps build products people want and need. A UX process saves time and money.

...

The key is to show, rather than tell; persuade, rather than dictate. ...make video snippets of users struggling with that widget everyone on the team thought was so cool. Convince your developer that you can make her job easier and save her time by doing the conceptual design and sketching out some prototypes before she ever starts writing a line of code. Show your product manager that you can help him define his business requirements by talking to end users and finding out what their needs really are..."

- Amy Hillman, Boxes and Arrows | Read full article

[ef415-blog-blog]

Weird UI installment #2

I needed to park my Vespa and not get towed. As I approached this aging kiosk I thought: this is going to be bad. 

But, NO! The tiny, antique parking-tron was surprisingly decent. Meter paid! No Towing!

There was no fancy GUI; just a screen and few color-coded buttons. The UI qualified as weird for me because it actually worked in odd yet intuitive ways. I can appreciate a no frills approach. I was able to pay and understand where I was along the way. The process was only a couple screens/steps and leveraged clear & concise text for instruction, navigation and status. The screen let me know how much, how long and what color button to push (green check mark to complete; makes sense, huh).

Kind of threw me for a loop. Of course, there is room for improvement, but the basics are there. It's workable.

[ef415-blog-blog]

Fitting UX Process to Agile

Your team has created personas and segments. And (maybe) you've got a Market Requirements Document and/or Business Goals. So, what's next in product development? A general outline...

New Project Process

1. Gather requirements - Do this well before dev begins in order to get design traction

Hold Design Inception / Design Studio attended by stakeholders

It's working session where "requirements" are recorded as users stories. It's an internal user-centric focus group that answers the question: what does the user want/need? 

Identify lead leaders (UX, Dev, PM).

Artifacts: a framework of stories, epics, idealized workflows

2. First pass architecture - In an iterative development, some things are easier to change than others. Architecture can prove difficult to overhaul. Start with an early pass. Share with: Product and Dev. Architecture artifacts help convey vision to the dev team. And their feedback around technical capabilities and feasibility at this point is invaluable.

3. Build prototype -OR- track towards minimum viable product - defining and MVP is like defining a prototype in many ways.

4. User Testing Research - Do it during development

For concept testing: concept scenarios and test storyboards or paper

For usability: task-based scenarios and click-able prototypes.

5. Analyze UT results - decide what to fix and fix it (fixes will vary in size and may require design and dev stories or just the latter).

6. Design - fill in the framework from #1 above. Some areas will have already been designed during #2 and #3. Size remaining areas/tasks/stories and plan them across sprints (at the beginning of the sprint; just like dev stories).

7. Iterate, iterate, iterate.

Thanks for reading,

EF

[ef415-blog-blog]

What It Takes to Get "Simple, Clean Design" (Or It's a Long Way to the Top if You Wanna Rock n' Roll)

In the immortal words of ACDC: "It's a long way to the top if you wanna rock and roll...". And getting to great UX is no different. "Why", you might ask, "I mean, I really just want something 'simple'. I don't need complex design or information architecture".  The answer to this question, of course, is: It takes work to get to something "simple". (Of course, I'm not talking about changing the button from blue to green here, I'm talking about software features or building something from scratch). Getting to "simple and clean" takes getting all the complexity out there (the variations and the requirements), distilling it down, and then marching down an agreed-upon path of what to design. Yes. All these things.  "...I tell you folks, it's harder than it looks...".

One of the biggest pieces is really the thinking and planning around what to design. Especially at the beginning of a large project. This is why building design stories and a conceptual model are key. I agree with Austin Govella who said the "design" piece itself is straightforward, even somewhat easy. It's figuring out what to design -- in a user-centric way, i.e., why is this useful, usable and meaningful for the user --- that's the tricky part. The benefits for stakeholders include: knowing what will be designed prior to "delivery" and saving time/money (sometimes lots of it) by avoiding re-work. The list could go on.

For a new feature or project, basically anything with multiple states or way finding (a flow), UX can become just as complex (and time-consuming) as the engineering effort to implement it. The ideation, planning and thinking are the big effort. And one dark secret is if you don't plan (by plan I mean model/ideate/design) a given "UI" or interaction, your engineering team will have to do it at least on some level. They will either noodle on it for some time then come to you (possibly frustrated) asking for vision and/or implement something in a vacuum, the results ranging from decent to Frankensteinian. Either way, precious time is lost and product quality is likely to suffer. The good news is there are some fairly simple ways to avoid the above (Yes, we will get to solutions, always)...

What about the business side of things? Business and other stakeholders can take heart in knowing:

Creating well-designed software is just as tough for your competition

Simple communication and alignment of business goals and user goals will provide direction and empower teams to their jobs done. It can go a long way towards getting your software "shipped".

OK, so how do we get the job done? To get more into the nitty-gritty of the process, see recommended reading below, and check out my post of Fitting UX Process into Agile.

"If you think it's easy doin' one night stands, try playin' in a rock roll band... It's a long way to the top if you wanna rock and roll..."

Thanks for reading,

EF

And remember...

Recommended - Marty Cagan: Design vs. Implementation and Project Discovery Plan  Austin Govella: UX + Agile: 6 Strategies and Parallel Workstreams  Anders Ramsay: Agile UX vs. Lean UX

[ef415-blog-blog]

Weird UI installment #1

Elevator controls with two different buttons for the second floor. Quite mysterious.

[ef415-blog-blog]

The “Twitter Political Index,” launched Wednesday by Twitter, tracks enthusiasm levels for President Obama and his Republican rival Mitt Romney based on an average of 2 million tweets a week that mention the candidates.  Via USA Today

[ef415-blog-blog]

Compact, Collapsable Spork Pretty Badass

Stumbled upon in my lunch. The creators of this already compact yet further collapsable spork wanted to keep things sleek -- and they sure did. Great work, industrial-design-nerds!

[ef415-blog-blog]

...we know the old corporate identity elements of color, sound, logo, type still work to connect a brand. But more and more importantly the interactions themselves and the opportunity to connect and share with the brand-the literal functionality-becomes a key branded element. The interaction itself must feel right and repeatable and ownable...

Andrew Keller, CEO of Crispin Porter + Bogusky | full article

[ef415-blog-blog]

...Someone has to be accountable for the soul of the brand and the ideal of the brand. In too many companies there isn’t a person who is accountable for that. And I think a lot of the stories we tell over and over about the Apples and the Starbucks of the world are about that--they have a person in there who has continuity, who has understanding, who can trust their intuition and be courageous...

Jim Stengel, former Head of Marketing at P&G | full article

[ef415-blog-blog]

Group Brainstorm: How to Create Segments and Personas

Foreword: I used this approach in my product team at work. I wanted to draft segments and personas the team could use to guide User Experience in our app. And I wanted to get it done relatively quickly. I'd researched various methodologies for task-based segmentation and creating mental models. (See references below). In the end, my boss said, "You know, I think the people who have been working here know who these users are". I decided to test that theory: could I leverage our internal resources to get enough real-world data to create valid personas?

To test it out, I created the brainstorm session format below. I ran this in two sessions with groups of 4 and 8, respectively. I ended up with 5 personas, which I socialized and evangelized within our organization. These personas have become a part of the conversation both in our dev team and company-wide. So, it worked! Here's the format...

Overview: Today, we’ll participate in a group brainstorm. The exercise will help us develop segments and personas for our current users. Overall, we seek to accurately answer the question, “Who is our user?”. What are segments and personas? 1.) Segments are groupings of users. There are many methods for defining the groups, but today, we will focus mostly on “known” user roles and types. 2.) Personas are fictional characterizations (personifications) that are based on segment information. Why are they useful? Creating then socializing personas can be a powerful way to shift the team into a user-centric mental model. Personas help us consider multiple perspectives from multiple users (rather than thinking about just one user or their personal perspective as a non-user). Brainstorm I What are our current user roles or “types” of users? By type, I mean what are the main kinds of users you've actually heard about and/or talked to.

For example, think about a pizza shop.

A Pizza Shop has:

Shop Owner(s)

Family Who Comes in to Eat

The Guy Who Makes the Pizza

College Kids Who Come in to Eat

Pizza Delivery Driver

Couple Who Come in on a Date

Dining Room Server

Pick-Up Counter Customer

Pizza Re-Seller (Pick-Up Person)

Guy Who’s There Because He’s Got a Coupon

Pizza Supplier (Drop Off Person)

Regular Who Eats Here Every Week

Length: 10 minutes

Each person should have note cards and a sharpie

Write one name of a user type or role on a note card

Place completed note card in middle of table

Repeat 2-3

Session leader will begin arranging the cards on the board

Arrange the cards into groups

Length: 10 minutes

Look at the cards on the board

Arrange and group them so related cards are together and the cards of overlapping roles overlap

Agree upon and discard duplicates

Re-factor as needed

Name the groups

Length: 10 minutes

Look at the grouped cards on the board

Either chose a card from the group as a “working name” for that group or create a new name and put it on the board as the top of that group

(Session leader takes a photo)

Brainstorm II

The group names on the board are our (draft) segment names. We can always refactor, but these are where we’ll start brainstorming personas.

Length: 15 minutes each

Think of a real user you know or have heard about that fits into one of these segments (the groups we just created)

(Session leader polls group on which segment they wants to start with)

(Session leader draws persona anatomy on board)

For segment X, describe the following about the user, if known:

Age

Geographic location

Job function or title

Behavior: new vs. experienced

Payment/Billing Model

Annual amount spent (average would be $X)

Main tasks and workflows (in the app or leading up to it)

Goals of the user (inferred or stated)

Time permitting, repeat for segment Y, Z....

Thanks for participating, and thanks for reading,

EF

Recommended: Indi Young - Mental Models (great book on understanding mental models and creating task-based segments and personas) Alan Cooper - Origin of Personas from his book The Inmates are Running the Asylum SVPG - Persona examples

Download: My Persona Worksheet

[ef415-blog-blog]

...The way to make great UI is through tight iteration. You’ve gotta try things out. At least, I’ve never been smart enough to know an idea is going to work until I try it. So I, as quickly as I can, I get something going that is just the barest at first. I try to get to the essence of the idea as quickly as I can. But that sometimes takes a while so you just get a framework going and then you start iterating it, making it better and better...

Andy Hertzfeld | full article