Case Study: 8 Design Tips That Increased My Ecommerce Conversions By 42%
What Is Considered A Good Ecommerce Conversion Rate?
Monitoring your conversion rate is crucial to building a profitable ecommerce business. And most analytics tools can help you measure this data out of the box. Your conversion rate is calculated by simply dividing the number of desired actions by the number of website visitors in a given period. For example, if your website is getting 50 conversions for every 5,000 visitors, your conversion rate is 1%. Depending on the specific type of online business you run, your conversions may include online sales, email signups, add to carts, or any other KPI you wish to measure. But in the case of an ecommerce store, your primary focus should be your purchase conversion rate. On average, ecommerce stores have a purchase conversion rate of 1% - 2%. What’s more, experts say a good conversion rate is anywhere from 2% to 5%. This should be your baseline as you measure your online store’s success.The Conversion Results of My Last Site Redesign
Before we dive into the nitty gritty details of how I improved my conversion rate, here are my overall results and exactly how I conducted my experiment. First off, I run Bumblebee Linens, an ecommerce store that sells handkerchiefs online. Because my site gets a ton of traffic from content pages that do not directly convert to sales, I measured my conversion rate based on my most predictable traffic sources. As a result, all of my conversion data was taken from targeted PPC ad traffic sources like Google Shopping and Google Adwords. After all, my Google ads traffic is very steady and always converts at a consistent percentage. Before I redesigned my site, the conversion rate for my ecommerce store hovered at around 3% which is above average. But the look and feel of the site was dated and desperately needed a refresh. Overall, the entire redesign took approximately 7 weeks and cost me roughly $1840. Here are the conversion results from my updated design compared to the original:- Desktop conversion rates increased by 46%
- Mobile conversion rates increased by 26%
- Tablet conversion rates increased by 32%
8 Ecommerce Design Tips To Optimize Your Conversion Rate
If your ecommerce store is not performing as well as it should, there are many aspects of the user experience that could be negatively impacting sales. Even a seemingly innocuous design choice like your font size or the color of your buttons can have a significant impact on your overall conversion rate. If you want to systematically improve the conversion rate for your ecommerce store, you should follow these 8 design steps.1. Use A Consistent and Complementary Color Scheme
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/adobecolor.png)
- Teal was applied to give the site a bright, overall color for a young and hip feel;
- Yellow was used to draw attention to marketing elements like free shipping and special offers;
- Hot Pink was used for all action buttons on the site.
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLFront.png)
2. Simplify Your Navigation
Is your menu too complicated? Is your navbar taking up too much screen real estate? A good rule of thumb for an ecommerce store is to minimize the number of clicks for a customer to add to cart. As a result, you should avoid nesting your product categories in more than 1 level of hierarchy. If you have too many categories in your shop to display all at once, choose your best selling categories for your main menu and lump your less trafficked categories in a separate tab. For my store, I decided to use a top-level, hover style drop-down menu as shown in the photo below.![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLNav.png)
3. Display Trust Factors On Every Page
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLTrust.png)
- Fast and free shipping;
- Easy returns;
- A way to reach customer support.
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLAsSeen.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLTestimonials.png)
4. Emphasize Your Unique Value Proposition
Users spend an average of 5.59 seconds looking at your website’s written content. And in those 5.59 seconds, you must capture their interest or else they’ll bounce from your page. Right off the bat, you must convey to a user exactly what you sell and why they should buy from your store over a competitor. What’s more, every single page on your site should communicate your unique value proposition. A unique value proposition is a concise statement that describes what makes your business special and outlines what your store does better than anyone else. The best way to show off your unique value proposition is to use an eye-catching image alongside compelling copy. For example, here’s the first thing a user sees on my home page above the fold:![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLValueProp.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLCatValueProp.png)
5. Optimize The Visual Hierarchy Of Your Product Pages
Every page on your site should have a single objective. And for your product pages, your goal is to get a customer to add to cart. When designing a product page, you must apply a logical visual hierarchy to your design. A visual hierarchy is the order in which a user processes information on a page and in the case of a product page, there must be a clear path to your add to cart button with as few distractions as possible. Here’s a screenshot of my old product page:![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/oldproductpage.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/newproductpage.png)
6. Simplify Your Checkout Process
With our old site design, we would regularly receive feedback from confused customers who weren’t sure if they needed an account to purchase our products. Here’s what our old checkout page looked like:![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/oldcheckout.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/newcheckout.png)
7. Optimize The Checkout Process For Mobile Users
4 out of 10 mobile users abandon their carts if they have a hard time entering their personal information. People don’t like entering their contact and credit card information using a tiny keyboard. What’s more, small buttons and too many form fields drive away mobile users. 79% of smartphone users shop online with their mobile devices, which is why you should optimize for mobile. These days, a responsive design is par for the course but you can still screw things up if you are not careful. Here’s what my checkout process looks like on a desktop:![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/newcheckoutshipping.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/mobilecheckout.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/autocorrect.png)
<input type="text" name="name" autocorrect="off">And to reduce frustration, you should also turn off auto-capitalization and auto-complete by adding auto-capitalization="off" and auto-complete="off" to all of your forms as well:
<input type="text" name="name" autocorrect="off" auto-capitalization="off" auto-complete="off">In addition, for phone number entry, you should always display a numeric keypad as opposed to a regular keyboard:
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/phonepad.png)
8. Add A Sense Of Urgency
Most customers like to window shop and the best way to get a visitor to take action is to create a sense of urgency. Whenever I run a sale, a big yellow countdown timer is displayed on every page of the website. Note: It’s important to note that we only utilize this timer when there is actually a sale going on. Otherwise, you risk desensitizing your customers or losing trust.![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/BBLcouponcountdown.png)
![](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/07/checkoutcountdown.png)
Final thoughts
Optimizing your conversion rate is an ongoing process. And testing your results is the only way to track your improvement. Never go with your gut and always listen to the data. After all, sometimes an ugly site can out-convert a beautiful one. Regardless, the design tips I demonstrated above will give you a solid foundation to start with. From there, you can further improve your website and optimize your conversion rate through repeated testing and tweaks. Good luck!Steve Chou
Steve runs the popular blog MyWifeQuitHerJob.com where he discusses how he made over 100K in profit during his first year of business with his online store, Bumblebee Linens. Steve also teaches a class on how to create a profitable online store.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…