Must Do’s for an Ecommerce Site
One. Design for your Audience
Does the design coincide with your audience?
Example: Morris and Sons, a men’s clothing boutique, uses elegant typography with masculine colors that reads quality, craftsmanship, gentleman and investment. Tailoring to their exact audience!
Two. First Clicks
Navigation is often the first choice for clicks from the customer, so leveraging this area to get the consumer where you want is key. As it’s the first page element, simplicity and the use of contrast is beneficial. The eye is drawn to areas of contrast and pops of color.
Example: The navigation from Sewingmachinesplus.com is on a dark red background, which is a stark contrast from the white background of the site. Also, red is a bold color that attracts the eye.
Three. Micro-interactions are Macro
You can’t start a fire without a spark. Micro-interactions are any interactions that aren't particularly necessary but help visually as an indicator for the user.
Example: Again, Sewingmachinesplus.com is the simplest example for explaining a micro-interaction. When you click the navigation, the carrot arrows have an animation. They rotate 90% and fix into place. This may seem unnecessary but it triggers that something is happening and this creates action on the screen. You want your websites to be alive and have movement. This helps the user flow through the site, from step to step. To repeat, micro-interactions are small indicators that spark, or show, that activity is happening after a click or hover, typically by an animated state activated by the user. If you want an example that goes above and beyond that, please take a look at the Pro Football Hall of Fame. Leave it to the Pros.
Four. Content is king
Shopping is an impulsive sport. The shopper wants to see the product, price and add to cart. Now, how do you fit the content in without obstructing their path to checking out? Text areas can be strategically placed and styled to have that seen/unseen effect. If you are looking for it you’ll find it, if not your eye will dismiss the text. This is desired because you need those keywords to bolster SEO value.
The Example: JOIA has a minimalist design, highlighting their dainty jewelry with a lot of hidden content. Theses content areas are made up of two text blocks for deals and getting to know the brand as well as lengthy product titles. JOIA has a lot of merchandise on the homepage and the corresponding titles are styled in a light text without obstructing the product. Additionally, take note of their product pages where the price is next to the ‘add to cart’ button. There’s that trend again: Product > Price > Add to Cart.
Five. The Comeback Customer
Keep ‘em coming! What’s second best to adding to cart? Adding to wish list or saving for later. Having that option to resume where you left off is crucial, while also being reminded on social media of marketed products.
The Example: Discover your desired clothing and save to wish list at the click of a heart… That’s what you’ll come across on Discovery Clothing’s website. Each product in the listing and detail pages has the ability to add to wish list. The best part? The wish list is located in the header, where you can locate it by the matching heart icon.
What else is Discovery doing to create a personalized user shopping experience?
They have an Instagram feed with a hashtag to include their audience (#discoverygirl). The social media feed is a free marketing tool showing real shoppers wearing their products. This is another way to get the shopper viewing your products again from another platform. Ultimately, this is will entice “the comeback customer” to return or add to cart.
