Meet Kristina Volchek, a UX/UI Designer specializing in Shopify & Webflow. Today Kristina joins us to share the most important aspects of a great online shopping experience in 2020:
Online Shopping has by now become a part of everyday life for millions of people and it only keeps growing. We can expect 19% growth in eCommerce sales this year alone.
However, online shopping hasn’t even existed for that long (only 20 years or so). This creates huge challenges for designers. We are exploring a brand new frontier.
Every company has a unique business model. The products they sell, the size of their inventory, country, and shipping options all have an impact on the design requirements.
Designers working in eCommerce develop a certain skill-set that is unique. They must also understand marketing and development to a greater degree.
Let’s dig into what makes a great eCommerce designer.
1. Data analysis & balance
As a designer with a marketing background, I have to mention the importance of data gathering & analysis. Many designers choose a pretty UI over functionality and user behavior. And for eCommerce, this is a fatal mistake.
In online shopping, the customer is king. You need to understand how your customer thinks, scrolls, reads, reacts or browses. You need to make it as easy as possible for your target customers to buy your products.
If you are redesigning an existing store, you’re in luck because you already have a wealth of information and existing customers that you can learn from. You have data from Google Analytics, which can help you with creating a buyer persona, understanding store audience, traffic sources, customer behavior, successful products, pain points, and conversion rates.
You can also use other tools to run session recording, heatmaps, sales analysis, create customer interviews/polls (if possible) and do competitor analysis. With session recording, you can actually look over the buyer’s shoulder and watch their journeys.
Pro Tip: It’s easy to get lost in the amount of unstructured data. You need to find a balance between data and common sense.
But what if you’re designing a brand new store or you don’t have any data?
In that case, you need to do some good competitor analysis. The simplest way to do this is to Google similar products to find competitors and get to know their sites well. Go through the site as a customer would, search for products, filter products, add to cart, check out their social media, etc. You will see what kind of challenges they faced and how they decided to solve them.
Look at both small and large brands. Many of the larger brands have the money and resources for thorough UX testing. Many of the smaller brands know their customer very well.
‘‘Good artists copy; great artists steal.’’ — Picasso
2. Consider the need for speed
Yes, you’ve heard this many times. But for eCommerce (especially for growing mobile eCommerce), this is critical.
Google’s mobile page speed study shows how the bounce rate rapidly grows when the website loads more than 3 seconds. And it affects sales — a 1-second delay in load time will cost you a 7% loss in conversions .
The design decisions you make are the basis for a quick loading speed. Developers can only do so much to reduce it. A fancy video background? 5 videos on a product page? This beautiful 3MB PNG image? There’s no way a developer can fix that. So keep this in mind when you design.
Pro Tip: Compress all your JPG images — e.g. using Squoosh. Use SVG for icons & illustrations, instead of PNG.
3. Mobile e-commerce (mCommerce)
By 2021, mCommerce sales are expected to reach 54% of total eCommerce sales . Moreover, Google has been prioritizing mobile-friendly websites since 2018.
But mobile commerce is more than just eCommerce on a mobile screen. It is an evolution that involves not only your store, but also mobile payments, mobile banking, location-based services, augmented reality (like the Sephora Product Try-On app , mobile AI, chatbots, and more.
The major advantage of mCommerce is a better omnichannel experience for customers. And it’s accessible everywhere for everyone — not everyone has a computer.
So, what can you do to be ready for mCommerce as a designer?
- Page speed optimization (yes, again)
- Mobile Navigation (e.g. bottom mobile menu, easy to access cart)
- Big accessible buttons (for our fat and short fingers)
- One-page checkouts and digital wallets (e.g. Amazon Pay, Apple Pay, PayPal One Touch) can seriously improve your mobile conversions.
4. Understanding the Customer Journey
There are 5 main types of eCommerce shoppers . Understanding their differences can help you deliver a better experience for all of them:
- Product focused: They know exactly what they want and they want it quickly. It’s important to provide them with a great search experience, access to previously purchased items, smart filters (to help find products faster) and a fast checkout that has all the information pre-filled.
- Browsers: These are the more relaxed buyers — they browse different online stores, looking for trends, future purchases, inspiration or are just killing time. Top selling products, popular products, suggested products, new products, or the ability to share products are the most crucial features to convert them into buyers.
- Researchers: They are in the early funnel stage, they collect information about products & prices, reading product and brand reviews. To turn them into buyers you have to win their trust, provide social proof, have a detailed product description & high-res zoom-on-hover images, easy-to-edit shopping carts, and a good wishlist.
- Bargain hunters: They hunt for the best deal possible. What’s important for them is to find prices quickly and with no hidden costs. And they want to see how much they save on sales, coupons or special offers. Show them the numbers, quickly.
- One-time shoppers: They can play any of the roles above but we need to remember that they have a one-time need. What is critical for this type? They hate long registrations. Your journey should give them clear navigation, product description, company information (like shipping and FAQ), and most importantly— checkout without registration.
5. Simplicity
You don’t need to reinvent the wheel. If something works well, don’t add unnecessary elements or decorations. eCommerce is not the right place for showing off your graphic design skills.
‘‘Good design involves as little design as possible.’’ — Dieter Rams
I use a simple rule to avoid useless elements. Just answer this quick question in 5–10 words: ‘‘How will it help get more sales?’’.
Pro Tip: Checking out bigger and more successful competitors can be a great way of seeing what’s necessary and what isn’t. They have more data, traffic, experience, and resources to analyze, so they most likely take data-driven decisions.
6. Appreciate your customer’s time
You know that feeling when you can’t find shipping options? Or the button leads you to an unexpected page? Or you had no idea how many steps the registration would take? Do you remember how frustrated, lost or even angry you were?
We have so little time in this world, our day is planned down to the minute. Customers deserve to know how much time the process of purchasing the product will take, how much it will cost, or what shipping options they have.
It’s critical to appreciate your customer’s time when you are designing their experience. Here are some ways to do that:
- Use progress indicators (for checkout, registration)
- Use clear & relevant Call To Actions (CTAs)
- Make sure the website architecture & links are clear e.g. example.com/category/product
- Design intuitive navigation, especially on mobile
- Make buying process information (like Shipping, Returns, FAQ) easy to find
- Highlight the product availability (it’s so sad to finally realize the product you chose is out of stock)
- Filters are essential for stores with 100+ products (e.g. I want to buy a red dress, don’t make me scroll 5 pages of black dresses)
- Good photography (even the best design looks bad with low-quality images) and zoom (I want to see it really close-up)
- Gamification (a great example — Chilly’s Bottles Personalizer . I lost 10 minutes, just applying different bottle designs).
7. Test, analyze, and test again
What have I learned so far from my marketing & design experience? There are no absolute rules. Yes, you can follow all the possible best practices, but your audience is unique, and requires a unique experience. What can you do? Test and analyze!
Low fidelity testing is the quickest way to solve problems and find the right solutions for your audience. Start with prototypes and discuss them with the store owners, your colleagues, friends, and trusted customers (if possible). The most important thing here is to separate good feedback from personal tastes.
Pro Tip: For small stores with unique products, store owners know their audience pretty well. And they can be a good advocate for their customers. So, it’s important to listen to their opinion and business goals.
If you are working on improving an existing store, you need to understand how to choose the right key performance indicators (KPIs) to track & analyze your changes. The essentials are:
- Sales Growth: Total sales and sales per channel during different seasons, months, years.
- Conversion rates: Mainly visitors to sales, abandoned carts, conversion rate by marketing channel.
- Customer acquisition cost (CAC): How much does it cost to attract one customer, and CAC by marketing channel.
- Bounce Rate: The percentage of visitors who enter the site and then leave without viewing other pages.
- Average order value
Changes in these KPIs are great indicators for a quick customer experience health-check.
For example, after adding a popup to the website we see the bounce rate has grown. After a small investigation (e.g. checking session recordings), we understand that it’s impossible to close it on mobile. After redesigning the mobile popup, the bounce rate improves. No polls or interviews needed, just KPIs.
The testing process can be iterative and involve really small changes (like font size, button color, content order). After each change, you should check the main KPIs & behavior changes. This approach of quick hypothesis testing is known as Growth Hacking .
Always remember that the customer journey is not finished even when the sale is complete. After that, there are still many steps to turn your buyers into brand advocates. Don’t forget to send a great order summary with shipping details, update your customer on status changes, and bring them back to buy more.
Keep your eyes on the prize
Designing for eCommerce is an exciting field to be in. Making things beautiful is nice, but how do you really know if you are a good designer? Can you measure the value of your work?
In eCommerce, you can. The results of your design skills are reflected in the earnings of the store. This is what makes it so exciting, and I can honestly say, I love eCommerce design.
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
Kristina Volchek is a UX Designer with a digital marketing background specializing in eCommerce. She is also Co-Founder at Alioned Agency. Keep up with Kristina and follow her work on Dribbble.
Related Articles:
- How to design your online shop like a pro
- 5 common web design mistakes beginners should avoid
- How this graphic designer turned her online shop into a full‑time job
Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
