Let’s start. Zara has always tried and succeeded in bringing the latest fashion trends to the mass market. And sometimes the more high fashion you go, the more experimental and reckless your designs get. In my opinion though, when it comes to technology and especially eCommerce user experience, you have to respect traditional UX practices in order to keep your conversion rates optimal. I’m sure Zara is doing good, however, I’m also pretty confident they might win a lot more in terms of CRO (conversion rate optimization) if they had their eCommerce websites much more client-oriented.

So let’s start!

Home page

You can notice a blurry banner on the homepage. And there are some other concerns I have about the banner, besides its quality (which can be a bug, CDN issue, or something else):

• The banner is very contrast to the ocean of white around it.
• Why is this banner sized this way? It is neither matching the size of content container, nor the size of the viewport.

And then the SALE caption below looks like a heading and I expect to see some items from this collection below, but when I scroll down… Nothing. Just “Join our newsletter” block that’s aligned left and looks like it’s positioned out of the content container (the expectation about container width was based on the blocks above).

Fonts and Accessibility mode

And under the Newsletter subscription block, we see the links to some legal pages and links to Zara’s social media accounts. The text of the links is extremely small (9px to be precise). It’s like Zara wanted to hide this info. I can totally understand the reasons you would hide your return policy (however I’m an advocate for an explicit and client-friendly return process), but social media accounts should always be seen clearly and be easily accessible, in my opinion. Zara is actually using tiny fonts everywhere. I know their target audience is young and fresh, but even the youngest of us may have vision problems and tired eyes.

And then I notice a small Accessibility Mode icon in the bottom right. But unfortunately, this feature is messing things up even more. Let’s say I want to change the background of the page. Voila! I don’t see the banner now:

And I couldn’t find the option to increase the font. Only text magnification tool, but you have to manually use it for each element. So, I reset the Accessibility settings and move on. Or back to the top.

Zara logo is also aligned left and that gives me the understanding that the actual container starts here and it matches everything below the banner. Does a client care about the container width and positioning? No, but he sees that something is not right here. It’s like the CSS file was not loaded to apply the styles to the website, or the client has a bad internet connection. Somehow this way it feels for me.

Navigation

Zara’s home page is a free workout for your eyes, I should say. First you see the huge bold Zara logo on the top, then your focus slides down to the SALE heading, then you notice the banner (only now, yes, because it’s small and doesn’t give you any meaningful information:

It’s always great to use some nice stock graphics. But I think it should always deliver a message or serve as a CTA (call to action). Remember, you don’t have a lot of touchpoints with your eCommerce client and you cannot afford to publish meaningless content. Use all of your chances for eye-catching!

Unfortunately, the homepage of Zara’s website looks like it was designed only to fill the emptiness and meet the deadlines.

So we continue our eye exercises and start looking for a way to leave this page and finally start shopping. Mobile-first, right? So I’ll include the screenshot of the mobile version:

The menu icon is pushed to the top, left to the big logo, so it doesn’t capture your attention. I would suggest it should be middle-aligned vertically. But we see “Man” and “Kids” arrows on the east and west sides of our lovely banner. My first thought was it’s just to duplicate the navigation for the base categories. So I click “Kids” and realize these buttons are actually the slider navigation controls. What do I do next? I still want to scroll down for content, but I find out I have to click the banner itself to open the menu with the pre-selected “Kids” parent category. That one is good!

I personally do not like the black-on-yellow, but it’s a matter of taste. According to this research, black on yellow works well for people with dyslexia, however, the general recommendation by the British Dyslexia Association is black-on-creme, which I think would do even better for Zara.

The navigation for the Kids section is clear and well structured by gender and age. I select Boy | 6-14 Years because I have one at home. Then I’m offered the selection of clothing types. Let’s try t-shirts.

Product listing

The product listing is fine, however, I don’t see the need for the sliding control which changes the size of product blocks and allows you to see more items on the screen. 1 or 2 items in a row for mobile devices would perfectly do. Additionally, it has margins on top and bottom, so it takes much vertical space, that can be better used for promotion blocks, for instance. Generally, I would make the header more compact.

Filters are implemented very well. I always recommend using the right-side navigation (sliding sidebar) for filtering options on mobile devices. It’s very intuitive. Good job here.

Zara has used a very counter-intuitive navigation approach when you open a product and try to see additional images. Most of the websites use horizontal scrolling or a small gallery close to the main image. But when you do what you are used to, you see the next product in the category. To see additional images you have to scroll vertically. Seems easy, yes, but it’s another irritating thing that was reported to me by some of my friends buying at Zara. And this matters, since I don’t believe all other merchants would follow this practice.

Another annoying thing is that you have to swipe up to see the description of the product. Maybe it’s me, but I tried scrolling down, tapping the title. And I even thought that Zara products do not have descriptions at all, but then I managed to open it. Accidentially.

Overall, the product presentation is not engaging. You have to be a big fan of Zara to go through all of the challenges and learn more about the product, like it and eventually buy it. Every unnecessary second or click on your website increase the bounce rate dramatically, the same way slow page loading does. You have to fight for it and stop messing around here.

The desktop version of the product category listing either lacks structuring or Zara is using some innovative approach again.

The whole product grid looks like a Tetris-game. You can see big blocks, small blocks, full width grid, content container width grid, some gaps. And again: tiny font everywhere. When you open the product page, you see some bits of information and and a small black Add to cart button.

Purchase

Let’s buy this T-Shirt! I click “Add to cart” button and I am pleasantly surprised. Instead of showing a small red error saying “Please select product option” you might have seen on other websites, Zara asks me to select the t-shirt size in a much more user-friendly way:

In the cart section I haven’t found any option to estimate the shipping costs or add the promo code. Zara might not have promo codes, but it’s another omission, in my opinion. And you don’t see any explicit information about the shipping on the pages. Zara is not using one-page checkout, so you only see the shipping options and costs after spending time filling the checkout form. Good for Zara, if they use your info for retargeting or abandoned cart recovery, but bad in terms of customer experience. When I proceed to checkout, I had a bug on my Iphone 12, however I could not reproduce it in emulator:

Alright, I continue as a guest and I start filling my delivery info. The website requests my location, when I start entering Address, but it has no use, since I cannot change the region anyway (My location is Latvia, but it still shows the UK). The postcode field is case-sensitive and gives me an error when I try to enter my postcode as LU1 5ex so I have to switch to caps and spend my time re-entering it. Seriously, capitalization can be done on Zara’s side and improve my buying journey. After giving Zara my delivery info, I finally see the shipping options.

UX concerns:

• The left padding is bigger than right one
• You always want to zoom out to reposition the checkout
• The sticky “Continue” button should always be visible, not only when you scroll down. Current setup produces an strange behavior of the button. It appears and disappears.

Returns

As mentioned before, there’s no explicit return policy declaration and you can only find it by going to Menu -> Info -> Help -> Returns and Exchanges. And you find out that the return link can be found in the transactional emails they send to you. Now open your inbox and go through another challenge Zara has prepared for you.

Final words

While Zara has some really good solutions here and there (product filters, “Match with” recommendations, size/option select on “Add-to-cart”), this is still the most impractical eCommerce website I have ever seen. I mean big brands, of course.

I’m pretty sure Zara has paid a lot for this website. And I’m sure Zara is still doing well not because of, but despite their website. Conversion rate optimization is critical for eCommerce business and it translates to revenue directly, and you can clearly see, there are a lot of ways to improve it for Zara.

Get in touch today and we’ll review your shop:

The post eCommerce website review: Zara appeared first on icg # tec.

Luckily, Shopify provides REST API and SDKs that allow you to build the app or integration on top of their core eCommerce ecosystem.

If you are reading this post, chances are you asked yourself if your business needs a custom Shopify app.

Basically, Shopify apps are created when you need to utilize Shopify REST API for your business needs.

The apps can be:

• Private (unlisted) Shopify app
• Public Shopify app

Private Shopify Apps

Private apps are normally developed to be used by a single merchant. Consider it a custom Shopify integration. The common use case is Integration of your Shopify store with 3rd-party services like:

• Shipping & Logistics (carriers and your local warehouses)
• Accounting (custom solutions, since most of the established accounting software has its own public Shopify app)
• CRM (Customer Relation Management)
• ERP (Enterprise Resource Planning software)
• Discounts and promos (when you have special needs and apps available on the Shopify marketplace are not the best fit)
• Product configurations and customizations that are not possible with default Shopify setup
• Deeper Data Analytics
• any other idea that can be implemented using existing Shopify REST APIs

Public Shopify Apps

Public apps are developed for global use and are available on the Shopify Apps Marketplace. The apps can be free, paid, and subscription-based.

The most demanded and top-grossing Public Shopify Apps at the moment are those that help merchants with CRO (Conversion Rate Optimisation). And there’s a simple reason behind that. CRO directly impacts the revenues and your client is always happy to share the profits you help him to get.

CRO-focused apps are: Shopify abandoned cart recovery apps, upsell apps, discount layering apps.

The hardest challenges are faced by the apps that offer features that do not increase revenues directly or in an obvious way. One of the lessons we learned developing an app for Shopify shipping rate management (our debut public app on Shopify Marketplace) is that it is very hard to sell this kind of app using the subscription model because it doesn’t optimize conversion rates. The best thing you can do with shipping to increase your conversions is to set it completely free. And you don’t need an app for that, right?

Both service providers/platforms and eCommerce merchants can benefit from creating their own Shopify app.

Now if you are a SaaS company or a platform you can create your own Shopify app that would:

• Simplify the integration with your service
• Ease the life and operations of your clients
• Bring in new clients searching for similar apps on Shopify Marketplace
• Promote your services via the app (Banners, Push notifications)

Use cases for own Shopify app

Affiliate network

So let’s take an affiliate network as an example. Typically, when the merchant setups the affiliate campaign with some of the popular networks, like CJ (Commission Junction), Pepperjam, Daisycon, Adcell, Rakuten, and others, he needs to integrate some pixels, conversion scripts, or extra data layers for GTM. You might create a comprehensive guide on how to add those scripts to Shopify pages, Cart, Checkout, and Order Confirmation Page. But considering it’s not always the case of copying and pasting code, combined with the fact, that Shopify owners rarely have sufficient tech knowledge, it may lead to incorrect setup with the neverending debugging process. And that eventually leads to slow onboarding, which means your network and your client miss the potential profits.

That situation can be easily resolved by creating your own Shopify app that will do the configuration for your client in the background.

Another Shopify app use case for affiliate marketing platforms is the validation of transactions. What if the affiliate order was refunded and the affiliate network does not have an integration with Shopify? We’ve seen a lot of Shopify merchants manually declining and approving the transactions on their affiliate networks. Believe me, it takes time.

Again, this can be sorted out by developing and publishing your own Shopify app.

Fulfillment center / Warehouse / Shipping company

Now let’s say, you are a fulfillment warehouse and you know that a significant chunk of your clients use Shopify. As a fulfillment company, your “tech-communication” with the merchant involves:

• Shopify shipping rate management
• Order export from Shopify store to your warehouse
• Order tracking information import from your warehouse to client’s Shopify store
• Stock update

In my experience, I’ve dealt with warehouses using FTP to exchange all this data. But that implies some costs for their clients since they have to develop custom Shopify apps or scripts that use Shopify REST API to receive and process the order data before creating some CSV or XLS files to upload to the warehouse FTP server. Depending on the merchant’s IT team size and skills that may take time, delay the integration, or the store launch in worst scenarios. And bugs of course.

Accounting software

Bookkeeping… Argh. Even the best accounting software fails to deliver stable solutions for Shopify stores. Intuit Quickbooks still doesn’t have its own Shopify app, for instance. You have to use some third-party services like OneSaas, A2X, or Bold. And these services normally integrate with many other platforms. As the result, the solution is not flexible, not particular accounting software focused, and sometimes you have bugs that cannot be resolved by the aggregator-app team because of their load and the number of integrations they have.

The key functions of the integration would be:

• Correct tax rate mapping between your accounting software and Shopify
• Order/Invoice/Transaction export from Shopify to accounting software
• Order/Payment status syncronisation
• Product / Stock sync
• Customer export from Shopify to accounting app

Things to consider before developing Shopify app

There are 5 questions to be answered to clearly understand if you need a Shopify app for your business:

1. Does a big part of our clients use Shopify as an eCommerce platform?
2. Do our clients have some challenges that could be worked around if we created a Shopify App?
3. Are there obvious ways custom Shopify app can increase our existing clients’ LTV or bring new clients?
4. Do we accept Shopify is one of the most popular eCommerce platforms showing ±100% growth year-over-year? If so, do we think we need the custom Shopify app to stay relevant and be in pace with the market?
5. Will the efforts and investments in Shopify app development pay off (directly) within 6-8 months?

If your answer is “yes” to most of these questions, I highly recommend developing your Shopify app now. You can outsource this task from a reliable Shopify app developer, even if you have your in-house engineers. I imagine you have the roadmaps and sometimes it’s not that easy to squeeze in the development of the plugin, which is actually a standalone application, meaning it’s a dedicated project to allocate your human resources for.

Shopify App Development Costs

The costs of developing your own Shopify app may vary and depend on the developer you hire: the freelance developer may charge you 2000 EUR for a small app, while big US agencies may bill tenfold.

It’s always good to hire someone having experience developing Shopify apps (no matter the platform is used: Angular, React, Ruby or PHP) and who is patient enough. Shopify REST API is not always sufficiently documented. Sometimes you have to dig deep, make bets and guess. There are times, Shopify returns a general error or irrelevant error message and it may take hours just to figure out that the problem was not related to the output error. Shopify Access Scopes was another strange thing. In some cases, you have to request certain scopes that you don’t think you need in the first place (e.g. write orders when you only need to read orders).

I also highly recommend hiring someone creative. Let me explain this. Out-of-the-box thinking is critical here since there are certain limitations in existing API methods and you have to be good at problem-solving and finding creative solutions.

Example: Shopify carrier service does not send any discount or promo code information to a 3rd-party shipping rate calculator. And it keeps sending your store’s main currency no matter what currency your client has selected on your storefront. Why would that matter? Well, if you set your Shopify shipping rates based on cart total or you want to give free shipping for all orders over 100 EUR, this rule will be applied even if your customer has a 50% OFF promo code… And the currency sent in the request to a shipping rate service is always the same. Why did they include this redundant data in the payload at all?! So you cannot set up currency-based shipping rates. We’ve come to a workaround in our Shopify Shipping Rates App by capturing the checkout using a webhook. So by the time our app gets the request to provide shipping rates, we can match the checkout with the payload sent to our app. And the checkout object has all the information we might need for the most accurate shipping rate calculation.

I keep telling my team: never tell clients that something is not possible to implement. Come on, we are engineers. Everything is possible: it’s just a matter of time and money. And you should always suggest a solution and let the client decide whether the costs of Shopify development fit the budget.

Get in touch today!

We’re not a high street Shopify agency and we don’t have long-term contracts with Big Names. What would that mean? That means we can guarantee you the top quality, the best care, and our full focus on your business needs.

Get in touch today! And we’ll give you a detailed quote for your future Shopify app:

The post Does my business need a custom Shopify app? appeared first on icg # tec.

I see local offline boutiques going online. I see friends of mine start successfully selling stuff on Amazon and other marketplaces without any background in eCommerce.

Most likely the trends will strengthen in 2021 and we’ll see more and more fully online and remote businesses all over the world.

I wouldn’t say eCommerce hasn’t suffered at all. We’ve seen a 15-25% drop in sales amid general panic in March-April, however, most of the merchants we know eventually recovered by June. Things got more complicated mostly because of the issues in the supply chain.

If I started dropshipping or selling online in 2021, I would go with one of the following categories:

• Sports (outdoor and bodyweight minimalist solutions particularly – gyms are still closed in many countries and lots of people enjoy calisthenics, resistance band training, running, hiking, etc)
• Wellness (self-care, meditation, stress relief)
• Hygge lifestyle and home stuff (aromatherapy boomed last year, for instance. people stay home and try to make this experience enjoyable)
• Home office setups (people saved some bucks eliminating the commute and ready to invest in their home workstations. See #setupinspiration on Instagram )

So let’s compile the eCommerce checklist for those starting up in 2021. Some of the recommendations would seem obvious for those in the industry for a while, but for some reason, even big brands choose odd solutions (Sorry Zara)

Platform

We normally offer our clients one of the following platform options:

• Magento 2
• Opencart
• Shopify

The first two options are both Open-source and that’s where it would be appropriate to compare. Depending on the projected load, budgets, and the number of SKUs I normally recommend the client the most adequate solution.

Magento is most suitable for large merchants with thousands of products, but the development and maintenance costs are much higher compared to Opencart, where you can get your eCommerce website up and running for as little as 5K EUR. It has some limitations though and would not match Magento’s multivendor capabilities and scalability. Both solutions have marketplaces, where you can find addons virtually for every need. But we’ll stop here and I’ll make a dedicated post about the cons and pros of each platform soon.

For those starting their first eCommerce business, I would recommend Shopify. It’s absolutely the best in terms of:

• Time to market (when you don’t need serious customization you can launch your eCommerce store within few days)
• Recurring tech expenses are almost inexistent
• UX and Shopify Checkout particularly are brilliant and optimized for conversion out of the box

Mobile-first

You have probably noticed Facebook’s desktop version now looks like you accidentally opened a mobile version. The huge mobile app on a 4K display.

Back in 2015, we did very well with a minimal care of website mobile readiness. Most of our traffic was “Desktop” and we haven’t seen significant improvement in sales developing a proper mobile commerce solution. Things rapidly changed in 2017, the share of the mobile traffic (mobile and tablet combined) grew significantly and we had to react fast to maintain the conversion rates.

If you’re on Magento and struggle to fight for an optimal mobile experience, I suggest considering switching to PWA storefront (VueStorefront or ScandiPWA: Vue-based and Angular-base respectively). That saves development time a lot. As the result, you have the power of Magento backend and the speed and flexibility of javascript. Additionally, it will be much easier to find engineers for your frontend needs.

Long story short, starting July 1, 2019, Google has enabled mobile-first indexing by default for all new websites. That affects your SEO rankings. But what’s arguably more important than how Google’s robot sees your online store – it is how your client does. Remember, in 2021 most of the traffic is mobile. Period. 

Navigation

I want to stress this one. I still see a lot of websites messing up navigation. It should be simple right? Let’s try to understand the basics. When we speak about navigation we immediately think about the main menu. The menu normally represents a set of parent product collections, their child groups, and static pages like “home” and “contact“. Easy right? The parent product collections can group your products by their unique characteristic (men/women/unisex or shoes/accessories/outerwear) or by action (read/listen) for instance. We had a healthcare merchant and the products were grouped by their function – acupressure, decompression, massage. In the previous versions of the website, we used the pathologies our products address. You got the idea. What you don’t want to do is to mix the approaches and confuse the visitors of your shop. Although it may seem a bit old-school, in my opinion, it’s still a good idea to use filters instead of sub-categories where possible. 

But navigations are not always on the main menu. We got a footer menu which frequently acts as a place where we put the links we have to put (Terms and Conditions, Return policy) but hope nobody will ever find them. I suggest adding customer reassurance blocks in the footer (Trustpilot, Partner badges, Awards) and make sure it’s visible. No point to have them if you have the infinite scroll and lots of content to keep your client busy scrolling all the way down. 

I’ve seen a lot of shops neglecting the breadcrumbs. In extreme cases, you won’t see the breadcrumbs at all. Not only it possibly harms your SEO (hard to tell how much exactly though…), it also leaves your client with options: click “Back” and in some cases, it sends you straight to the homepage (one-page web-apps), and going through the whole navigation voyage, where experience is directly related to how conscientiously the main menu was implemented.

The main menu should be accessible, clear, and always visible. The only moment you can hide navigation is checkout, where you do not want to distract your customer from finishing the purchase. 

Basic SEO

Most of the eCommerce platforms have built-in SEO tools. The starter option normally represents the meta-tag editor. It’s a must, but not enough in 2021. Nowadays, search engines want us to deliver quality content. Make sure you provide unique product descriptions for as many products as you can. That should include a detailed description of the product benefits and value it brings to the customer. Ideally, it should demonstrate the product in use by the human being (where applicable. e.g. if it’s a watch, show it on a human hand in additional images). 

Don’t forget the rich snippets. Get familiar with Schema.org to make use of the benefits rich snippets may provide. With Schema you can include some extra information that may help you get featured within search results. 

I could leave this without a note, but just in case. Always make sure your website is open for search engines. 

Shopify + SEO deserve a dedicated post and I promise you’ll get it. I guess there are still a lot of merchants googling if Shopify allows editing robots.txt file. Short answer: no it doesn’t. 

Reviews

Make sure you show reviews for as many products as you can. If you don’t have enough product-specific reviews, showcase reviews for your brand. According to BrightLocal’s local consumer survey, 91% of consumers between 18 and 34 believe online reviews a lot and the effect is comparable to that of personal recommendations.

If you just start selling online, make it your priority to collect as many positive reviews as possible. As soon as possible. 

Returns

Make your return policy your advantage. Many merchants try to avoid returns at all costs. Don’t sacrifice the reputation of your company. The only way you can minimize the return rate is:

• Provide quality goods
• Work with reliable carriers 
• Provide exceptional customer service and post-sales support

You can iron the negative experience in many cases if your brand speaks to the customer.  

Free shipping or flat rate shipping

Offer free shipping if you can afford it. I work in eCommerce for quite a long time, but I still hate to pay for delivery. When I land on the website I’m not a loyal customer for, it’s always a hidden and unexpected fee for me. Alternatively, you can make an adequate flat rate shipping.

In any case, set the expectation in the very beginning. Let your customer know free shipping is offered. Or make a sticky badge like “Only $10 Worldwide”. Believe me, this simple measure cuts the number of abandoned carts!

Taxes

Always show products with VAT! Nothing disappoints your client more than a 15-25% extra charge after the goods are already added to cart. Only 15-25% VAT charge and unexpected shipping fees combined…

Clear communication, tracking numbers

Speaking about communication, transactional emails is an absolute minimum for an eCommerce website. And this is the absolute minimum of the emails to be sent to your customer considering you allow guest checkout:

• The order confirmation (order is confirmed and ready to be shipped)
• The order has been shipped (should confirm the shipping company it was shipped with and the ETA)
• Shipping update (tracking number if wasn’t known before)
• Review request and return instructions

If a tracking number was not available when the customer was initially notified that the order was shipped, please make sure you send it as a separate mail! This is a part of the customer experience and it makes the client feel he’s not forgotten after he paid. And again it gives clear expectations. 

Again, I emphasize you should remind your client she has the right to return the product. Just accept the fact, you won’t avoid the returns. And at the end of the day, it’s just a metric in your business. Believe me or not, you can get your returns as low as 3-5% by providing exceptional customer service, even if you keep your return policy explicit.

LiveChats – another good way to communicate with your clients, but in some cases, it’s really hard to implement (high load & human resource-wise). If you can afford a good Chatbot – definitely go for it. If your chatbot is not AI-driven, forget about it. Imagine a pissed-off buyer who has a question in the middle of checkout and the bot keeps saying “Sorry I didn’t quite understand..” just because its interlocutor doesn’t respect the syntax…

Checkout

If I am asked to mention just one reason for my love for Shopify, I would say, it’s checkout. 

With Magento and Opencart we played a lot with different checkout layouts, modules, custom solutions. One thing was obvious – the only adequate solution, since Amazon first offered it, is one step checkout. No more accordion checkouts and other wrist trainers. And once again, with one step checkout, you set the expectations and leave no bad surprises for the customer. 

Shopify doesn’t offer the pure one-stepper anymore. But somehow it’s still minimal, smooth, and less demanding for your clicks. 

Stay tuned

That’s just a second post in this blog, but if you found this article any useful, feel free to subscribe, that would be a good signal I should keep posting:

Telegram

Facebook

The post eCommerce checklist for 2021 appeared first on icg # tec.