Did you know that 62 percent of smartphone users have made a purchase online using their mobile device in the last six months? And when you take into consideration that there are around 125 million consumers who own a smartphone, that percentage becomes even more meaningful.
Around 80 percent of shoppers use their smartphones to look up product reviews or compare prices when they are at the physical store, searching for better online deals. Plus, in 2016, online shopping was up by 45 percent, and in 2017, the US achieved a 77 percent online shopping penetration rate.
How Do Mobile Websites & App Designs Differ?
You might be wondering why some huge e-commerce websites invest a lot in responsive, mobile-friendly design, and why some websites create an app design instead. The fact of the matter is that both options come with their own pros and cons.
E-Commerce Web Designs
A responsive and mobile-friendly e-commerce website is displayed well on all types of devices and provides a better reach. Maintenance is easier and updates are easy to implement. However, since the website adapts to the device that’s displaying content, often the information cannot be presented on just one page. Sometimes convenience and ease of use will suffer. You often need to sign in and wait for the website to load, and even when you do sign it, there aren’t many opportunities to personalize browsing and shopping experience.
E-Commerce App Designs
Mobile app takes time to be developed, and you need to develop several versions to cover all types of devices. Reach is limited only to people who agree to install the app on their smartphones or tablets. Ongoing maintenance and updates have to be rolled out and approved by Google Play and Apple’s App Store. However, it’s much more convenient to use a mobile app to shop online, you are always signed in, the content loads way faster and as opposed to the website, and you can receive push notifications on your phone. Conversions are much easier to track, and personalization options are almost limitless.
So, what’s the right choice for brands? Should they focus on making their websites mobile-friendly or just develop a mobile e-commerce app? The right answer, if budget allows, is likely both. While market research will give you your final answer, e-commerce apps often improve a business's bottom line -- after all, people spend 90 percent of their mobile time in apps. However, if you have to pick one, choose to optimize your site for desktop, tablet AND mobile.
Plus, mobile e-commerce websites can be designed in such manner that they really provide all the benefits of the app -- and even mimic the desktop design perfectly. To inspire your own optimization, we rounded up a list of 10 mobile e-commerce sites that make shopping easy.
Top 10 Mobile E-Commerce Sites With Smooth Customer Journeys
This is a no-brainer – Amazon is the number one e-commerce website and the leading e-retailer in the United States. According to Statista, Amazon had $178 billion dollars in net sales in 2017. What's more, Amazon comprises 43 percent of all online sales in the US alone! They must be doing something right with their responsive and mobile-friendly design.
Amazon mobile e-commerce site works so well because it is very easy to complete the purchase. The fewer steps it takes to buy a product online, the better user experience you’ll provide to your customers. Take a look at Amazon’s mobile homepage. The search bar is so prominent and all buttons are tap-friendly. Predictive text input speeds up the search process. For people who just want to browse, Amazon offers intuitive categories that will adapt to events, holidays and personal preferences.
Notice how there’s just enough website text to provide basic information and entice customers to find out more. This keeps the user interface (UI) simple and uncluttered. Well-balanced negative space makes the available content pop out and attracts attention. If we are speaking about cutting-edge mobile e-commerce site design, Amazon isn’t the prettiest out there, but it’s definitely one of the most functional ones.
It’s great how they used simple arrows to let customers know what will happen when they click a category. Arrow to the right clearly indicates that the customer will be taken to another screen, and a downward arrow will slide the whole menu down. Another usability tip that Amazon is expertly providing, and all other mobile e-commerce sites should adopt is offering visitors the choice to open the full site on their mobile.
Etsy is a mobile e-commerce site that sells vintage and handmade objects. Unique is the perfect adjective for Etsy, from their clean and minimalistic design. It even has a simpler layout than Amazon, but these two mobile e-commerce websites can’t be compared since they have a different target audience.
Let’s see how Etsy fares. As of 2018, Etsy has more than 54 million members, who drove 1.93 billion in sales, and more than 31.7 million buyers. And most importantly, 65 percent of those buyers come from a mobile e-commerce site. When we are talking about responsiveness, Etsy is super friendly to mobile devices. The user interface is very intuitive, and search autocomplete function has almost mind reading abilities.
One great usability option that Etsy can boast with is its detailed search with in-depth filtering options. They truly live up to their motto – “We make it easy to find your thing”. Grid view and professionally shot pictures are a great way to present the bestselling products. Negative space is beautifully executed and fits perfectly with content dividers. Buttons are very large and tappable, especially where they’re needed the most, on the product page. Etsy has one of the most visually appealing layouts for the mobile e-commerce sites.
Oh and one cool fun fact about Etsy is that 8 percent of sellers are women.
One of the largest retail chains in the United States has completely overhauled its strategy and started an e-commerce business in 2017. Walmart made massive investments in this sector and the results are in – their online sales rose by 63 percent! Walmart isn’t Amazon but it’s really trying to be. When we look at Walmart’s mobile e-commerce site, we see that the user experience is one of the primary objectives.
Blue and white colors look good together, and orange-red is used for shopping buttons. Such a simple, yet effective color palette that uses plenty of negative space, just like the abovementioned competitors. Product search results are presented in a grid view and the information is presented in a unified manner. Some products have a Walmart best deal badge. Filtering and sorting performance are as expected, and predictive text input simplifies the product search. Product images and descriptions really shine on this mobile e-commerce site.
The 'read more' button on the product page is too small and barely visible, but the product descriptions and content with plenty of headers provide enough information for future buyers. Walmart’s cart is state of the art when it comes to mobile-friendly design and usability. Whenever a customer adds a product, and overlay mask appears and informs you about the product that’s added to the cart. It’s easy to see shipping costs, price, taxes, product quantity and additional services. Walmart also doesn’t miss the opportunity to advertise frequently bought products at this step. Checkout is a breeze, which can only aid conversions in mobile e-commerce.
4. Alibaba and AliExpress
Alibaba Group and AliExpress are the leading online and mobile e-commerce sites based in China, where manufacturers can host their virtual stores and offer wares to customers and clients all over the world. The size of Alibaba can be presented by following statistics: It has more than 50 thousand employees and its annual revenue in 2017 was more than $252 billion dollars. AliExpress, the B2C platform, had 100 million buyers in 2017 alone.
Let’s delve into AliExpress’ design and aesthetics. It’s worth noting that the design has changed over the years and now Aliexpress English website looks like any other Western mobile e-commerce we presented above. By using high contrasting color palate with red hues, AliExpress boldly attracts attention to the search bar, and flash deals and discount prices in various categories. There is plenty of negative space, so AliExpress did its homework well. Content is well presented in a grid layout, with enough moving sliders so that it’s not static and boring.
Popups promote signing in to AliExpress so that the platform could track buyer’s journey and provide relevant products. The coupons they offer for signing in are carefully placed right above the fold on the homepage are always attractive and aligned with brand colors. As soon as you land on the website, through a tablet or mobile phone, it is clear that sign-in is AliExpress’ predominant goal and a strategy to getting repeat customers.
Usability is obviously a priority for designers. It is obvious AliExpress is mimicking Google’s design. Just take a look at its main menu on the mobile e-commerce site. Looks awfully lot like a Gmail account. Customers have said what they think about AliExpress platform as well, with a rating of 4.8/5 on Google and more than 27 thousand reviews.
The shopping cart is intuitively designed in a grid layout, providing all necessary information to the customer. Since AliExpress is hosting so many different stores online, they avoided the cluttered and confusing shopping cart by dividing the items per store and filtered by the time of adding them. Then, customers can choose the sellers they wish to buy from.
Good design and functionality can be seen in AliExpress’ wish list and alert settings that notify customers when the items they’re interested in are on sale. AliExpress has one of the most comprehensive and functional filtering options during the product search. Filters even change depending on the type of product you’re searching for.
5. Space Goldman
Space Goldman isn’t a typical mobile e-commerce site, but it’s a nice example of how you can offer online services on a mobile-first website. In case you don’t know, a mobile-first website design means that the website is primarily intended for mobile and tablets.
This choice should reflect the type of business the company’s in. When we see Space Goldman’s site, it’s logical that he would opt for a mobile-first design. He offers the photo shooting services of his dog as a model, interacting with various brands and their products. The platform of his choice and where he showcases his portfolio is Instagram, naturally.
From user’s point of view, the website is very minimalistic and clean. It’s a one-pager with a streamlined buyer’s journey. This perfect example of “less is more” shines through website copy, number of options and even the layout. Transparent pricing for even huge brands like Colgate is definitely adding to the conversion rates. Large pictures one beneath the other are showcasing Space Goldman’s service in a flowing and unobtrusive manner.
The color palette is refreshingly based on soft pink gradients and off-white backgrounds, with a bit bolder pink buttons. Also, observe how opportunities for conversion are all around the website – plenty of buttons leading to purchases will definitely do well for conversions.
Apart from being so colorful and interesting, the Lush Cosmetics brand is a great example to showcase how a b-commerce (branded e-commerce) site can shine through with a limited color palette and very functional user interface. Simplicity and product-first layout will ensure positive customer experience to Lush’s visitors. Breaking out of the mold of dullness and static mobile e-commerce websites with sliders is an already seen pattern. And the pattern works for now. But Lush has stepped up its design game by featuring a GIF hero image and videos across product pages and showcasing the product they’re pushing at the moment on the home page.
Lush has a wide array of products that capture users with its natural colors and scent, so it’s interesting how such a colorful brand will opt for using a black and white color scheme – customers would even expect to be drowned in the sea of colors upon landing on the website. Saying it’s interesting doesn’t really do it justice because products clearly pop out and attract attention through the monochrome theme.
Instead of showcasing products in typical original packages, Lush again does something different by showcasing the product in action, the dollops, or just the main ingredients. Lush is a great example where minimalistic and out-of-the-ordinary design is guiding users intuitively to shop and learn more about the brand.
Showpo (or Show Pony) is a mobile e-commerce site that’s female fashion-based and oriented towards teens, students, and festival-goers. The user interface is quite typical, but functional, with several product categories and prominent search bar at the top. Why we chose it for this selection? It’s modern, hip, but mainly because the website design is perfectly aligned with product design – the color schemes, the hues, the showcased products above the fold, and even the picture frames complement the outline in just a bit chaotic yet sensible manner.
Negative space is present but isn’t dominating the design style. Buttons are very large and easily-tappable, so the user experience is clearly taken into account. Showpo isn’t like regular e-commerce mobile sites – they aren’t showcasing as many products at a first glance. They rather captivate visitors with large hero images whose aim is trendsetting and education.
Women come to Showpo for inspiration, look-books, finding what’s currently hot on the market, and the design is streamlining that and guiding consumers on a journey of discovery, with a hint of sales. Filters on product page could have been more detailed, but Showpo makes up for it with easy product selection.
The product page layout is presented with an even grid, but if you linger a bit, the product picture will change on its own. As soon as you select the size, the product is added to the shopping cart, making it easy to select the product and correct size with a simple tap. That’s also a bit sneaky because unaccustomed visitors would think that pressing the size will open up the product detail or pictures. There will be plenty of deleting from the shopping cart, but maybe this is the brand’s strategy. If consumers see the items already in the car, perhaps they will decide to finish the purchase.
The website copy is kept to a minimum, and if consumers want to know more about the product, the texts are efficiently hidden behind accordion buttons and categories, so that the website always remains product-oriented and promoting hero images.
When you land on Nike’s website, first you will notice the ad for the e-commerce app you can download, enticing users to engage with the brand more actively while using their mobile devices. You will buy more products if you follow the brand’s offering, and as we have explained at the start, it’s easier to track purchases and create target audience profiles with app data.
If you disregard the app ad, then the minimalistic approach to branding will be clearly evident from the first glance. There’s just the logo, search bar, shopping cart and the main menu that’s interestingly enough on the right. There isn’t even Nike’s name anywhere, aligning the website design with their shoe design and logo usage.
Nike’s mobile e-commerce site is a great example of intricate product filters, which are necessary when the product diversity is so large. The lack of website copy simply invites users to browse through products and learn all about it through icons, buttons, and shapes. Even though you have to work more to gather information about the product, the journey is still very intuitive and pleasant, and not at all frustrating. Scrolling images is refreshingly represented with lines instead of dots.
Nike’s minimalistic design with plenty of white and off-white negative spaces, bold and concise typeface and information presented with shapes and badges captivates users and engages them, increasing time spent on-site, but also increasing the quality of that time. By choosing this type of approach, Nike lets consumers fall in love with the products without boring them with unnecessary details that are right beneath the surface, shown to those who want them. More time spent on browsing than reading means showcasing more products per consumer.
Hobbycraft is a mobile e-commerce site specialized in arts, crafts, and supplies. With such a closely-woven niche that has numerous categories and even more products, intuitive user interface and mobile website design is an absolute must. Bundling those categories incomprehensible and self-explanatory wholes is a craft on its own.
Hobbycraft’s stationery organization is depicted through colorful icons with thin lines, supported by an equally light typeface that is in contrast to Hobbycraft’s thick, bolded logo. The color palette is also interesting, playing with brown, pink and green hues. Predictive text input in the product search bar is well optimized, depicting relevant text results you can click on, but Hobbycraft also uses the search process to showcase relevant products with pictures in the Top Results section, which is an innovation in the e-commerce mobile field.
One click is all it takes to add the product to the shopping cart, which saves time and eases the final checkout process. The lack of website copy is natural because it lets people buy what they came for, and if they want to learn more about certain products, the detailed view slides from the right. Hobbycraft also has resources like social media and their blog that promotes the products further.
Grid layout in two columns makes sure that all products are displayed with large pictures, especially because nature of Hobbycrat’s products is such that pieces are so small. Large green button reinforces shopper’s decision to add the item to the shopping cart. Instead of wasting button space, HobbyCraft uses a visual symbol for the shopping cart instead of the word. If browsing led customers so far down the product list, they can always use back to top button, which is a great functionality added value.
Fixed header with the prominent search bar and shopping cart items make sure that customers can refine their browsing and type what they need at any given moment.
Gifts.com is a mobile e-commerce site that cleverly employs various search methods and product categorizations. The layout is clean and with white negative spaces broken by colorful product pictures. Color scheme rests on dark red, which is a great color connected to strong emotions like love, which is exactly what you want in a gift-shopping website.
The Logo typeface is in cursive, which gives it a hand-written feeling, like a gift card. Products in the main menu are further categorized with the second level of the navigation bar in form of accordions. The search bar is easily accessible at the top, and just like Hobbycraft’s header, it remains fixed when you scroll around the website.
When you select the product, you cannot add it to the basket before personalizing it, and even though it takes up user’s time, they will appreciate it by going the extra mile to ensure the product they chose becomes the perfect one. The fact that you cannot avoid personalization tells customers that Gifts.com as a brand cares about their product experience and the end outcome, not just the sales.
Why Mobile E-Commerce Websites Are Important For Business Growth
Overall, functionality and mobile website usability is the key to a successful e-commerce website design. Take the time to invest in easy navigation and simple shopping and checkout.
For example, make the buttons easy to tap, add enough filters to help customers find what they are looking for quickly and efficiently, and simplify the checkout process as much as you can. Pay close attention to user interface and user experience, and make the design user-centric. Use interesting color schemes that will align with your brand identity and overall look, but don’t be afraid to take a different approach and surpass users' expectations.
Although mobile apps are a great investment if you have the budget for them, a strong and well-designed mobile e-commerce website will provide customers with a beautiful buyer’s journey and businesses with better conversions and ROI.
Do you know any great examples of mobile e-commerce website design? Share in the comments below.