#127: Why Shopify Brands Should Be Obsessed With User Experience
In this episode of the Ecommerce Coffee Break Podcast, I talk with Adrien Levinger, Founder & CEO of FAV Solution. We discuss UX/UI best practices and why Shopify brands should be obsessed with user experience.
On the Show Today You’ll Learn:
- How to build a website that is usable for a customer.
- How should a user journey look on a Shopify store.
- How should you do user testing once you go online.
- What do you do if the site content is too heavy.
- And more
Links & Resources
Chrome extension to check image size vs rendered on screen: https://bit.ly/3Obhs2l
Tinyjpg to optimize image weight: https://tinyjpg.com/
About Our Podcast Guests: Adrien Levinger
Adrien has a Master of Science in Engineering from Telecom Paris, a top tech school in France. He combines strong technical engineering knowledge and a unique Client-side experience. FAV Solution is a leading eCommerce dev agency in the US, a Shopify Plus Partner, and a member of 1% for the Planet.
Listen & Subscribe on your Favorite Podcast App:
Apple Podcasts | Spotify | Amazon/Audible | Stitcher | Google Podcast | YouTube
Please support the show if you liked today's episode:
- If you love the podcast, please get someone else to listen, too!
- By rating and reviewing the show in the app that you are listening to, you will enable us to invite bigger and more impactful guests.
- Please subscribe and get notifications when new episodes are released. Sign up with your email below.
- Share the podcast with your family, friends, and co-workers.
- Tag the podcast on Instagram @clauslauter and let me know what you like about it.
- If you like the content and would like to support the podcast, you can buy me a coffee here.
Claus Lauter: [00:00:00] Hello and welcome to another episode of the e-Commerce Coffee Break. Today we wanna talk about user experience, user interfaces, and the speed and performance of Shopify stores. Obviously, all of these topics are very important and a lot of shops, merchants that I see. Uh, Struggle with at least one of these topics.
So we wanna dive a little bit deeper into this. And with this, I have a guest on the show today Adrian Levinger. He's the founder and CEO of Five firstname.lastname@example.org, which is one of the leading e-commerce development agency in the United States. They are Shopify plus partner and member of the 1% of the planet.
He was born and raised in France. I joined as a master of science and engineering from Telecom Paris, and he combines strong technical engineering knowledge and a unique client side experience. So, hello Adrian. How are you?
Adrien Levinge: I'm very good. Thank you. Thanks for having me. Adrian.
Claus Lauter: Give me a bit of a overview.
What got you into e-commerce? How did you get where you are
Adrien Levinge: today? Uh, so it's sort of an interesting, um, path. [00:01:00] Um, I a after, uh, graduating, uh, I took a little detour in my career by, uh, being a photographer for a few years, and photography led me to fashion, and fashion, led me back to eCommerce and engineering.
So I, I, I, I started, uh, working extensively ecommerces, uh, at a company called the Webster, uh, in the us um, about seven years.
Claus Lauter: Okay. Now obviously being a photographer gives you a good eye on design on how things should look and how they look nice. Give me a bit of idea on what you see nowadays in user experience and user interfaces.
Lot of people, lots of merchants just work with standard Shopify template, but there's so much more out there. Maybe to start there, give me an idea on how you would approach a building a site for a, a customer when it comes to usability.
Adrien Levinger: I think, [00:02:00] uh, one general rule that is key, uh, in user experience, um, is less, is more.
And, uh, quite often, uh, when we're working on custom builds and we're gonna do, um, a user interface phase, a user experience phase, some wire frames, then some high fitty mockups before we start building and we end up with. Uh, fairly complex and elegant solutions. Uh, but then when we put them to the tests and when we go live on the site, we see month after month that we tend to simplify the original experience.
We go with what we think is best and with what the client wants. But quite often when we are actually measuring and testing in real life scenario, we. Simplifying the experience. So that, that would be my, the, the main key point for me, that very simple and, and fluid, uh, user [00:03:00] experience and design is, is usually the most efficient.
Claus Lauter: Okay. Talking about this is like, what are the most important parts in a user Jo journey on a Shopify store when it comes to usability?
Adrien Levinge: So important things to have in mind. Uh, the devices the users are going to be using and the fold. So having something, uh, full bleed and using the entire screen is really interesting for an immersive experience.
But sometimes you might lose the, the, the users, the clients, because they're not gonna scroll down or left and right. So it can be interesting to have the beginning of the following section below the. It gives an indication to the user that they have to scroll. So typically, um, the user journey and, and, and the steps will be homepage.
Collection page, a product page, and then the checkout. So I think that [00:04:00] in each of these steps, it's important that the call to action or the next action we want, that the user to take is visible on the screen without any action. Meaning that on the homepage, if the CTA is not visible, Above the banner, above the fold to go on the collection page, we should start to see the following section so that it's an indication to scroll.
And once you scroll, you'll see the CTA when you're on the collection page, there should be CTA leading you to go to the product page. And when you're on the product page, the CTA to add to cart. Should be visible at all times. That would be my, my, my main, my main recommendation.
Claus Lauter: Yeah, I think that's very good advice.
What kind of tools are you using to do user testing once you go online?
Adrien Levinge: Um, very, very, very simple way to do user testing, in my opinion, uh, or, or to get, uh, analytics on how the, the website is being used, um, is simply to use Google Analytics. [00:05:00] You can tag elements on your site so that you can see what's being viewed or what's being clicked, and then you.
Go in analytics after a week, after two weeks, after a month, depending on how much traffic you have, you need to wait a bit of time to have, uh, statistical significance. And then you look at your top events and you can make some decisions. This button is being seen and clicked, or it is not being seen and clicked, or even in your menu quite sometimes.
Client will launch with a very extensive menu because they want all their categories to be displayed. But when we tag the menu and look at the data in Google Analytics, you'll notice that only three or four items are really being clicked. So you want these items at the top, and you want to narrow down the number of items in the menu as much as you can.
So, mm-hmm. ,
Claus Lauter: are you using any tools? Hot, uh, Lucky Orange, Crazy Egg or something like that to, um, Absolut users.
Adrien Levinge: Absolutely. I think they're all good and equivalent. Um, the only thing that I would say is that [00:06:00] you, you have to know why you use them. And you have to use them very sporadically. Uh, the reason I'm saying this is they have a significant impact, in my opinion, on the website speed.
So I do use them when I wanna test something specific where I, where or when there is something that I do not understand and cannot pinpoint. And then in that case, you can have heat maps and session recordings and it's extremely useful. But I would use it, you know, for a few days or for a few weeks, and then I would turn it off, remove the script.
I really, really, really suggest all eCommerce players to not leave them on as evergreen tools. Turn in, turn them on, and then turn them off when you're done experimenting.
Claus Lauter: talking about speed, obviously that's a key factor on keeping people on the site and getting through the funnel. When it comes to speed, when it comes to design, sometimes it does not go hand in hand.
The customer or your client might have some expectations on, um, usability or on design, which is very heavy on the load, [00:07:00] and that has a negative impact on the speed. How do you deal with this or what would your be your recommendation to get the most in Reacts to speed out of a.
Adrien Levinge: Um, so obviously the way the website is, is built, uh, will inference the speed.
So if it's well coded, well developed, it will be better performing. Um, but. Only to an extent, meaning that there has to be a compromise between the amount of content, mostly multimedia, so images and videos. The, the, the, the type of functionalities and the number of app and functionalities you have on the site and the speed.
It has to be, uh, a balance between the two. You cannot have all the functionalities and super high risk images on every single. And have a supervised website. You, you need to decide between the two. So the simple things is focus on what's core to your business and, and when it comes to assets to [00:08:00] images or video, try to compress them as much as you can while maintaining quality.
So, What I usually do is I, I compress a bit and then a bit more, and then a bit more until it's noticeable and that's where you stop. You don't want people to see that the image is not good quality, but you want to compress it as much as you can till you reach that.
Claus Lauter: Okay. Now your Shopify Plus agency and not everyone jumps immediately on Shopify Plus.
Normally there's a sort of a journey before there, before people decide, um, to become a Shopify Plus customer there. Who's your perfect customer or what's kind of their journey before they approach?
Adrien Levinge: Um, my perfect, uh, customer or the perfect customer to go on Shopify Plus go on Shopify Plus. Yeah. So in my opinion, there are two reasons, two main reasons why you wanna upgrade, uh, or go with Shopify Plus.
Uh, they are. Uh, if your revenue is above 2 million a year, [00:09:00] then I think, uh, that it's not going to cost you a lot more money to be on Shopify Plus. The reason being that, uh, the commission on, on each transaction on payments is lower when you're on Shopify Plus. So even though the flat fee is higher, since the commissions are lower, if you have bigger volumes, it's not necessarily more.
Per month. Actually at some point it can become less expensive to be on plus than to be on the regular one. So that's one that's purely, uh, economical. Um, the second one is in terms of functionalities. If there are things that you want to do, a new website, especially around customization of the checkout.
Then you'll have to go on plus, because the, these are the limits of, of a traditional Shopify store. Also, in terms of operation and logistics, if you want to put in place a lot of, of automation, then there are some amazing tools only available to Shopify Plus partner, um, stores.
Claus Lauter: Okay. Question. You talked about [00:10:00] the checkout experience that you can edit or change on the, um, either plus customer.
Why is that so? Because I would say the normal Shopify checkout on the standard Shopify account has been tested, I don't know, a hundred billion times. Absolutely. Why do you, why do you need to have a better one or a customized experience, um, to make
Adrien Levinge: it better? Well, if you want to increase your revenue, uh, you basically have three, three different levers, the traffic, the conversion rate, and the average order value.
Um, obviously modifying the checkout is not gonna help with the traffic, so it can help with conversion rate and it can help with our virtual value. You're right, the Shopify checkout is tested on thousands, hundreds of thousands of stores, so it's not gonna help with, I mean, we can assume that it's, it's perfect in terms of conversion.
What you can do is improve the average order value [00:11:00] by introducing some upsell and cross sell elements at the check. Let's say you're selling shoes, then you can, you know, push, um, accessories, socks, uh, or, or um, other elements of the checkout. If you're selling jewelry, you can push little pouches, which price are gonna be very small compared to what you're selling, but still it can help you increase your, your average value by five 10%.
And this can have a significant impact in the. Okay.
Claus Lauter: Now, if you become a Shopify Plus customer and you already have your store and you're making good revenue, as I said, below $2 million a year or something like that, and you come with your store, do you need to start from scratch or can you use the solution that you have?
Like, I mean, there's a lot of ton. A ton of very good. Themes out there. Templates out there out of the sandbox has some very good ones. Can you build up on this or do you reinvent the wheel
Adrien Levinge: there? No, no, no. You, you build up on what you have. You [00:12:00] absolutely not reinvent the wheel. Uh, basically you Shopify upgrade your account, which gives you access to a few additional functionalities.
Uh, the one we're talking about, having access to customizing the checkout, this is actually not available. Out of the box. For every Shopify Plus partner, you have to make a formal request because you must understand that this is a very, very important and therefore a risky part of the user journey. So you need to say, I know what I'm doing and I'm taking full responsibility if something happens.
And then they give you access to that specific file where you can modify the, the, the checkout. Ok. But you do not have to reinvent. You keep on on building on what you already.
Claus Lauter: Okay. From your experience, give me a gold nugget or tip that people can implement today into their store to increase their performance or their speed, or at least find a gap there.
Adrien Levinge: So, to increase performance, uh, one tip that can be universal, uh, would be, uh, [00:13:00] regarding images. So two things you can do. Uh, you can download a Chrome extension that is going to help you. Um, Compare the size of the image you uploaded versus the size of the image displayed in your browser. So if you notice that the image that you uploaded is a lot bigger than the size of the image that is being displayed, it means you can re resize your image and reapp upload it.
You'll have a significantly lighter image. Another thing that you can do is use a tool that is freely available to everybody online, which is called tiny J jpeg, and you can use it to compress your images. You do that and you reapp applaud them. Same thing, you're gonna maybe divide the size and weight of your image.
By two, which can potentially help you save a few, a few hundred milliseconds or potentially a few seconds.
Claus Lauter: Okay. That makes definitely a huge difference. Talking about seconds, um, [00:14:00] what should be the perfect load time for a page? Seeing it from an eCommerce perspective,
Adrien Levinge: uh, we tend to say under three seconds.
Um, But the, the thing is, uh, there is no absolute page load time. It will depend on what device you're using, what network you're on. So I, I, I think, uh, yeah, I mean, three second is a good rule of thumb, but it, it is to be taken with a grain of salt. Okay.
Claus Lauter: I spoke to a guy earlier today who had never was thinking about working in an agency, had never worked with an agency before.
What kind of homework do need people need to do before they approach you as an agency or any agency And, um, to have, be on a good start.
Adrien Levinge: Ah, that's an excellent question. Um, I think, uh, the main difference, um, if you work with an agency, uh, versus being a freelancer, if, if that's what you've been doing up until now [00:15:00] is that you must enjoy being part of a team and, and you must be a good team player, meaning you are not gonna be on your own to build an entire website.
Um, so you're gonna share. The different functionalities of the different pages. It's gonna be collaborative. The good side of things is if you're stuck on something, you can always pick your, your colleague's brain. And, and also, um, it, it, it can, I mean, in my opinion, you, you learn faster, you learn more when you're, you are on a team.
And you can always go to forums or you, there are many, many communities online for freelance developers and that we also use as an agency. But I think that when you have a core team and you're working, you know, day after day with, with people, it, it, it makes a difference. Um, so yeah, being a, being a good team player and willing to be part of a team would be the, the main per.
Claus Lauter: Okay. So you're not just only outsource and let the agency do what they do and then completely forget about it. You should be [00:16:00] involved in the process and be a team player. Is that what you're saying?
Adrien Levinge: Exactly. Exactly. Yep. Okay,
Claus Lauter: cool. So where can people find out more about, um, F Solution and what you do?
Adrien Levinge: Uh, Uh, well mainly on, on our website, uh, fab solution.com.
Uh, you'll have a brief overview of our services, uh, as well as, uh, a few of our clients and a few of our partners. Um, a key element when we started, um, Fab Solution, uh, was that we wanted to be. Very focused, uh, on the dev side of things. Um, back in the early days of eCommerce, so 2000 and then second wave 2000 tens, uh, the big thing was 360 agency or one stop shop agency that could do it all.
We. Are a tech and dev expert. So what we did when we started the agency is that we spent an [00:17:00] extensive amount of time researching for excellent agencies in other fields and ours with complementary skill set, and we put together an ecosystem of experts. It means that when you work with us, if what you need goes beyond.
Scope of capabilities, we're going to connect you with our partners, who we work with on a daily basis on many accounts. So from the customer perspective, it's like you're working with a one stop shop, but in reality you are working with the top players in each field. So you have the best of both. Four, because you are working with people who are used to work together.
You have one project manager who can coordinate the, the, the project, but then you get real talent in each field. I told I loved it. Yeah, yeah. Yep. A system of expert. That's a big thing of our, Of ours. Yep.
Claus Lauter: Yeah. No one can be the best in everything, so then rather have a group of people who are the best in their field.
So I like that approach a lot. [00:18:00] Cool. Adrian, I will put the links in the show notes. Then you're just one click away. And thank you for giving us a little bit of an insight on user experience and performance there. I think there were a lot of old nuggets there and. Potentially have to listen twice to the podcast to get all the content out of there.
Thanks so much for your time and talk soon.
Adrien Levinge: Thank you. Have a good one.
Today's Episode Sponsor
Sponsor Options: We offer a range of sponsorship options for the show. To find out how you can reach your target audience through the Ecommerce Coffee Break Podcast click here.
Download Your FREE Conversion Optimization Principles Worksheet.
Delivered instantly. Start reading in the next 2 minutes.
You'll also get notifications when new episodes are released and receive my weekly ecommerce marketing optimization newsletter. Opt-out anytime.
Continue the Conversation
In our ECOM MERCHANT PRO community, you can connect with our podcast guests and continue the conversation.
Our community is also a great place to get advice from other Shopify merchants who have achieved what you are aiming for.
This is your safe place to actively grow your online retail business with the support of the most amazing and helpful group of ecommerce entrepreneurs behind you.
Join the Ecom Merchant Pro Community! Podcast listeners get 50% off for life with the coupon: EMPC
Running a Shopify business is tough, don't go at it alone.
DISCLAIMER: The content in this podcast episode is provided for general informational purposes only. By listening to our episode, you understand that no information contained in this episode should be construed as advice from Claus Lauter, idube Pte Ltd, or the individual author, hosts, or guests, nor is it intended to be a substitute for research on any subject matter. Reference to any specific product or entity does not constitute an endorsement or recommendation by Claus Lauter, idube Pte Ltd. The views expressed by guests are their own and their appearance on the program does not imply an endorsement of them or any entity they represent. The views expressed by the Claus Lauter, idube Pte Ltd, do not represent the views of their employers or the entity they represent. Claus Lauter, idube Pte Ltd, expressly disclaims any and all liability or responsibility for any direct, indirect, incidental, special, consequential, or other damages arising out of any individual’s use of, reference to, or inability to use this podcast or the information we presented in this podcast. We feature sponsored interviews with guests who paid an appearance fee that supports the maintenance of the blog or podcast. Affiliate links – if you click on my affiliate links and sign up for the products and services I trust and recommend, then I will earn a commission. Although we may receive a commission from the affiliate, the cost of the product for you will always be the same or often discounted. All affiliate products are vetted by me and my team, and we support and recommend these products because we find they are worth it.