By Christine Pillsbury
In the analog space, a store’s “homepage” is the equivalent to the big, fancy mall entrances enticing shoppers to come in for a visit. Artfully displaying the season’s latest styles, most beautiful wares and of course sales and special offers. In the online space, there are many more entrances to your store – the side doors. The fact is your site’s homepage is likely not a shopper’s initial entry point. And even when it is, it’s definitely not their final destination.
If all of this is sounding a bit like overstating the obvious – good. But, then why is it that 90% of design processes, schedules, scopes, and client expectations are geared toward designing the homepage in the first round of design? Basically, it’s a relic of the web 1.0 era. It worked very well when we designed sites from the top down, but it doesn’t work anymore.
We have to stop thinking about where things live in a logical hierarchy and start studying how and why people got to where they are. Online shopping is more organic now than it has ever been. A products’ seeds are spread all over the web on Google, Facebook, YouTube, Twitter, Banners, Reddit, 3rd Party review sites and more. And customers, happy or not, are planting those seeds more than the brands themselves.
As designers, we have to arm ourselves with a more holistic view of shopper needs and behaviors. This means redefining the entire process, not just the design process – it has to be incorporated into everything from discovery to development. Some UX shops are already ahead of the curve. Other agencies, with a legacy in marketing, still need to adjust.
With that in mind, I’m sharing a work-in-progress design approach that I’ve had success with. And for the record, I am not saying that it’s the end-all-be-all, just something I’ve seen produces measurable results. It’s based on a simple notion that is well accepted, yet still not widely adopted in the agency world: Don’t start designing the IA and UI, rather begin by walking in the shoes of the people coming to your site, take on their POV and reconstruct their experiences from the outside in – like a detective.
So… How Do You Find And Make The Most Of All Those Side Doors?
Start Informed
This article isn’t about taking a deep dive into the research needed to start any major conversion-oriented redesign. But I do think it’s worth providing a reminder of the insights needed before you start problem-solving against your own assumptions and intelligent guesses. Again, the name of the game is user empathy.
Whatever your process, it should be informed by:
- Competitive and Comparative Analysis
- Site Analytics, but be careful these don’t lead to band-aids and don’t limit completely rethinking solutions
- Business and Functional Requirements
- Media Plans
- Stakeholder Interviews, including Customer Care
- And most importantly, insights directly from Real Prospects and Customers like interviews, quantitative and qualitative surveys.
All this upfront discovery work will result in the artifacts you need to begin, for example, Personas, Content Audits, Functional Specifications, KPI’s… and ultimately, an actionable Creative Brief.
Next, Map Your Site’s Ecosystem
Shoppers don’t live in a vacuum, and neither does your site. In fact, by the time a person gets to your .com they’re pretty darn close to making a buy decision one way or another. Chances are high they’ve Google’d your service, done their comparisons on 3rd party sites, watched an unboxing on YouTube, talked to a friend about you or even checked out the product at a retail location.
So, your first step to designing any online shopping experience is to identify all the roads that lead to it. These maps can be as high-level or as detailed as you deem needed, like weighting them with quant/qual data.
Below is a simple example of mapping the offsite and onsite traffic to a product detail page.
Now, Design The UX Before The UI
At this point, you should have everything you need to create the high-level flows that will inform your UI concepts. They’re called User Journeys, or Task Models*. In the simplest terms, a User Journey is the collection of content and activities that a user experiences on their way to accomplishing a goal. There are all different approaches to creating these artifacts, but the whole point is to create a model of a real user’s state of mind and key interactions from consideration to post purchase – identifying pain points and opportunities along the way (if you’re not that familiar with what a user journey is check out this great article.
I start by focusing on a single core task, like Buy A New Phone and draw it out on a whiteboard. On the right side, I’ll jot down the ultimate action like Add To Cart, then on the left side, the points of origin like a Google Search, a Banner Ad or a Friend’s Social Post.
Your creative brief should include a list of key emotional questions a user must answer before they feel confident enough to pull the trigger. As you design your flows, these are the user-mindsets you need to satisfy along the way.
For example, if the store is for a No-Contract Mobile client, the research might tell you prospects are asking:
- Do I really need all these features?
- Is this the best price?
- How’s the coverage?
- Is this a popular, “in” phone?
- What’s if I don’t end up liking it?
Now on the left, pick a point of origin and start constructing the convincing storyyou need to tell the consumer to make the sale. Jotting down the likely user questions (mindsets) and providing answers (in the form of content and tools) that connect the dots along the way. I use the word story loosely; of course what you’re creating is a non-linear interactive experience chuck full of great ideas for content and functionality.
Below is an example customer journey and concept board (Note: I’ve redacted out actual concept descriptions and client names).
Basically, you’ll go through this exercise as many times as needed and start to realize there’s a lot of overlap in user needs at specific junctures. The site’s architecture and page designs will start to emerge, as tasks will naturally start to group. But before you start sketching the UI, pull back and come up for some perspective. This isn’t just simply a mapping process; it’s a conceptual one. Brainstorm features, curate your thinking, remove non-essentials, and try to flatten the experience – simplify whatever you can. Why? Because you want to design and streamline the paths to purchase, not just provide every possible combination for each of your site’s primary functions; sell, support, etc. The ultimate goal is to make each journey feel like a believable, natural, story – but the ideal story, of a real person who starts out knowing very little about your client’s offering and has now confidently made a purchase. A story created based on research, focused on user empathy and molded by your instincts and ideas.
By the time you get to this point you’ll have half designed the site in your head. In some ways this is exactly the point; a more informed, concerted way to figuring out what needs to be on any given page – and more importantly, what doesn’t. You’ll have a clear understanding of where all the side doors are and how to nudge shoppers to a conversion on their own terms. And finally, as you begin to design the UI you can be solely focused on designing the optimal relationships between page elements versus figuring out what’s suppose to be there.
Happy sketching!
Author:
Christine is a CD/UXD at Beam Interactive Marketing & Experience Design in Boston, MA. www.beamland.com. There, she currently leads multiple creative teams on a variety of digital engagements for Yahoo!, Virgin Mobile USA, Boost Mobile USA, Fidelity and SaltMoney.org.
Previously, she led creative teams at Mullen, Ogilvy and US Interactive. Over the past 16 years she has won dozens of industry awards such as the One Show, Hatch and London Internationals for numerous fortune 500 brands.
Christine holds an MFA in Design and Technology from the Dynamic Media Institute at MassArt. Her published thesis “Interactive Narrative: An Alternative Approach” has become part of the MFA program’s foundational curriculum. She has guest lectured on information architecture and interactive design at Boston University, MassArt and The New England Institute of Art.
