How To Design A Killer Mobile Ecommerce Website That Will Boost Sales

Share On Facebook

This is step 2 of a multi-step series on how to design a mobile optimized website for ecommerce. In my last article, I unveiled my mobile ecommerce site along with some real data that I collected from my online store. In case you missed it, you can check it out below.

How We Doubled Our Mobile Sales By Designing A Mobile Version Of Our Website

Today, I’m going to talk about some of my goals and criteria in designing the mobile version of my online store website.

As you are reading this article, keep in mind that making an ecommerce site mobile is a lot different than making a blog or article driven site mobile.

For one thing, optimizing a blog is all about framing the content whereas ecommerce stores must also focus on photos and intuitive navigation.

To make a blog mobile, often times it is as simple as running large blocks of text down one skinny column. If you were to do that with an ecommerce site, you would drive away a lot of customers.

Second of all, when it comes to online shopping, having a minimalist design is much more efficient. After all, online shoppers don’t want to comb through gobs and gobs of text and product descriptions just to locate the item they want to buy.

Sure, they might want the “option” to read all of the verbiage, but you have to be flexible and give them a choice. Bottom line, mobile customers are even more fickle than their desktop counterparts.

So is designing for mobile phones a tough problem to solve? Yes! It’s a major pain, but I’ll try and break down the essential criteria in designing a killer mobile website.

Tailor Your Mobile Design For People With Fat Fingers

The first problem that mobile users face is that clicking on links using a finger is much less accurate than with a mouse.

And in order to create an effective mobile website, you have to understand the difference between “tapping” and “clicking”.

I’m not going to lie. I didn’t really fully comprehend the concept either until I watched my little 4 year old daughter shop on our site.

One day, I decided to show her what Mommy did during the day by directing her to our online store website on my iPad. So I handed her the tablet and watched closely as she navigated around the site.

Me: So if you touch right there, you can see our “About Us” page. And if you click there, you can see some really pretty products that we sell in our store

Daughter: I want to see some pretty products Daddy.

Me: Okay, go ahead and touch “Bestsellers”

(Daughter taps the wrong link)

Me: You have to pinch to zoom in first and then touch it

Daughter: I’m sorry Daddy, my fingers must be too big.

Big FLASHING RED light! How the heck could my 4 year old daughter’s fingers be too big? In fact, she found the first problem with our desktop website. Our text links were too hard to tap!

The main problem with mobile users is that they don’t use mice so they can’t tap on links very precisely. Therefore, all text based links must be converted into large buttons that can easily be pressed without accidentally hitting an adjacent link.

Never Make A Customer Scroll Sideways

This one is actually pretty obvious, but for some reason I never saw the big deal until I actually tried to shop at my online store on my cell phone. Having to zoom in to click on links followed by zooming out to see the pictures was a major pain in the butt.

Therefore, creating a single column website that automatically adjusts to the width of a cell phone screen was my number 1 criteria. In addition, I also discovered some areas on my desktop site where I used mouse hovers to enlarge pictures from a thumbnail.

Because there’s no mouse on a phone, these images were either not getting blown up properly or taking up the entire screen when someone accidentally did tap on it.

Make Crucial Navigation Elements Accessible

This is probably one of the hardest parts of mobile website design and I’ll go over all of the tradeoffs that I dealt with in a future article.

But in a nutshell, you have about one eighth of the screen real estate as you do on a desktop and you still have to manage to cram all of the important navigation elements onto a 4 inch screen.

In order to figure out the most important elements of your site, you have to rely heavily on your analytics. Figure out which pages a customer looks at the most and make those pages the most easily accessible on your site. Any filler pages or non-crucial content should either be pushed all the way down to the bottom or removed in its entirety.

If you thought that the search bar was important for your desktop site, it becomes even more crucial that your mobile site has a search bar present at all times. People get frustrated easily on a phone so the easier it is to find a product, the better.

Mobile Sites Need To Load Quickly

With mobile connection speeds and mobile processors getting faster and faster, this will probably become less of a factor as time goes on.

However, right now phones are largely limited by processing speed and connection speed. Therefore, it’s important to create a mobile website design that is leaner and faster to load than your desktop site.

According to the Gomez Group, mobile customers expect their page to load in under 5 seconds or they are outta there.

Right now, my desktop site loads in a little under 2 seconds on a cable modem connection. Since phones have much higher latencies and slower bandwidths, that means I need to cut down on the image sizes for my mobile site.

Phone screens are only 4-5 inches anyways, so there’s no reason to send a customer a high res photo when a small photo will work just fine.

Here are some other ways to make your website load faster.

Too Much Text Will Overwhelm A Customer

When I first designed my desktop site, I made sure that I wrote a decent amount of verbiage for every category and product description.

Not only was this good for providing a customer with more information about my products but it was also beneficial for SEO as well.

On mobile however, the problem is that when you take a whole lot of text and compress it into one skinny column, you get a ton of pages to scroll through.

When shopping on a phone, pictures are much more important than text and you absolutely don’t want to have someone scroll through pages and pages of verbiage just to get to the “Add To Cart” button.

The best way to deal with this problem is to use “collapsible” elements in your design.

Give a customer the choice of whether they want to read the descriptions or not. Provide as little information as possible up front, and let the customer explore your products on their own volition.

Conclusion

What I described above pretty much outlines most of the goals that I wanted to achieve with the mobile version of my online store website.

In my next article, I’m going to talk about some of the many tradeoffs that I had to make in order to complete this mobile project within a reasonable time frame.

Unfortunately in the real world, it is not always possible to get everything you want without a lot of sacrifice. As with any task, you have to weigh the development costs with the potential gain. My next post should be interesting so stay tuned!

Ready To Get Serious About Starting An Online Business?


If you are really considering starting your own online business, then you have to check out my free mini course on How To Create A Niche Online Store In 5 Easy Steps.

In this 6 day mini course, I reveal the steps that my wife and I took to earn 100 thousand dollars in the span of just a year. Best of all, it's absolutely free!

Share On Facebook

Similar Posts

Have you read these?

12 thoughts on “How To Design A Killer Mobile Ecommerce Website That Will Boost Sales”

  1. apatel says:

    We always read “my wife”, “my daughter’s mom” but never seen her. Is she Net shy? :)

  2. What you experienced for an e-commerce site applies to affiliate sites as well – looking forward to how you implemented all the above. I’m using WordPress so I’m sure it’s as easy as finding a plugin to do – for instance – the collapsible content, or I could invest in themes with that coded in, or worse yet – actually learn to code.

    Great tips here, Steve – wondering if you outsourced a lot of this or did it yourself?

    1. Hey James,
      I was considering outsourcing this at first since I have very limited time, but I ended up doing everything myself. I’ll talk about this some more in the next few articles. It was a tough decision.

  3. Helpful article, Steve. Thanks for sharing this.

    Your advice is good and using your 4 year old as a usability tester was genius! Who better to view the new tool without preconceptions than a child?

    1. Hey Scott,
      Do you need any usability testing done for your site? My daughter will work for gummy bears and ice cream.

  4. LOL.
    Thanks but I have 3 little beta testers in my house already.

    I regularly ask my wife for her impressions on my sites but never have tried asking the kids.

    A good tip I’ll share with others, too.

  5. Yes you are right when you said no side widget necessary for a cool site and links should be visibly obvious and intuitive.

Leave a Reply

Your email address will not be published. Required fields are marked *