We challenged our Design and Development team at Blend Commerce to analyze, recommend and motivate how they would improve conversion rates for popular existing stores using their knowledge and expertise.
How we can improve CRO
If you’re a regular reader at the Blend Commerce Blog, you’ll already know how much we stress the importance of CRO. In one of our previous blogs, written by our COO Peter Gardner, we tell you all about why CRO is important and what it can do for your brand.
But it’s not enough for us to tell you how important CRO is, we want to show you more about what our team can do and our prowess with CRO. In our new blog series on Shopify Conversion, we start with our, very first installment, ‘Shopify Conversion - How we think Kylie Cosmetics can improve.’
We asked our team of Designers and Developers to look at the Kylie Cosmetics brand and asked them how they felt they could improve the features and functions of the website if they were tasked to do so.
We asked them the following questions
- What would you change?
- Why?
- How would this help conversion?
Here is what our team had to say.
James - UI/UX Designer
James is our UI/UX designer and always brings new and fresh ideas to the table.
I would recommend a simple restructure of the navigation, mega menus, and footer.
Currently, the structure of the navigation seems to be quite large and takes up a lot of unnecessary space. By reducing this down we allow more information to be brought further up the page.
For the mega menus, these currently just consist of a list of links. Also, some menu items are hidden because of the scroll functionality in the dropdown menus. I would also recommend introducing a full-width mega menu, which will allow all menu items to be seen at once. Images would also be a great opportunity here as users visiting the store may be more intrigued when an image is shown rather than just a link.
For the footer, there currently are no product links, which I feel is a missed opportunity. Also, the newsletter sign-up section seems to be hidden around its surroundings and doesn’t stand out at all. I recommend making the newsletter signup more prominent and making this more of a feature. Additionally, introducing product/category links would enhance the user journey and ensure customers visiting the site will be able to navigate throughout the store easily.
A simple restructure of the navigation and mega menus will help users easily navigate throughout the site. This will enhance the user's shopping experience and allow them to find exactly what they are looking for with ease.
Making the newsletter more of a feature will prompt more users to sign up for the newsletter. This will allow the opportunity to upsell to new and existing customers with promotions, special offers and new product releases through social email marketing.
Lastly, introducing product/category links into the footer will allow another pathway for users to find the products they are looking for. Currently, the users visiting the store will only be able to filter through products from the navigation. Allowing them to have this functionality in the footer is just another way to enhance the user journey, which will evidently allow them to reach product pages faster.
Angelika - Technical Developer
Angelika is an exceptionally skilled technical developer here at Blend who is passionate about problem-solving, technical implementation, and making things work for a store.
I recommend displaying add to cart on the product pages before the fold. The quicker a user can add something to the cart, the more likely they will buy it. Pages should be intuitive and the majority of the time she would expect the add to cart to be the first thing the user would see.
I also think that Kylie Cosmetics should only promote in-stock products in the carousel. Showing multiple out-of-stock products gives the user a negative impression when they see something they want but it is not available.
Stephan - HOD and Lead UI/UX Designer
Stephan is our highly experienced lead UI/UX Designer, Stephan’s vast knowledge and experience working with some of the UK’s best digital agencies, retailers, and high-profile clients, make him a truly valuable asset to our team.
I recommend giving the users a call to action when a product is out of stock. Allow them to notify me when back in stock, or give them a confirmation of what it will be likely to be in stock.
Having arrows to the product image on the product page will allow users the opportunity to scroll through the images without having to click a thumbnail. The reason is that we have seen lots of sites when testing that users are used to having an image gallery where they can click left and right/next and previous to see alternative images. The thumbnails are there for users to see where they are in the lineup of that gallery and giving the users a quick look before seeing it larger.
On mobile, show to users a peek of the next image for the product images on the product page, this will allow for users to know that they can scroll left and right. The product page doesn’t really have anything in the first viewport. This is due to the size of the navigation and also the addition of the menu item pinned to the bottom of the browser.
For the quantity on mobile and desktop, allow for less friction and place the ‘-’ and ‘+’ icons next to each other and if there is only one, then make the ‘-’ icon inactive allowing a more visual queue for users. A Sticky Add to Cart button would always help with conversion, whether on desktop or mobile.
Ollie - Shopify Developer
Ollie is our Shopify developer, who has extensive experience in both design and development. His primary responsibility is delivering highly customised Shopify store themes, dedicated to functionality and helping clients increase conversion and AOV
I recommend including a "back in stock" feature where the user can sign up to receive a notification when an out-of-stock product is back in stock. This might help increase the conversion rate as it will notify interested users as soon as it's available to buy again. However, this feature might not be appropriate on a site with that much traffic.
Wojciech - UI/UX Designer
Wojciech’s keen eye for design and his knowledge of development brings fresh and unique ideas for our clients.
I noticed that the Product page is 95% black & white (except images). The main [Add to cart] button could be changed to pink to grab more attention on the page and help users make a decision. Additionally, the Search feature could use improvements. Including suggestions as users type makes the experience much easier and leads to higher conversion.
I recommend adding sorting and filtering on the collection page to improve searchability even more and allow people to match their preferences perfectly with what is displayed on the page. Altogether this increases user satisfaction and leads to better sales.
We created a mockup for the product page that includes most of the suggestions that were given here:
- Main [Add to cart] is made sticky and appears above the fold
- Main [Add to cart] is made pink so it's more eye-catching
- Gallery is now toned down and has one image peaking from the side
- Reduced in size navigation - Redone QTY for less friction
- [Notify when back in stock] for unavailable items
Cole - Shopify Developer
Cole’s responsibilities are not only to implement functional and design change but also to develop new ideas that will further automate the core metrics of our Shopify stores. Cole continuously hones his advanced technical skills to help Blend clients get the most out of the Shopify and Shopify Plus store.
I recommend hiding out-of-stock products or including messaging or a call to action for users. Out-of-stock products unnecessarily use space if there is no clear way forward for the user.
The plus icon below the cosmetics is a confusing CTA, I recommend replacing it with a Shop Collection link.
The navigation feels a little confusing. I'm not sure which is highlighted in the top one. I recommend updating the dropdowns with a more mega-menu feel.
There is a lot of space used just for social links. This gives Kylie Cosmetics the opportunity to add accordions and save on vertical space.
Jordan - Shopify Developer
Jordan comes to Blend with extensive experience working with high-profile clients. He has a passion for delivering impressive website experiences that take precision and aesthetic into consideration.
My first recommendation was to relook at the Menu Dropdown. I recommend making this into a mega menu. Customers like to be able to see ranges at a glance and it is currently hard to visualise what all these different categories include. A promotional image for each in a grid layout would help direct the user to what they're looking for and they can have more of a 'browse' of the website with this increased accessibility as a whole rather than struggling to find their way.
I also recommend making some adjustments to the sticky header, Presently it feels encumbering when you browse. Making this shorter with a slightly smaller logo and padding will open the page up more and make it a nicer browsing experience.
Some text against backgrounds makes it hard to read and would not conform to accessibility guidelines. The font is too big that it looks shouty and is too near to the edge of the screen. This makes it far more likely for users to scroll past and miss this entirely. Improved accessibility will increase conversion and give more of a precise look to the page.
The search isn't very noticeable and is unhelpful as it doesn't suggest products on the site. If users look for a product and can’t see it, they may search for it but will be unlikely to find it without knowing the name. This would make the site easier to use if people know they can quickly search and checkout for the product they've logged on specifically to look for.
Jesse - Shopify Developer
Jesse is an experienced front-end developer who has worked extensively with large brands. His main goal is to create lightweight environmentally friendly web solutions with a focus on building high-quality, stylish and performant Shopify stores.
I first noticed an inconsistency with button hover effects. Some of the buttons change with hover and some don't. I also recommend relooking at the 'Shop All' page. I noticed as I was scrolling for a long time that all the images are almost exactly the same apart from the lip colour, it was a bit dizzying. I recommend showing fewer products and removing out-of-stock products entirely.
I found the dropdown arrows confusing and recommend removing them completely. Actually, the Contact and Don't Miss Out sections at the bottom don't work. I also recommend displaying the Don’t Miss Out and Contact Me sections higher up in the footer and as they don't look right positioned beneath the copyright etc.
I would relook at the Contact page in terms of design, It's very basic and a bit more thought behind the design could lift the page. Some kind of description in the routines pages would be good. Perhaps an explanation of how to use the products in the right way together.
Ashley - Shopify Developer
Ashley is a creative and experienced Front-End Developer who brings a multitude of knowledge in UI/UX design and front end development to the Blend team.
I first noticed something straight away when looking at the homepage. In the Kylie’s values section, the third item is missing content. It is important to ensure there aren't any placeholder sections showing on the website as this may reduce the amount of professionalism taken by the user when viewing the site. Reducing this would in-turn improve conversion.
What would Blend do differently
Taking all of our team’s insights and recommendations into consideration, our design team put together a mock-up of what the Kylie Cosmetics site would look like, if we implemented some of these changes.
What can Blend do for you
The reason for this fun little experiment is not only to keep our team's creative juices flowing, but to give you an insight into the way our team thinks and the highly detailed and focused approach we take when looking at your site. The ultimate end goal for every user journey is for your users to hit that check out button. If you're interested in enhancing that experience for your customers and increasing your conversions, get in touch with the Blend team to get the conversation going.
