Go back

Design and User Experience

Chapter 1: Setting Up Your Online Store

October 29, 2024

10 min read time

“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. 

Logo Nike

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.

Wordmark examples
Turbologo

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

Brand mark examples
Jessica Jones Design 

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

Examples of logos that combine a symbol and text
Jessica Jones Design 

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

A flexible logo that can change in appearance.
Malu Design 

5. Emblems: Text inside a symbol or icon.

Emblems: Text inside a symbol or icon.
Fabrik Brands 

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

Letterforms: A single letter used as a logo.
Tailor Brands

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

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

8. Mascots: A character representing the brand.

Mascots: A character representing the brand.
Tailor Brands

9. Abstract logo: A non-representational symbol.

Abstract logo: A non-representational symbol.
Vecteezy 

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. 

Sample logo for a candle company made with Looka
Sample logo for a candle company made with Looka

Choose your design template 

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

Colour palette generated based on the sample logo
Colour palette generated based on the sample logo

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. 

The all-in-one app to grow your Shopify store

Start free trial