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.
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
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 full 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. It was quite outdated visually, its overall information architecture was chaotic and there were a lot of user experience errors on every subpage. All these discrepancies were causing a lower conversion rate than was expected by the owner.
The Kaotica Eyeball store is going to expand its sales to Europe. It was the right moment to give the user a better understanding of what the store is offering, to attract user attention, and to encourage them to order the products.
Here is the link to the old version of the Kaotica Eyeball website.
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.
Here's the link to the old version of the Kaotica Eyeball website.
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 really 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?
Product owner expected higher e-commerce conversion rates, obviously. 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, are already in the possession of 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 began with interviewing the 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.
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 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 in the new homepage section.
I recommended presenting the 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 the features section, so we moved it higher (famous faces made users trust the product is worth buying).
In 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 hard work to record the videos with all of those famous people.
Optimization of all images resulted in a 43.12% decrease in page loading 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 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 for the high bounce rate during the checkout process.
Additionally, Eyeball is going to ship products not only to 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 the Kaotica products, so users can add them instantly and make an order.
A clear and eye-catching CTA button was available only on the homepage banner. Now, users can make an order wherever they land, regardless of the device.
We let users know about security information and payment options within the shopping cart, so they can increase their level of trust and safety.
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 are visiting the store, are already in the possession of at least one microphone. It was crucial to let them know if Eyeball fits the mics they have.
Formerly it was presented as plain text, spread across the website. We decided to place it in one location, gather all images of mics and group them by producers.
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 released a new website in January 2019, and a month later we compared year-to-year stats on Google Analytics. Results came beyond 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).
8.50% less bounce rate; 3.83% less exit.
8.50% less bounce rate; 3.83% less exit.
Takeaways
Takeaways
Takeaways
While working on this project, I learned how important it is to listen to clients' perspectives. You can not build a better-performing project without a deep understanding of how clients' business works.
This was also a great experience for my first-time 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.