Top Ecommerce Web Design Trends from January

A collection of our favourite ecommerce web design trends, tools, and tactics from January 2016.

​As we all know, the world of ecommerce is constantly evolving. New technologies, tools and tactics are emerging every day that help merchants expand their businesses. Given our role as their partners, it's our job to remain current and often drive these emerging trends.

With the New Year upon us, I'm restructuring my monthly contribution to the Shopify Web Design and Development Blog to focus less on generalized resources and more on the thoughts running through our minds and where we see things going in the world of ecommerce.

Expect to see a bit more 'behind the scenes' thinking and some topics that are just conversation starters, things we're still exploring that this community can discuss collectively. I'd like to share a few of those things with you, hoping that it might help expand your own practices and benefit the merchants you serve.

1. Designing what matters

At our firm, Growth Spark, we tend to take a data-driven approach to our design strategy, at least when that data is available. Other the years, we've observed something rather interesting across all of our clients. We all know that the main driver behind the design requirements for any ecommerce website primarily stem from the number of unique templates that need to be designed and coded. Your client can have 10,000 products, but if they're all using the same template, it only needs to be designed once.

If you dig into the analytics of most ecommerce websites, you find that a majority of time spent on the website is on a minority of templates. Add up the total page views over whatever period you'd like and you'll often find the bulk of time is spent on the Homepage, Products Overview and/or Products Detail. Why then, do we fuss around with the myriad of other templates that don't represent a bulk of the user experience? Why spend significant time and money designing these templates beyond ensuring they meet standard best practices and work properly?

We've heavily adopted this mindset, which is largely related to the Pareto Principle or 80/20 Rule. Applying the principle in this case shows that 80 per cent of the user experience is represented by only 20 per cent of their time spent (i.e. templates) on the website.

In practical terms, we've used this idea in scoping out our projects to differentiate between what we call 'Core Templates' and 'Non-Core Templates'. Core Templates are those that drive the user experience and thus should be thoughtfully and uniquely designed. Non-Core Templates are those that need to work properly, but don't require any unique structure or functionality.

When it comes to designing a Shopify website specifically, we utilize the Timber Theme Framework as the base for all of our themes. Out-of-the-box, it provides the necessary structure and functionality for all of our Non-Core Templates. These leaves us only having to design a handful of custom templates that will truly impact the customer experience.

Timber is a great framework to use for Shopify, but other frameworks, such as Bootstrap and Foundation, can also be utilized for both Shopify and non-Shopify projects alike. In the end, it's simply a matter of finding a theme framework that your team is comfortable with and modifying your design process to focus exclusively on designing what matters.

You might also like: 6 Tips for Building a Web Design Process That Boosts Your Team’s Efficiency

2. Designing the little things

In having adopted this approach of Core Templates vs Non-Core Templates, we've gained another major insight into the design process. Users are generally quite comfortable with standardization when it comes to the experience of an ecommerce website.

They like knowing that the cart is accessible in the top-right, that product images are on the left, and that 'buy now' buttons are generally under the product description. As consumers, we've all been conditioned by major retailers, such as Amazon, to have certain expectations of our online buying experience. Adhering to these standards ensures customers are happy and comfortable across our client's website. It doesn't, however, WOW them!

The insight we've actually gained is that the 'little things' really matter in the customer experience. They want the structure and navigation of an ecommerce website to be familiar, but they don't want the experience to be mundane. This is why we've turned our attention to finding minute details where creativity and uniqueness can be expressed. Paying attention to these smaller elements really allow our client's brand to come across to the user, even if the 'structure' of the site is fairly standard.

One of our favorite examples of the 'little things' is in creating unique SVG animations that personalize the often tedious loading process of a website. Rather than your standard moving circle, we play around with using custom SVA elements that truly embody the client's brand.

One example is the loading graphic we created for Johnny Cupcakes. It's fun, simple and speaks directly to their brand. It only appears for a second or two, but it's enough to let the customer know that they're in for a fun buying experience. Libraries such as Snap.svg make this sort of thing easy to implement. Other 'little' things we pay attention to that are worth some embellishing include: product badges, 'buy now' buttons, 404 error pages, 'add to cart' animation, image hover effects, etc. Consider adding any one of these, or some of your own embellishments, on your next project.

3. Making search an experience

When it comes to on-site search, many ecommerce companies treat it like the black sheep of website functionality. They'll utilize the default searching capabilities of their shopping cart or perhaps drop-in a Google search form. We've evolved our thinking on the role of on-site search plays and have found it to be a hugely under-utilized opportunity for merchants to increase conversion.

Users that have entered a website knowing exactly what they're looking for have a higher likelihood to purchase than someone who is casually browsing. By not catering to this 'purchase-ready' user, we're basically throwing away money.

Luckily, upgrading your client's on-site search functionality can be fairly straight-forward, as a number of third-party platforms have emerged offering it off-the-shelf. A few examples include Nextopia, Swiftype, and Algolia. Naturally, there are differences between these platforms, but the core features are fairly consistent. The features that have us and our clients most excited are Real-Time Search Results, Search Filtering, Featured Search Results, and Search Analytics.

Real-Time Search Results are becoming increasingly common on major retail websites. It's where a list of results appear underneath the search bar just as the user is typing out their query. Those results might be purely text or include entire summaries of product information.

Search Filtering allows users to filter through the results they see after submitting a query to help narrow-down the list of options. By default, many ecommerce platforms will show any content (product or otherwise) as part of the results with minimal differentiation or relevancy. One of these third-party tools provides additional filtering capabilities that allows the user to personalize the results they see.

Featured Search Results allows merchants to customize how they'd like search results to function on a per-query basis. This allows merchants to ensure certain products are always promoted, useful when trying to liquidate inventory, highlight a sale, or test new product offerings. In addition, merchants can customize the results for any search terms that might lead to the dreaded 'no results found' message. Rather than leading your user to a dead-end, provide a useful 'other suggestions' list of results for common searches.

Finally, Search Analytics provides merchants with in-depth information on what users are searching for and their behavior within those search results. They shed light on products customers might be looking for that aren't in stock, terms used to describe products that might not be included in product descriptions and much more. These analytics can serve as a major source of insight for exactly what your client's customers want and tailor future marketing or design decisions.

Have something to add to the discussion? We want to hear what you think! Join the conversation below...

You might also like: 2 Real-Time Features That Every Developer Should Include in Their Ecommerce Sites