Brainstorming process
I like to move quickly past the blank slate stage of a project. You get a sense of momentum which builds even more momentum and the energy is contagious. People feel like there’s value right at the beginning, and you get a shot at shaking the perception people have that IA or documentation is slow and cumbersome and not compatible with agile or a barrier to producing the end product. OK– here’s my thing about the argument about against documentation: it’s NOT ABOUT THE DOCUMENTATION! It’s about the process you go through, the questions you ask, the healthy debate you engage in. It forces you to think and plan. In my mind, committing something to a document is more a mental checklist, making sure you’ve dotted your i’s and all that. What sells me on continuing to do it is that I always catch something I hadn’t considered. I see pitfalls sooner, I know what we need to work out ahead of time so nothing sneaks up and surprises us mid-project. All that, plus it’s easy to share, and to refer back to later, and if I ever get hit by a bus…

Collaborative approach
So I said it’s not about the document, it’s about the process: if I had gone and whipped this up by myself and presented it to my team and said, “okay, go!” it would have a high risk of failure. They wouldn’t feel ownership or commitment, or a shared sense of momentum. What made it work, and what kept this document in the forefront of our subsequent conversations for the following months of the project, was that we did it together. Sappy, but true. In this particular case, our team included the designer, developer, strategist, and me. I would absolutely include a client in this process too, if the relationship were right. In this case, the project was our vision, we were bringing it to the client, so we did it without her. If it were her idea that we were executing, she should have been there. A strategic brief had been prepared and approved in advance, so we knew the big picture already. We started by reviewing and discussing the strategic brief, and when talk turned to potential feature sets, we grabbed the sticky notes and started brainstorming. When new ideas stopped getting scribbled down, we went through as a group, collected duplicates together, and discussed the meaning of everyone ideas.

Prioritization Process
We then collaboratively mapped the ideas on a chart, ranking by feasibility and importance. I can’t explain why it works, but the act of everyone physically positioning the sticky notes on the page is important, it invites participation. It’s not original, I’m just copying Adaptive Path and IDEO’s methods, but I’m sticking with it because it works. Once we had a rough first draft done, we segmented the chart into the categories: do first, do next, put off until later, and reconsider. Once we had the categories, we reviewed as a group, to answer some critical questions.

• Does the first release make sense?  Does it paint a complete picture of a compelling product?
• Is everything in the first release critical in an initial offering?
• Are there any dependencies that would bump lower priorities up?

How it lives on
We knew that our Do First segment is where we would focus our energy for design, but kept the Do Next phase in mind, so we could plan a development framework that would accommodate the localization, for instance. We recognized that things could change as we moved through the project, the important thing was to make sure that the changes matched the strategic vision and kept a tight story around the product being built. Things moved out of the Do First phase when we decided they weren’t truly critical. As the development environment changed with new software releases, things we planned to build became unnecessary, and dropped off our list. As each release is completed, the priorities are reevaluated, providing direction on where the team should be spending their time. This chart serves as a high level scope overview document to quickly communicate priorities, keep the team in sync, and as an effective reminder not to waste energy on lower priority future phases until those phases are near enough to begin planning. Nothing is left out, lost, or forgotten, everyone’s ideas are heard and accounted for, and there’s a plan in place to evaluate next steps after the top priorities are completed.

Process
Early on in this project, there was a feature set planned, and user scenarios defined separately, but I felt like they needed to be connected. I went through the exercise of mapping the planned features against the scenarios to make sure we didn’t have any orphans: no features that weren’t needed in any of our scenarios, and no scenarios that were left hanging because of missing important features. Once mapped, it was easy to spot patterns in the data that could signal a problem, and once there were no orphans, I felt confident we had a nice tight feature set.

What it was really good for
My main reason for doing this was for evaluating new ideas that came up, after the initial feature set had been defined. Within a creative team, I knew to expect a lot of brainstorming, a lot of “what if we did this? wouldn’t it be cool if…?” kind of questions. This tool served as a compass for me, establishing a baseline and then making sure that we stayed true to the needs of the users, so we didn’t end up building in a new feature that played into a scenario we didn’t fully support.

The inspiration
One of the models they showed, that really stuck with me, was the value curve, which I’ve taken to calling a value map, which makes more sense to me. In their example, they showed how Flickr, when it entered the market, was positioned against their competition. While there were established models for photography services, Flickr didn’t try to be the best at everything, and chose not to be competitive at all in photo editing or printing. What they did well was identify that nobody else was doing sharing well, and they were going to dominate in the area of photo sharing. In that way, they were able to win over loyal fans with photo sharing, and then slowly add in printing and editing capabilities once they had a somewhat captive audience that already loved their service. Had they tried to do all things at once, they probably would have delivered a watered down product that would have been playing catch-up to the competition.

In practice
I’ve started doing this exercise with projects when I see the warning signs of a lack of clear message about the benefit of a product. Either the clear benefit hasn’t been articulated, or it hasn’t been defined yet, and needs to be. For example, I was asked to sketch up some wireframes for software that would compete with iTunes. That’s a big undertaking, and it’s a bit too early to get started on wireframes with that directive. If a new effort is trying to steal market share from an existing market leader, the first question that needs to be answered is, “What will this do that iTunes doesn’t do?” and then “What makes people want that thing?” Once those questions are clearly answered, the path forward on designing becomes much more obvious.

A note on the format
Site maps are documents that I try to keep simple and clear, but don’t necessarily invest a lot of time in formatting, because of their limited lifespan. In this case, I color coded the boxes with a legend to indicate different interactions, and numbered the site pages/controls so that I could add copy related to each section, as an alternative to wireframing, in preparation for a content planning session with the client. I love wireframes, they make sense to me, but there are arguments against them, and they’re not right for every situation. In the case of Nike 6.0 the arguments against beat the arguments for. The clients are visual thinkers who respond to design comps, and wireframes tend to alarm them, as they see them as literal, and I get the exact opposite result of what a wireframe is intended to do. They worry that the design hasn’t been considered, and we spend our time talking about the missing design rather than focusing on the content. I think it’s best to understand the way your audience processes information, and adjust your methods accordingly. There’s no reason a wireframe has to be used, it’s a tool, but if it’s not the right tool for the job, use something else. I learned to stay away from utilitarian wireframes with Nike 6.0, and instead used this site map with copy describing page contents, so we could focus early discussions on content rather than presentation.

Note: the new site this is for is currently under development, and is not what you see on the site today. The new site is scheduled to launch June 25, 2009.

I think this is a self explanatory workflow document. I try to make these as simple and calm as possible, keeping the focus on content, and using any ink on the page to efficiently communicate the meaning. I’m not a good designer by any stretch, but I don’t find it necessary or a good use of limited project budgets to spend time on highly stylized documents that are used for a short period of time, used to facilitate accomplishing the end goal. The more temporary a document is, the less polished it should be. If there is a presentation or pitch that requires more graphic design skills than I have, I partner with designers to get something that looks fancier, but more often than not, we’re trying to move quickly at this stage. In collaborative meetings with clients or project teams, I usually work out a site map on sticky notes, which feels less permanent and invites more participation, and then I’ll capture the results electronically, as we get on more solid footing with a plan and expect fewer changes. What’s funny is that, even if I have a site map prepared on paper, a lot of times the client doesn’t connect with the document, and is having trouble orienting, I’ll break out the sticky notes and start laying them out physically on the conference table. They can point to things, move things around, make notes, ask questions, and it seems to make them feel more comfortable with the whole process.

Nike

Nike has the farthest reach of all the benchmarked shopping experiences. The brand plays a major role outside of product purchasing, venturing into entertainment and training. Beyond that, Nike participates in and facilitates community engagements that promote the active Nike lifestyle. Further Nike extensions include streaming workout playlists, instructional workout programs on an iPhone application, desktop widgets, social media integration of customizable tools, music videos, musician interviews, and news. Their digital experience allows exploration of the brand/product though a traditional product focus, or through the lens of athletes or friends. A third strategy involves people in activities engaging with the Nike community.

The NikeWomen’s newsletter, for example, has several calls to action within one communication. Training tools, product stories, blog content, and a facebook link are only part of the appeal. Info about their music player, specific products, the new collection, as well as programs to take part in, and athlete inspiration provide further opportunities for involvement.

Nike is a leader in making the most of its digital presence, and can be part of the life of the consumer wherever they go. Interestingly, while Nike is adventurous and a leader in digital presence, they sometimes fall short in quality and experience. We run into errors and dead ends when trying out their more experimental tools, and some of the user experience is confusing. Other benchmarked sites had simpler navigation, and did a better job providing a richer interaction (e.g. product views and rollovers without mouse clicks). Overall though, even without flawless execution, the experience is comprehensive and compelling in its coverage.

Lessons
Nike’s content is engaging and varied. It tells a story of a lifestyle that extends past the shopping experience, and lets people engage in different ways and explore at different levels. They reach out to multiple personas, allowing deeper experiences for more technically connected customers, or simple product placement for basic shoppers. Their brand content shines despite some imperfections in implementation.

Free People

Free People injected the most personality and human touches in their online presence. While not as feature rich as Nike, they successfully exist in multiple touch points within the customers’ lives. They have a blog filled with design and culture content that feels well matched to the brand, along with insights into company culture in an authentic way. They also have a You Tube channel, with interviews, instructional videos on knitting, make up lessons, and a recurring program called ‘Dog Talk.’

Lessons
Free People doesn’t have the most robust set of tools, but they excel at using content, photography, and copy on the site to convey a brand personality. They support and augment that brand with fun external content that speaks to and connects with their customers, who come across more like fans than consumers. Their site doesn’t disappoint in functionality, but their strength is not in features, it is the content which draws you in.

Anthropologie

Anthropologie provides a pleasant but common shopping experience that embodies the brand well. In addition to product grid navigation, customers can shop by outfits, and through the print catalog. There isn’t a focus on editorial or lifestyle content, but the Anthropologie lifestyle is communicated effectively through design and photography.

Anthropologie dabbles in some external tools, although it doesn’t feel like they have a foothold yet. They have created a desktop widget, which displays a product and a button to buy the product, but the execution isn’t very engaging.

Lessons
Anthropologie’s execution of the shopping site feels premium and inline with the personality of the brand. This isn’t accomplished through any standout technical implementation; tactical e-commerce execution is comparable to any major online retailer. While there is experimentation with external tools, what little there is feels unfinished and takes away from a premium message.

Gap

Gap and their other properties were evaluated collectively. Soon athleta will join in the integrated experience, combining shopping at Gap, Banana Republic, Old Navy, and Piperlime in separate tabbed shopping experiences, but with unified checkout and shipping. There are engaging views of product outside of the product grid, giving each of the separate shops distinct personalities, and making the experience feel more human and relatable.

Gap does not currently extend their reach into editorial content, external tools, or community outreach. The exception is a Behind the Music feature with musician stories and free sample tracks in the Banana Republic site. This is currently their most meaningful foray into lifestyle.
Gap doesn’t make any mistakes in their execution. They make it easy to shop and simple to understand. They use copy and imagery effectively, providing is painless buyer experience.

Lessons
Gap provides a basic, solid e-commerce experience. Their strength is in a straightforward product viewing experience, good photography and layout, with exceptional usability in getting zoomed and alternative product views. Shopping is focused, easy and enjoyable.

Note: J. Crew had a similar experience and has not been profiled separately.

Neiman Marcus

Neiman Marcus had a somewhat comparable feature set to the other benchmark sites. It lags behind the rest in terms of its effective use of the digital platform. This makes it feel less premium, despite being the one luxury example in the bunch. There is some good video and blog content, but it isn’t prominently featured, and the overall experience is slanted toward a quick purchase funnel. Product photography is cold, and transitions into content seem sudden, dropping users into lists and product grids without the cushion of engaging content. Neiman Marcus was the only benchmarked site that breaks continuity with the shopping process: when an item is added to the cart, users are navigated away from the page to a shopping cart page.

Lessons
A site with all expected features isn’t able to fully recover from a lack of effective integration of engaging content. While fashion shows and videos are available, they are segregated from the browsing experience. They don’t connect the feeling of shopping with the stylized, high fashion perspective of the editorial content.

Why
One of the easiest and highest payoff things I do to save money on a design project is user test it before investing time and money on polished designs or development. Completely separate from QA, from functionality testing, user tests should help drive a design that makes sense to a stranger who has some distance from the project. Even the simplest user test will give you surprising and valuable feedback that you can react to before you’ve spent any money on development.

The great thing about using actual test data is that it saves you, your team, your client, from having debates around educated guesses. Teams full of sincere people with good intentions can sink a lot of time into controversy over the right answer, and there’s an easier, more effective way. The good news is, we don’t have to guess, we don’t have to be in the minds of our users (and as hard as we try, we never truly can be), and we don’t have to bet the project budget on our ability to predict the response. Test paper, test click-throughs, A/B test alternatives you actually build out. Think about the Tropicana redesign debacle. When you’re taking a risk, make it a calculated one, match it to your risk tolerance (test in a limited market?), measure the results, and make informed decisions.

How
It depends on where you are with a project. It can come in at any stage. Sketches of new screen ideas, or an existing completed site that’s under review. Whatever stage you’re at, don’t set up barriers that prevent you from just doing it. I sometimes set a paper prototype in front of someone and ask things like:

What are you looking at right now? What is this telling you?
What can you do? What’s clickable? What’s a field?
What would happen if you clicked that?
What if you wanted to go back?
What else might you want to know right now for this to be useful?
If you wanted to x, how would you try to do that?
What would this be worth to you? You’d be pissed if you paid money for this? Great! Why?

Yes, you can go deeper. You can be more targeted. You can professionally recruit people to test on, and those people can be representative of your audience and in the best headspace to evaluate your work. Those are all good things. But if you’re not able to do all that, don’t let it stop you from taking a simpler approach, and let the process snowball into more and better testing once people get a taste and want more.

What if there’s no money?
For some reason, people tend to worry that they don’t have the budget to test. At the risk of sounding like an infomercial, you can’t afford NOT to test. I’m shameless about it. I’ve been known to bribe friends with a round of beers to look at a paper prototype and give me some feedback. It helps me because I’m armed with better information, but the downside to testing on the sly is that clients don’t get to be part of the process, and therefore they don’t value it. I like clients to at least observe one real user test–more if they haven’t had an Aha moment with it yet–with someone they respect, so they internalize the benefit. It’s not just some abstract thing that has nothing to do with them and their goals.

A lot depends on a relationship starting out right. I would make sure to be clear about your intent to test things at the beginning of a project, and remove obstacles. If they’re worried it takes too long and is too expensive, focus on getting them to experience quick cheap user testing early on, so they learn to love it and come to rely on it. If they value their metrics, connect your test plans to the metrics they care about testing. Design qualitative tests around quantitative metrics that have them concerned. One thing will lead to another, and everyone will have learned something valuable. *steps off soapbox*