Redesign of Kaotica Eyeball — an e-commerce store offering a studio booth alternative that fits over a microphone, sets up in seconds and transforms any space into a recording studio.
Redesign of Kaotica Eyeball e-commerce — store offering studio booth alternative that fits over a microphone, sets up in seconds and transforms any space into a recording studio.
Platform
Shopify
Platform
Shopify
Team
Bartek Wiktorowicz
Vasyl Korol
Joanna Jabłońska
Team
Bartek Wiktorowicz
Vasyl Korol
Joanna Jabłońska
Duration
October 2018 – January 2019
Timeline
October 2018 – January 2019
My role
I was responsible for communicating with the client, gathering needs and expectations, rapid prototyping, heuristic evaluation and complete website redesign.
My role
I was responsible for communiaction with client, rapid prototyping, heuristic evaluation and website redesign.
The Problem
I was hired to redesign the Kaotica Eyeball e-commerce website. The site was visually outdated, the overall information architecture was chaotic, and there were a lot of user experience errors on every subpage. All these inconsistencies resulted in a lower conversion rate than the owner expected.
The Kaotica Eyeball store is about to expand its sales to Europe. It was the right time to give users a better understanding of what the store offers, to attract their attention, and to encourage them to order the products.
I was hired to redesign the Kaotica Eyeball e-commerce website. It was quite outdated visually, its overall information architecture was chaotic and there was a lot of user experience errors on every subpage. All these discrepancies were causing lower conversion rate than it was expected by the owner.
The Kaotica Eyeball store is going to expand its sells to Europe. It was the right moment to give user a better understanding of what the store is offering, to attract user attention and encourage to order the products.
Challenges
1. How to explain what Kaotica is selling to the customers?
On the old version of the website, it was not clear enough what Kaotica's flag product is and how it could help customers.
1. How to explain what Kaotica is selling to the customers?
On the old version of the website it's was not clear enough what Kaotica's flag product really is and how it could help customers.
2. How to improve e-commerce conversion?
The product owner expected higher e-commerce conversion rates. My personal, additional goals were to decrease abandon rates and increase the number of transactions.
2. How to improve the e-commerce conversion?
Product owner expected higher e-commerce conversion rate, obviously. My personal, additional goals were to decrease abandon rates and increase the number of transactions.
3. How to better inform about mics compatibility?
Musicians, who are visiting the store, already possess at least one mic. It was crucial to let them know if Eyeball fits the mics they have.
3. How to better inform about mics compatibility?
Musicians who are visiting the store, are already in the possession of at least one mic. It was crucial to let them know if Eyeball fits mics they have.
Approach
I started by interviewing the product owner to gain a general understanding of the issues and expectations. I then performed a heuristic evaluation of the old website to learn about its overall functionality and to identify existing bugs. Next, I researched Google Analytics to identify behavioural issues. I started sketching, prototyping, and iterating design proposals. Finally, I worked with the developer to refine the overall feel and look.
I began with interviewing product owner to acquire general knowledge about the problems and expectations. Then I conducted a heuristic evaluation of the old website to learn about its overall functionality, and to identify existing flaws. Next I researched Google Analytics to identify behavior issues. I started sketching, prototyping and iterating design proposals. Finally I collaborated with the developer on polishing the overall feel and look.
Solutions
1. How to explain what Kaotica is selling to the customers?
We decided to use the video background to show the product in use. A large video title was placed so that the user could not miss it at first glance.
We placed the most common questions from the FAQ in the new home page section.
I recommended presenting the main features of Kaotica Eyeball to make it easier to get familiar with the product.
In one of the first design iterations, the video section was placed lower. It turned out that the videos were more important to potential customers than the features section, so we moved it up (famous faces made users trust that the product was worth buying).
In the previous version of the site, videos looked like images. There was not even a play button on them. It would be a waste to leave them undiscovered by users, as it was hard work to record the videos with all these famous people.
Optimizing all the images resulted in a 43.12% reduction in page load time.
1. How to explain what Kaotica is selling to the customers?
We decided to use the video background to show product in use. Big video title was placed so the user could not miss it at first glance.
We have put the most common questions from the FAQ to the new homepage section.
I recommended presenting main features of Kaotica Eyeball to make it easier to get familiar with the product.
On one of the first design iterations, the videos section was placed lower. It turned out videos are more important to potential customers than features section, so we moved it higher (famous faces made users trust the product is worth buying).
On the previous version of the website, videos looked like images. There was not even a play button on them. It would be a waste to let it be undiscovered by users, as it was a hard work to record the videos with all of those famous people.
Optimization of all images resulted in 43.12% decrease of pages loading time.
2. How to improve e-commerce conversion?
22% of users abandoned their shopping carts because the seller did not mention the fees up front. On the old site, users found out about additional costs in the last step of the checkout process. I assumed this could be a reason for the high bounce rate during the checkout process.
In addition, Eyeball ships to Europe as well as the US and Canada. Based on this, I recommended showing the estimated shipping price in the shopping cart (thanks to geolocation) so that users are never surprised during checkout.
We used an empty shopping cart page as an opportunity to show all of Kaotica's products, so users could add them immediately and place an order.
A clear and eye-catching CTA button was only available on the home page banner. Now users can place an order wherever they land, regardless of their device.
We inform users about security information and payment options within the shopping cart to increase their confidence and security.
2. How to improve the e-commerce conversion?
22% of users abandoned their cart because the seller did not mention the charges from the beginning. On the old website users learned about additional costs in the last checkout step. I assumed it could be a reason of high bounce rate during a checkout process.
Additionally, Eyeball is going to ship products not only the U.S and Canada but also to Europe. Based on that I recommended showing the estimated shipping price on the shopping cart (thanks to geolocation), so users will never be surprised during checkout.
We used an empty shopping cart page as an opportunity to show all of the Kaotica products, so users can add them instantly and make an order.
Clear and eye-catching CTA button was available only on homepage banner. Now, users can make an order wherever they land, regardless of device.
We let users know about a security information and payment options within shopping cart, so they can increase the level of trust and safety.
3. How to better inform about mics compatibility?
Musicians who visit the store already own at least one microphone. It was vital to let them know if Eyeball would work with the mics they had.
It used to be in plain text, scattered around the website. We decided to put it in one place, collect all the images of the mics and group them by manufacturer.
3. How to better inform about mics compatibility?
Musicians who are visiting the store, are already in the possession of at least one microphone. It was crucial to let them know if Eyeball fits mics they have. Formerly it was presented as a plain text, spread across the website. We decided to place it in one location, gather all images of mics and group them by producents.
Results
We launched a new website in January 2019, and a month later we compared year-on-year statistics on Google Analytics. The results exceeded our goals and expectations.
We launched a new website in January 2019, and a month later we compared year-on-year statistics on Google Analytics. The results exceeded our goals and expectations.
+17.28% of revenue; +11.85% of e-commerce conversion rate.
+22.59% of transactions; -4.33% avg. order value (it was expected, as all additional products are much cheaper than the only product that was available before).
+22.59% of transactions; -4.33% avg. order value (it was expected, as all additional products are much cheaper than the only product that was available before).
8.50% less bounce rate; 3.83% less exit.
8.50% less bounce rate; 3.83% less exit.
Takeaways
Takeaways
Takeaways
Working on this project has taught me the importance of listening to the customer's perspective. Without a deep understanding of how the client's business works, you can't build a better-performing project.
This was also a great experience for my first contact with Shopify - it has its limitations, and not everything can be done in a reasonable amount of time. I wish I could fix the checkout process, but it was imposed in advance by the Shopify platform.
While working on this project I learned how important it is to listen to clients' perspective. You can not build a better performing project without a deep understanding of clients' business works.
This was also a great experience as my first-time contact with Shopify — it has their own limitations, not everything can be done in a reasonable amount of time. I wish I could fix the checkout process, but it was imposed in advance by Shopify platform.
Thank you for reading! 🙌
Here is the next project:
Thank you for reading! 🙌
Here is the next project:
2PARC Mobile App
How to solve problem of missing parking spaces in big cities? We aimed to find a solution.
2PARC Mobile App
How to solve problem of missing parking spaces in big cities? We aimed to find a solution.