User experience, or UX, is an important term for anyone who has a website.
It considers the user’s journey while on a site and how to make this as easy and intuitive as possible.
User experience includes buttons, layout, menus, and many other parts of design. We, however, are going to focus on how a site’s design can improve UX.
Luckily, the Shopify platform already includes specific design conventions which make it appealing to users. It is easy enough for merchants to make certain design changes themselves to improve user experience.
Making customers’ experience enjoyable and straightforward will improve conversion rates and minimize abandoned carts.
ShopCreatify’s design expert, Barbara van Wyk, recommends planning what you hope to achieve on your Shopify store before making any changes.
“Study your customers’ behavior using site mapping and Google analytics. Know why you’re making functional and cosmetic adjustments before doing them,” she says.
This means planning your funnel. Know what route you want your customers to take from when they arrive on your landing page, to the moment they buy a product. Keep the unnecessary steps a customer must take to make a purchase to a minimum.
Doing this also helps to create a hierarchy within your design. If you know what journey you want your customers to take, you will know which design aspects to make more prominent on certain pages.
Some of the easiest design changes to make to your Shopify store are making your calls to action stand out.
“Sometimes when you land on the homepage of a Shopify store, it’s beautiful, but it doesn’t direct you to the appropriate call to action. This means you can easily lose a user,” says van Wyk.You will want to figure out how your customers are likely to behave on product and collection pages. Where does heat mapping show they are clicking or spending time? Map out that journey before making design or other changes on these pages.
Good quality photos and detailed product descriptions are always useful to customers. Break large bodies of text into smaller, easier to read chunks. Less important information can be displayed lower down on a page.
If your store sells shoes, figure out how you’ll present product options, like shoe sizes, colors, and types of laces to make sure a customer buys the pair that’s most suited to them. Perhaps you’d like to include a pop-up message asking customers to double-check they’ve chosen the correct size before heading to checkout.
When planning the look of your product and collection pages, decide what information you’d like to display above the fold in both desktop and mobile versions. This is the information a user can see before having to scroll downwards.
While you’ve got users on your site, you may want to encourage them to convert a little higher. Consider installing apps which show recommended products on product pages, so you can cross-sell or upsell products.
If you’re not sure how effective certain design elements on your site are, then it’s easy enough to run some tests.
Install Hotjar or Crazy Egg software to provide heatmaps or record customers’ movements on your store. This way you can see where they hesitate, or at what point they drop off. It will give you a good indication of what aspects need to be improved or clarified.
If you can’t decide which of two product pages or landing pages are more effective, you could run A/B tests. This means installing an app which will display one version of your landing (or product) page to some customers and another version to others. For example, one version of your landing page may include a hard sell such as “only five in stock, get yours now in time for Christmas/Easter/Thanksgiving”. The other version may be more subtle.
For product pages, you could present two different versions of the same product to different customers to see which converts better over a few weeks. You can use this method to see whether product videos are effective or not, or at what point customers should make choices specific to the product they’re buying.
Use Google Analytics to help you determine which version is more effective in funneling customers to the right place or ensuring conversions.
Van Wyk recommends that merchants who do their own site design use a design tool, such as Canva.
Canva provides suggestions on color palettes and fonts. It has templates which are the correct size for certain applications. This makes it quick and easy for merchants to create something attractive and professional-looking, on a tight budget.
These tools also make it easy, for example, to convert a desktop banner to one that’s suitable for mobile. You will also have access to stock image libraries.
Once again, while you’re busy designing for your website, keep asking yourself what it is that the user wants to see and how they will react to certain design features on the site.
It’s vital that customers feel safe on your site. Van Wyk says customers who feel transactions are secure are much more likely to complete their purchase and return to your site later.
On a functional level, this means making sure that your site runs smoothly. Users will question your site’s safety if it experiences glitches and may not want to enter their personal or payment details as a result.
The Baymard Institute found that 17% of abandoned carts in 2020 were due to customers not trusting a site, while 13% were because a website had errors or crashed.
One way to create a sense of safety on a Shopify store is to have clear messaging and trust seals. Display a security seal indicating your site is safe to use. You can also include messages like “quality guarantee” or “safe shipping”.
Make sure shipping information, returns policies, and product availability is readily available. If customers struggle to find this information, they may become irritated at or suspicious of your site.
You can also make use of “social proof”. Enable reviews on your store, so customers can be reassured by other customers’ ratings of your store and products. Reliable reviews apps include review.io, judge.me, or even Google seller ratings.
Nearly 50% of ecommerce sales in the US in 2020 were made on mobile devices and this is expected to continue increasing. It’s a good idea to optimize your store for both desktop and mobile.
Remember: what works well on a desktop site, may not translate well on mobile. For example, a hover menu is often a great option on a desktop site but wouldn’t work at all on mobile. You will have to change the way your menu displays on mobile.
You will also want to enable the zoom function on product pictures for mobile, so that customers can double-tap or pinch the image to enlarge it.
Van Wyk suggests starting off by choosing a good Shopify theme:
Try to minimize the number of steps a customer needs to take to perform an action on the mobile site.
Once your store is up and running, see how it looks on various mobile devices – even if this means asking your family and staff to use the store, or borrowing different devices for a while.
Remember you’ll have to upload different banners and photos for your desktop and mobile versions so they load properly on the respective stores.
Shopify’s backend is relatively user-friendly for merchants who want to make cosmetic adjustments to their mobile stores:
Remember to consider what information you want visible above the fold on your mobile store. And consider fat finger syndrome - make sure buttons and product photos are easy to click on small screens.
When designing your site, think about how to make sure a new customer becomes a repeat customer.
This could include offering them the option to:
Make sure that their repeat experiences on your site will be as pleasurable as their initial buying experience was. This means making sure the page where they manage their account or subscription purchases is also well displayed and functions correctly.
A few simple, well thought out design changes to your site can vastly improve user experience and result in more conversions for you.
Contact us if you’d like to chat about a customized design for your Shopify store.
Masthead photo by Joanna Kosinska.
