For all the talk about new and upcoming trends in design for 2016, the real winners in ecommerce are paying attention to functionality and usability above anything else. Designing a site to ultimately help users find what they’re looking for, in the way they intuitively feel like it should be found, is what will convert users into customers.
What do I mean by functionality?
In ecommerce, shoppers are typically doing one of two things: browsing to see what a retailer has or searching for something they need in particular. The successful online shopping experience can handle both tasks seamlessly.
I think as designers we tend to focus on the browsing experience. Most of the design trends I see year after year focus on the appearance of product pages — large images, speedy page response, beautiful, flexible text, and of course responsive design. These are all important elements in ecommerce. However, I think some sites may overlook designing the search experience for users who are looking for a particular item.
Its not glamorous to think through this level of user experience. It requires a user story, user persona development, as well as wireframing how the user will actually find the item they are looking for. The design involves more than graphical elements and layout. It also requires thinking through use cases and how a user will flow through the site — screen by screen.
My user story
Let’s get a little more detailed into what I mean by a user story. I’ll use my own experience as an example.
Recently I was looking for workout pants. Not just any workout pants — I wanted running tights to wear for outside runs on a trail. But I also do gym workouts, so these pants had to be versatile. I had no idea what I needed. I only had an idea of what the product I was looking for needed to DO.
If I were designing an ecommerce website, this might be an example of the start of a user story that would help me design the experience for this customer. It also helps me define a persona for a site user:
Persona:
Cindy is a woman in her mid-to-late 30’s who likes to stay active despite her busy schedule. She does a variety of activities, but primarily she runs and works out in a gym. She has a limited budget to spend on workout clothes and wants pieces of clothing that are versatile and can last year after year.
From there we have to imagine how “Cindy” might use the website and how we can help her buy what she wants. She wants running tights, and we have running tights, among a lot of other products. How do we help her find them? How would she search on the site? She’s busy, so she likely doesn’t have a lot of time to browse. What search features should we include to help her find her way?
In this case, I’m a huge fan of giving users multiple ways to find what they are looking for, as long as the experience remains consistent. How about letting our user search by her size? Maybe by color? Or even better – by activity. I love the search by activity feature. This works really well across multiple types of retailers, especially stores that sell workout clothes. Some clothes are meant for runners; some are meant for yogis; some are more appropriate for other activities, and users need help sorting through that to find their items quickly.
Wireframes might even look like this in the first couple of iterations:
Wireframes should go through several iterations to get the flow right. Ideally, the designer is taking his or her wireframes to users for quick and dirty user testing. This doesn’t have to be formal. It can even be colleagues and friends. The point is to work through hiccoughs and bumps to smooth out the flow. For example, testers might point out a problem with searching through the above buttons. Users may feel more comfortable with search filters, instead. And those filters should not work one way on this page, and then not be available on a similar page. It’s disconcerting and confusing for the user.
So how do we take that feedback to guide the design and make sure we have the right flow for the user? This is where user stories come in.
A Very Simple Story:
If I’m visiting the site to find a particular piece of clothing for my activity, I should be able to search by activity from the home page. When I choose my activity, I can choose from a simple list of categories. When I choose the category, the products displayed will change to show just the products that meet my criteria. I can also filter the products by color and size, further narrowing down my list….
You can see that a user story can get pretty detailed. From there we have to think about how exactly the design will make this happen. What do the search filters look like? Where will they be located? Will it be a dropdown? Checkboxes? How will the functionality be affected when I search from my mobile device?
This is where you really need to understand your target audience. Again — this is where solid user research comes in. The more you understand how people want to use the site, the better you can design that experience for them. It’s not about how they WILL use the site as much as it is how they WANT to use the site. People are amazingly adaptable. It’s your job as a designer to figure out how to remove frustrations and design an experience that flows naturally.
A case study: Athleta vs. Lululemon
When I was searching for my running tights, I looked at two popular retailers: Lululemon and Athleta. I’m a Lululemon fan. I already have a number of pieces of Lululemon clothing that have lasted for years. Lululemon had an advantage over Athleta in my mind. I had heard good things about Athleta, but I had never tried the clothes, so I wasn’t sure.
In the end, Athleta won over Lululemon. The reason? The user experience on the website. Let me explain:
Lululemon and Athleta have a lot of similarities. The home pages have different colors and different emphasis on links and calls-to-action, but the structure is very similar.
Above the fold — the logo is centered at the top, with the main navigation surrounding it. There is a utility secondary navigation above the header, a hero/promotion banner that doubles as a link, and a call-to-action under it.
I started on Lululemon’s site to find my running tights.The information architecture for Lululemon is more challenging because it carries men’s clothing as well.
I had bought a pair of tights years before, but I couldn’t remember the product’s name. I started by using the mega menu from the main menu, and looking for “bottoms” under “Women.”
I missed the search by activities in the mega menu because it was all the way to the right.
I landed on a page with LOTS and LOTS of pants. There was search filter above the product display that let me sort by size or fit and price and popularity. But then there was another search in the left sidebar, which allowed you to browse by activity. So I tried the left sidebar navigation menu, which allows you to click on run and find bottoms. There were still a lot of results. And it was confusing to go back and forth between the left sidebar search and the search in the content.
I tried comparing four products that I was interested in, but I was disappointed. The comparison pop up only showed a picture and price. It didn’t list out side by side features like most comparison tools I’ve used while shopping for cars or electronics. It was frustrating.
The single product page was familiar. There are large images that show nearly every angle. When I was searching, I had trouble viewing close ups of the different fabrics available. This feature seems to be working now, but I was frustrated at the time.
I got all the way to the checkout when I decided to put my basket on hold and see if there was something better. My experience with the search filtering and sort features had left such a bad taste in my mouth that I wanted to see if there was anything else. After a Google search, I remembered that a friend of mine has been raving about Athleta.
Athleta doesn’t use a mega menu. Instead, because they are a women’s only store, their main menu is organized into the type of clothing. This makes it a little easier to get to the products. I clicked on “Bottoms,” and found a large product page with a faceted search on the left. I clicked on “Shop by Activity” and chose “Run.”
I like how Athleta keeps its search in the same place on these product grid pages. It feels familiar and makes it a lot easier to narrow down what I’m looking for. There’s no inconsistency between pages and I don’t have to figure out what I have to do.
The single product pages also worked well. The faceted search remained in the left sidebar. Images were not as large, but you can hover over the image to see a close up.
Is the design pretty standard? Yes. Could they have taken some risks or tried some new things? Of course, but chances are they have this design because they’ve tested it with users and have found it leads to more sales.
And speaking of sales, adding my products to my bag was seamless and easy.
Once I was to this point in the process, a checkout was almost assured. Athleta has the advantage of being a Gap, Inc. company, and since I’m already a Gap and Banana Republic customer, the site recognized who I was once I logged in and offered to let me use the credits I had built up while shopping from their other brands.
Boom. Conversion.
Get the user experience right
So the lesson here — at least in my case — is that the user flow matters. Let’s sum up:
- Small frustrations can make users second guess their commitment to your product.
When I experienced in consistency and frustration on one site, I felt less loyal to the brand. It made me second guess my loyalty. - It’s important to remove frustrations as much as possible and design for all user experiences.
Not all users will use your site in the same way. Some users are just browsing, while others are looking for a particular product. Think through the user stories. ALL of them and make sure you’re designing for them. - Consistency matters.
You should have a good reason for moving search patterns around on the page. Don’t confuse your users or make them think about how to use your site. In fact, don’t make users think at all. Guide them through your site in a natural way. - Deviating from common patterns can make a difference in sales, so it’s important to test, test, test.
You should test anyway, but definitely test how your design impacts or could impact sales. Don’t be afraid to iterate multiple times, gathering feedback in between each iteration. Testing doesn’t have to be fancy — friends and colleagues will do if you can’t talk to actual users early in the process.
Happy designing!
