Design and User Experience

“We see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.”

– Jeff Bezos, founder of Amazon

Every interaction with a customer — from choosing to stop on an ad to looking at your domain name to browsing the website  — is your chance to ‘host’ the customer. 

This approach should push you to pay more attention to details, anticipate customer needs, and constantly look for ways to improve their experience. This would include:

• the quality of the product offered
• the quality of design and user experience 
• the quality of the content 

‍

But in this chapter, we shall cover only the design (brand identity) and user experience.  

The first step towards building the brand identity of your e-commerce store is to choose the right logo. 

How to choose the right logo for your e-commerce store?

An e-commerce logo is a combination of text and symbols, to express your brand identity. Often it is the first thing that a customer remembers when looking at your product, social media pages, or website.  

The 3 key principles before choosing a logo that you must remember: 

• Reflect the essence of your store and products to build trust.  
• Must be simple, easy to recognize, and aesthetic.
• Can look good in multiple contexts or mediums like print, digital displays, and merchandise. 

‍

Look at the logo of Nike, for instance. 

The Nike Swoosh is the perfect example of a logo. It is simple, memorable, and perfectly captures the essence of an athleisure brand. Its versatility allows it to be featured on a wide range of products, from shoes to apparel, with ease.

If you’re looking to create a perfect logo for your e-commerce store, here is a list of logotypes with brief definitions and examples:

‍

1. Wordmark (Logotype): A text-only logo using the company name.

‍

2. Brand mark (Logomark or Pictorial): A symbol or icon without text.

‍

3. Combination mark: A logo combining text and a symbol.

‍

4. Dynamic logo: A flexible logo that can change in appearance.

‍

5. Emblems: Text inside a symbol or icon.

‍

6. Letterforms: A single letter used as a logo.

‍

7. Lettermark (Monogram): An acronym or initials as a logo.

‍

8. Mascots: A character representing the brand.

‍

9. Abstract logo: A non-representational symbol.

Ideating and designing a logo is no easy feat. You could choose to outsource it to a professional or you could try your hand with AI generators like Looka who help you design your logo in a few simple steps.

• Step 1: Name your company and slogan (optional)
• Step 2: Choose the industry and keywords
• Step 3: Choose images for reference/inspiration
• Step 4: Create your colour palette
• Step 5: Choose relevant icons

‍

And ta-da, your logo is ready for use. 

‍

Choose your design template 

Once you have your logo ready, use tools like Canva Color Palette Generator to build a colour scheme. 

‍

With the help of AI tools, logo and color palette you can easily create a brand template for yourself. Here’s how:  

• Style Transfer: Platforms like Dall-E 2 or Midjourney can generate design concepts based on text prompts. You could input descriptions of your logo style and colors.

• Layout Generation:Tools like Figma's Auto Layout or Adobe XD's Auto-Animate can help arrange elements based on your input.

• Template Customization: Wix ADI or Squarespace's AI-driven template selector can suggest layouts based on your industry and preferences.

• Design Refinement: Use Canva's Magic Resize or Adobe Sensei features to adjust designs for different formats.

• AI-Assisted Mockups: Smartmockups or PlaceIt use AI to place your designs into realistic mockups.

‍

Remember, AI tools are aids in the creative process. You'll still need to make final decisions and adjustments to ensure the template truly reflects your brand identity and meets your specific needs.

‍

Tips for creating a seamless user experience

‘I’m experience-obsessed. I want the customer journey to be a steady flow from start to finish. No bottlenecks. No interruptions’ says Piriya Kantong, Senior Online Marketing Analyst, Gogoprint. 

The aim of e-commerce UX is not just for the aesthetic but to decrease user friction in the hope of increasing engagement and, as a result, boosting sales.  

By 2025, mobile sales should more than double, making up 44.2% of retail e-commerce sales in the US. To tap into this market, you need to optimize for a mobile version. While Shopify creates responsive design depending upon the device, here are a few things that you need to keep in mind: 

1. Choose speed over aesthetics

“In general, be careful of flashy features,” says Bull and Cleaver’s Daniel Patricio. With the variety of stores available, your customers will be intolerant to even the slightest delay. Hence, fast loading time isn’t just an advantage—it’s a necessity. 

‍

Slow-loading sites negatively impact your searchability, SEO rank and drive a higher cost-per-click. Infact Deloitte’s results showed that a mere 0.1s change in load time can help increase conversions by 8% for retail sites.

‍

To improve your website speed, here are a few strategies that you could apply: 

• Minimize third-party providers; use defer attribute and place scripts at body end to optimize loading.
• Minimize unnecessary design elements,  animations or custom fonts, and only focus on what the shopper needs. 
• Break up the information on several shorter pages instead of long product pages, to digest information easily. 
• Place large images at page bottom; use JPG over PNG, and prefer small, high-quality videos to GIFs for faster loading.

‍

Curious about your page speed, check it out on PageSpeed Insights now! 

‍

1. Intuitive Navigation

Intuitive navigation isn't just a nice-to-have—its effect is extremely powerful on conversion rates, directly impacting your bottom line. To enhance your site's navigability, here are a few strategies that you can implement:

• Implement a clear, logical hierarchy that mirrors how users think. Add a mega menu with descriptive, action-oriented labels to reduce the clicks needed. 

• Add breadcrumbs to help customers understand where they are and where they can go next. Keep the shopping cart visible and accessible from every page, reminding users of their pending purchases. Choose a sticky add-to-cart bar with animations offered by solutions like Vitals, for at least 7.9% more completed orders. 

• Implement a hamburger menu and easily tappable buttons for easy access to all sections. Design for vertical scrolling and one-handed use for ease. 

• Offer predictive search for quick product finds through Vitals and comprehensive filtering options to help shoppers find exactly what they're looking for, increasing the likelihood of a conversion.

‍

As Jeff Bezos famously said, "The best customer service is if the customer doesn't need to call you, doesn't need to talk to you. It just works." Try some user testing with tools like UserTesting or Hotjar to see how real people interact with your navigation.

‍

2. CTA buttons

In a 2022 study by the Baymard Institute, 70.19 % of online shoppers in the US said they’d recently abandoned their carts at checkout.

Apart from the “window shopping” segment of shoppers, most cart abandonment issues can be resolved through simple changes including: 

• Keep a simple and minimalist approach without multiple graphics, links, or fonts. Instead, use large input fields that are large and finger-friendly.
• Offer different payment options to cater to a variety of shoppers. 
• Cut your form elements by half—and (if possible) add a guest checkout feature, to make the process less daunting. 

‍

Pro tip: watch real shoppers using your e-commerce store. E-commerce Warriors watched Hotjar Recordings to realize that shoppers could not find the size option, which prevented them from checking out. With new design and color options, they decreased friction and improved conversion.