Baymard guidelines for UX - Used in practice

In this blog post, I am going to go through all Baymard's guidelines and how they apply to famme.no. Note that I jump over quite a few where I have no comments, but will look through all guidelines during my analysis. Buy the premium Baymard access to see guidelines, explanations, annotations and much more. 

Homepage & Category Navigation

Feature a Broad Range of Product Types on the Homepage

 

As can be seen from the mobile and desktop image below, the way Famme solves this is by using small button links so that you immediately see many of the categories available. There are also more categories available, and most of them are advertised with banners below the button links. But testing with multiple screen sizes, we noticed that on 13-14 inch monitors, the buttons were not visible before scrolling, this might lead to an early abandonment of the site, and it is probably a good idea to change the height of the banner on desktop so that the buttons are visible on all devices when the homepage loads. 

 famme mobile homepage

 famme desktop product analysis

 

 Be Cautious if Displaying Ads on the Homepage

"Ads" like promotions and popups can distract users in such a way that it might leave a bad impression on the customer. They can also take up place in such a way that it is harder for customers to find the categories of products they want to explore.

famme promotion leggings

This ad takes up the whole page, it might be argued that we could use the screen real estate better to showcase the offer and other categories. Maybe we could make the height lower?

With regards to pop ups we have an email subscribe popup that shows up when the user tries to leave the site and when they are not already subscribed, if the tracking works. Pop ups can be annoying, but I think there is a lot of evidence that it works in terms of getting emails, so one has to weigh that against the cons. 

I do not think famme.no has problems with distracting ads. 

Tips on implementing Carousels 

famme.no does not use that, so I will not cover it. Get Baymard premium if you want to read more about it.

The home page should be an entry point to well-defined "Scopes"

This is a bit similar to the guideline about making a large selection of product types available on the home page, but not only should you keep in mind to have a large selection. You must also make sure that the customer understand the scope you send them to. 

I looked over the buttons and most of the categories makes sense. But for the "overdeler" category, we are actually just displaying the "overdeler" that are for training. That can be confusing, since customers might not know about our tops which are not for training, which are quite a few products. 

With that said training clothes is Famme's core, so it is probably not a big loss, but it is something to keep in mind that the scope must not "hide" products.

A better solution might have been to rename the button or send to a collection of all tops with a filter applied for training if we wanted to focus on displaying training tops. 

Especially on mobile, it is important that it is very clear if visitors are sent to a sub-sub-category, since they might otherwise misunderstand and think the sites selection is bad. 

Famme categories frontpage

 

Use bespoke imagery

This one is pretty obvious, and famme.no's homepage are not using stock photos or just boring product photos. But images can always be improved of course.

 

Consider Including the Main Navigation Categories Directly on the Homepage

This is something we already do, but it might be an idea to include a second list of buttons to other categories as well, as we have many categories to choose from.

 

Consider Personalizing Homepage Contents

We have no personalization of content on famme.no, it might be relevant to have something like "recently browsed", to let customers find back to products they have been looking at. This could be placed on the homepage, product or collection pages. But in general I think personalization adds complexity that is not worth it and that is many times not needed if everything else is good. 

But for some sites it might make sense, Oda allows customers to rebuy an order for example and personalize the homepage based on what has been bought previously, that has been helpful sometimes and something to look at implementing on famme.no as well. 

Always Highlight Core Product and Brand Features on the Homepage

We do have bestsellers on our home page, but brand features and policies could be more clearly displayed.

We have an announcement bar with:

"Vipps & Klarna | Fri frakt og levering samme dag* | 100 dagers åpent kjøp"

But the announcement banner can be easy to miss. We should add some of these are complementary USPs under the image banners.

We do promote our product group with 25k+ members for trust, which is important for the brand, but it could be much more clear that we are taking feedback from customers and are there to help them,  "personlig service". Embedding a review widget on the homepage can also help gather trust. 

Bottom line: They should have "no reason" to distrust the site after scrolling the home page.  

 

Consider Offering ‘Thematic’ or ‘Guided’ Product Browsing 

On famme.no we have no guided browsing and little thematic browsing.

What we could do to improve this is to add a sports bra wizard that we can embed on the sports bra collection, and link to in the sports bra products. 

If sports bra is a core product it could also make sense to embed on the homepage as well.

With regards to themes, we should focus on different sports types, pick out the most relevant sports types and make a landing page for each sports type which we can link to on the homepage. The landing page should clearly explained why and which  type of clothes we have are good for this sport, and have a clear call to action that goes to a collection page with all the items relevant for this sport.

The collection should be manually sorted to have the most relevant items at the top, and can contain other training clothes as well. I think that we should make the collections very simple and do not need tagging for the different sports type to create the collection, just a training tag and manual sort. In reality, people do use for example training t-shirts for all sports for example, limiting the collection with a would be error prone and reduce discoverability of relevant training clothes. 

 

Be Very Cautious When Using Default Site Scopes

On famme.no, we do not set default scopes such as Zalando, which automatically shows you the men homepage if you are logged in as a man. 

Thus this guideline is not something we need to think about directly.

But the problems discussed are still relevant, for example it is very important that it is easy to get out of your current scope if you have landed on the wrong scope.

The Search Field Should be Immediately Obvious on the Homepage

I think the search icon on the homepage on famme.no is visible enough for people that want to use it. It might be argued we should make it expanded by default on desktop, but I do not think there is much value added.

 Consider Promoting and Embedding Wizards Directly on the Homepage

I think we should look into adding a Leggings selection helper on the front page as that is a core product. For other wizards we can put them on the collection pages for the relevant products and maybe a landing page with all wizards. 

Carefully Consider How to Implement Country and Language Selection 

For famme.no we should improve this by adding a flag/language selector in the top right in the header on desktop, and in the menu on mobile.

In addition, it is probably a good idea for customer's to be autoredirected to the correct domain, but Google on the other hand does not recommend autoredirection in terms of SEO, so there are disadvantages to autoredirection on Geo-IP. It also becomes harder to test the site and can be error-prone with such automations. 

 

Ensure Visual Hit Areas Match the Actual Hit Areas 

Checking on famme.no, I cannot find cases of ambiguous paths, it is pretty clear in most cases where you are sent an each image banner just sends you to one collection. 

 

Load Search and the Main Navigation Before the Homepage Content

We use the Shopify Dawn theme that is very fast and user friendly, I do not think there is any problems with load speed that affects users.

 

Category taxonomy

Implement Product Types with Shared Attributes as Filters Instead of Categories 

famme.no suffers a bit from overcategorization. Some of this categorization is due to limited filters on the Shopify platform (by default) and not wanting to use apps. 

So we implemented "filter buttons" over each category to filter our leggings with pockets, shorts that are seamless etc.

Instead of this we should have a seamless filter on the shorts collection, and a filter for shorts that are good for hiking. Thus we can remove the buttons and replace it with some other relevant upsells / promotion of other relevant categories. 

But before deleting all subcategories, it is important to understand that 

1. Sometimes popular categories can make sense to have for landing page customization reasons

2. For SEO seperate categories can be crucial. Especially if filter results are not indexable which will be dependent upon the robots.txt exclusions setup for your store. 

For example the default Shopify robots.txt in Shopify excludes the collection urls with sort parameters, but these are added automatically when filtering on the Dawn theme we use, so filters for seamless shorts that actually is relevant for Google to crawl and index are blocked by robots.txt.

Category taxonomy famme

 

I think we should continue to have subcategories for SEO and landing page purposes, and then for product browsing we should use "top-level" categories, with product attributes as filters. If we change the filtering functionality so that the urls are crawled and indexed by Google, we could test deleting categories and redirecting to filter urls and see if we see any traffic loss for searches. 

Divide Categories and Sub-Categories into Manageable Chunks

When doing a quick analysis of all links in the header at famme.no I noticed the following:

  • Treningsbukse was missing products and maybe too few product's to be it's own collection? (consolidation possibility), I think it is fine as long as we put in the missing products. One thing to note is that famme.no has merged color variants into the same products, so we have many SKUs even if our product lists are not that big.
  •  We were missing t-skjorter under t-skjorte collection. 
  • Shorts collection missed products
  • Hverdagsjakker sent to all jackets, we should make a filter and send to the jacket collection with a "casual" filter for example
  • turshorts collection had a hiking pant in it.
  • turjakker has the same problem as hverdagsjakker
  • Truser has very few products, so it might make sense to sende to underwear collection with a filter on product type if we still want to link it in the menu for discoverability
  • A few of the accessories-categories are also pretty empty, it might be a good idea to re-evaluate some of those and rely on filtering instead

 

Avoid Redundant and Overlapping Categories

We definitely have redundant and overlapping categories/collections. But most of these are not displayed to users in the menu. We either have categories "for SEO" / landing pages. 

Right now I see we have a 100% overlapping category of jackets linked under both "training clothes" and "clothes" (casual). We also have a category "all underwear" and then subcategories in the menu. Same with accessories where we have "all accessories" and then subcategories. 

It might be fine with category and subcategory, but there should be a clear visual cue that the subcategories are under the main category, which we do not have today.

 

category and subcategory

Other than this I do not think the menus suffer from too much overlap.

 

Don’t Have Shallow Parent Categories

As of this writing, we do not have a "mega menu" on desktop, so this guideline is not that relevant. But it will soon be implemented in the Dawn theme as there is an open pull request implementing the change. 

But one disadvantage with our current setup is that there is no category for "all training clothes" in the menu for example, that might be relevant for exploratory browsing. If we added "alle treningsklær to the treningsklær menu it would be a bit "redundant" with the text "treningsklær showing once in the header and then again in the submenu. It might be a good idea to add that category anyways, but even better with a mega menu with a category -> subcategory setup like Zalando and many other larger sites have. 

Include an ‘Accessories’ Subcategory within Relevant Categories 

The idea is that visitors would expect computer accessories to be "closer" to the computer category. So linking accessories relevant to a collection makes sense. 

For famme.no we do not have much accessories that are very closely related (like USB stick for a PC), but showing resistance bands, training abgs and wristbands in the training category makes sense. 

I am not really sure if our definition of accessory makes sense in some cases, as we put caps, bags, gloves, mittens etc. inside it. 

Given our current range of accessories I would keep our accessories collection and maybe link a subcategory accessories in the training clothes collections.

 

Avoid Relying Solely on Thematic Categories

We do not use much thematic categories, so we probably have too little of it. I agree with Baymard that most users browse by product type, thus not using that primarily for product finding is not a good idea for larger stores. For D2C brands with few products, this advice is less relevant. 

 

Use Descriptive and Non-Site-Specific Category Naming

We do not use jargon or hard to understand category names.

 

Consider Having a “Best Sellers” Category 

We link bestsellers in the menu. Best selling = "social proof". 

Keep Category Naming Consistent  

We have at least one inconsistency I spotted. The "buttons" navigation on the frontpage has "koseklær" -> loungewear. While in the menu the same collection was linked with the text "loungewear". This is inconsistent and might confuse visitors.

 

Consider Displaying Very Popular Filters as Categories

When adding new filters on famme.no and removing our "collection as filters buttons". I noticed it was harder to reach popular categories. This guideline fixes this. We should implement shortcuts to the filters of popular categories, we can use the same method as we did before, but change the link to filters.

For example the "Seamless leggings" button can be linked to:

https://famme.no/collections/treningstights?filter.p.m.my_fields.seamless=Seamless

And similar for leggings with pockets. 

Replacing categories with filters can impact SEO for better or worse. It is important that at least some of the page changes when adding the filter. For example many bigger stores change the page title dynamically. The Dawn theme adds the filter value below the filters, so search engines will probably crawl that and give it some weight. But to really compete with standalone collections I think rewriting more of the page than what is done now is advantageous. 

Consider Having a “What’s New” Filter-Based Category

We already have a "news" category, although a bit screwed up from some technical mess where we deleted all products. We could probably get away with removing the news category and instead link to "all" or specific categories and then sorting on the creation date / sort by new -> old. Baymard recommends having it as a filter as well, that might be a good idea, Zalando puts activation_date=7 in the url to get the latest releases, but for us I think it is impossible to be that specific, so just relying on sorting is probably fine. 

Have the Same Subcategory within Multiple Main Categories when Logical

In our case, I think it makes sense to link to training shorts under "training clothes" and also link to training shorts under the shorts category. That could be one example for Famme and something we should keep in mind. Since Shopify has no support for subcategories, the breadcrumbs / SEO implications discussed in the guideline are not relevant.

 

Consider Having a ‘Sales’ or ‘Deals’ Filter-Based Category

Right now we have everything on sale, so not relevant.

Have a “View All” Sub-Category and Product Type Filter

We had this with the "filter buttons" on top of the collection pages, so that is something we should think about keeping and then using the buttons to follow the guideline with linking to popular filters as if they were category-links. 

 

Main Navigation

Make Product Categories the First Level of the Main Navigation

We do not have a redundant "products" or "categories" in the menu before actually reaching the categories.

Ensure Category and Subcategory Relationships Are Visually Indicated in Navigation Menus

This is pretty clear on famme.no. 

Don’t Promote Selection of Too-Specific Categories in Drop-Down Menus

I think we sometimes do this "vinterhansker" collection and "seamless truser" is only 2 products, that might turn some people off. 

 

Consider Having a “Drop-Down” Menu with an Intelligent Hover-System

Dawn is implementing hover-based mega-menu in a recent pull request, so this will soon be available on famme.no.

 

Sitewide Courtesy Navigation Should be Visually Separated from the Main Product Navigation

We have the contact us only in the footer, the login is visually separated from the main navigation. 

Have a ‘View All’ Option in the Main Navigation at Each Level of the Mobile Product Catalog

I agree very much with this one, since we do not have a mega menu as of this writing and do not show many subcategories in our menus, this is not an issue for now. I see we miss a "all training clothes" in the menu, both on desktop and mobile, so we should have those scopes for both casualwear and training clothes. We do have it for outdoor for some reason, but not the other two. 

Visually Differentiate Items in the Mobile Main Navigation Based on Their Importance

As for now we do only have product categories in the mobile menu, and visually differentiated login at the bottom. I see Zalando adds another color for the "sale" category in the menu. That might be a good idea as well! But right now we have everything on sale. 

Consider Including Thematic Resources and Guides in the Main Navigation

I think this might be a good idea when we get the mega menu implemented, which gives us more room to add a new cluster of links which are thematic. Maybe based on sports type or activity. Seasonal guides, style guides, celebrity favourites are other ideas.

They should not be mixed with the product categories. 

Don’t Interpret Hover as Selection

Dawn does not do this due to accessibility reasons. 

Be Cautious if Implementing Novel Navigation Menus

We do not reinvent the wheel for famme.no

Main Category Options Should be Selectable and Point to a Page Featuring Sub-Categories

Without a hoved-based drop-down, this guideline is irrelevant.  

 

Consider Showing Sibling Categories for Easy Scope Adjustment

On famme.no we could link to other sportswear "sibling" categories, for example to sports bras from the leggings category. Implementation: Category sidebar or "extension" of the main navigation. 

Provide Information Scent for Navigation Options in Jargon-Driven Domains

We do not have a lot of "bullshit" names. But we did have that before with colors and it was a mess. We used names like "duffel bag" for green based on pantone color names. Never again. 

Highlight Current Scope in the Main Navigation

Adding this to Dawn makes sense to me, but I think it might be redundant if you have good breadcrumbs. 

Have the First 1-2 Levels of the Site Taxonomy Implemented as Intermediary Category Pages

 I definitely think we have a lot of improvements we can do here. We do already have something that resembles "Intermediary Category Pages" because we use links at the top of quite a few collections to link to other relevant collection, but we always have a product list as well under. 

Specifically I think we should implement a "all training clothes" category and link to subcategories of "training clothes", we do not do that today.

 

Provide Clear and Representative Subcategory Thumbnails

Since users are often able to identify the content of images faster than they can through reading text, this might be a good idea to implement instead of the plain "button links" to subcategories we use right now. Important to avoid ambiguous or unfocused thumbnails.

Present Subcategories as the Primary Content on Intermediary Category Pages

We do this already by showing it over the product lists.

 

Consider Enhancing Intermediary Category Pages with Auxiliary Content and Links

We embed blog articles at collection pages, but it is after product lists, so not so often read probably.

Always Provide Direct Access to Products Depicted in Inspirational Images

This is all about setting expectations, I think we sometimes mislead customers by using banners where not all products are available. 

Consider Using Varying Thumbnail Sizes to Indicate the Relative Importance of Sub-Categories

For us this amounts to showing displaying leggings and sports bras with a more prominent thumbnail than training accessories for example.

Avoid Intermediary Category Pages for Small Product Catalogs

Save extra clicks for users. Since we are a D2C brand with quite a few products, intermediary category pages can make sense, but for most D2C brands this does not make sense. 

On-Site Search

Search types

I think in general, if search retrieves results based on title and description, and the description has enough information, that should cover for many of the guidelines. 

I do not believe thematic or non-product search is relevant for out store.

I looked into the report: "Top online store searches" in Shopify analytics and also "Top online store searches with no results". My conclusion is that the results we serve are appropriate and that for the few search terms yielding no results, only a few of them were relevant to fix. For example more of the sports bras could have the text "push up" I think and also there could be a bit more tolerance for typos like "thights", i.e fuzzy search.

Subjective, compatibility and symptom searches mentioned in the guideline are pretty much covered if the descriptions are adequate in my opinion. 

 

Search Form & Logic

 I think as a D2C brand we should not bother to have the search as visible as Amazon and Komplett as it is not as important for product exploration and finding.

That even is one of the guidelines: Deprioritize Search for Direct-to-Consumer Sites.

Still, a lot of useful research for larger D2C brands. 

Search Autocomplete

I think the one missing feature discussed on this topic is autocomplete suggestions.

One way to implement that would be to match a search against top searches that yielded results for other searchers. This is something that Dawn could implement, but that is probably not prioritized and we will not prioritize either. 

Results Logic & Guidance

The key takeaway from this topic is that our "no results" page could be much better at:

  • Guiding users to better search
  • Linking to our contact form / communicate that we are there to help
  • Linking to categories to make it easier to continue product exploration

Another interesting idea from Baymard was to highlight better matches differently. For example I see we have results for "sko" that are both shoes and socks where shoe is mentioned in the text. Here shoes should have been the most prominent search result. 

Results Layout & Filtering

I think most of these apply to larger stores, but the tip about making the number of search results very clear is something that might be improved. And also using load more instead of "number pagination"

Product Lists & Filtering

A prerequisite for good product lists and filtering is good product data. I started off by deleting duplicate tags, removing unused tags and looked over collections for consolidation possibilities. 

List Layout

We use a grid view (Vs. list view), and Baymard recommends that for visually driven products. With regards to list item height, Baymard recommend not having that too high and also avoid too much whitespace so that customers see as much products as possible, at least two. I do not think that is a problem on famme.no, I even think we make it easier than many sites by not displaying the same product over and over again in different colors. 

With regards to breadcrumbs on collection pages there is an open issue on the Dawn github, but for now we solve it by using "button links" at subcategories that always link to the broadest scope for that category, we have not consistently applied that to everything yet, but I think it is a good substitute to breadcrumbs. Especialy since we do not have anything called subcategories in Shopify and our product hierarchy is not that deep, this is not very important. 

Loading Products

 The takeaway from the "loading" tips from Baymard is that we should switch to load more for "pagination", and that if we use "page based" pagination, then we should improve it by making it easier to tap and also larger contrast.

I also noticed on mobile that when going into a product and back the scroll position was not maintained, I made a github issue on Dawn for that as well as for the load more implementation.

They recommended different amount of loaded products on mobile and desktop, for now I think it is fine with 50 on both as is max on Shopify. 

List Items: Product Info & Thumbnails

Most of the guidelines here are supported by default in Dawn, like the change of thumbnail based on variation filtering (different thumbnails based on filtering for color).

The one thing we might add is the review stars + # of reviews that Baymard recommends keeping in the product lists and maybe highlighting the products already in the cart. 

We might also consider if vital product information can be conveyed in the thumbnail, for example could the thumbnail of the resistance bands show it in use?

List Items: Interface & Hit Areas

 An interesting guideline here is regarding out of stock products that will come back. I was happily surprised that Baymard recommends letting customers buy "pre-order", as I have always believed this to be the case and there has been a lot of back and forth regarding it. As long as we can send the item in a reasonable timeframe, we should let customers buy it. I think 2-3 weeks is max, but might depend upon item. 

 

Filtering: Available Filters

First thing I note is that Baymard "always" recommends price filtering and filtering based on reviews. I am not totally convinced that this cannot be replaced by sorting, as sorting on price would solve the problem for those that look for cheap prices. With regards to reviews I am not really sure if adding the complexity of filtering based on it is worth it. 

Furhtermore we need category specific filters for all key product specs. We miss that for quite a lot of products.

One limitation is the 20 limit filter based on metafields, which might force us to use an app for filtering if we do not implement "filter with collections", but that is not ideal either. We also have some thematic filtering on season for instance, but that can be improved further to sport and more. 

Baymard recommends a 'sale' filter, but since we have an "everything on sale" strategy we do not need it. 

If one starts to have a lot of items with later delivery, it is definitely an idea to add that as a filter. 

A new arrivals filter only showing the products added the last X days might be a good idea, Zalando has a filter/collection for the last 7 days for many categories.

Filtering: Scope & Logic

All the scope and logic regarding filtering Baymard recommends is implemented in the Dawn theme except for some bugs that I know there are issues on. 

Filtering: Interface & Layout

The most interesting here for us was the "promotion" of popular filters, which we have started to implement. 

 

Sorting

An interesting guideline: Ensure that the first 10 to 20 products reflect the diversity of all major product types within the category.

Based on this I would say that we should manually sort the "all products" category and some others to show the breadth of the product range with the 10-20 products, right now there is a huge bias towards some of the training clothes. 

 

Product Page

Product Page Layout

Baymard recommends the "vertical layout with collapsed sections that we use today. The main takeaways from reading the research is that we should dynamically remove / indicate in title sections that are empty. For example if we have a review section, indicating in parentheses in the title if there are no reviews. 

The other thing is to use sections for "everything", so we use an app for embedding reviews under the other product information, but it might be an idea to embed it in a section so it will be easier for customers to find the reviews. Okendo that we use as an app for reviews now probably have a review widget that can work for this, or we have to do some custom theme changes.

Baymard's research also makes me reevaluate if maybe a long page without sections at all is better for our type of products since all information can be displayed within 1-2 viewports usually.

Product images

For product images we should have more feature callout images and maybe in some cases descriptive text for the most complex products.

One example on famme.no is that a few of the leggings with pockets has no images demonstrating the pockets in use. For some leggings it is even impossible to see the pocket (inside the leggings). So proper images have not been taken.

Image Gallery UI

We always use Thumbnails to Represent Additional Product Images like Baymard suggests. And we show everything on desktop, and a few on mobile. 

If possible, we should try to keep the swatches in the same viewport as the main product image, now customers have to scroll up to view the full main product image after choosing a color. 

With regards to zoom, our current implementation is a bit lacking I think, we should evaluate image overlays and zoom by hovering instead of click. 

The width that we use on desktop for images might be too little, Baymard argues for using 50+% of the page width in many cases for main images, that might be relevant for us as well. 

Product Videos & 360-Views

Videos should inform about product details and not "sell" the products. 3D/360 views does not replace good product images, few users use it when available. 

The “Buy” Section

The most interesting things proposed:

  • Allow "pre-orders" / buy temporarily out of stock items. Better than asking for the email if possible.
  • Promoting alternatives for discontinued products. Aggressively. For example by putting alternative products at the top of the page.

Shipping, Returns, and Gifting

I realize we do not have good return info on the product page. We do list "100 dagers åpent kjøp", which is return related, but nothing about the cost.

We can probably change the section "frakt" to "frakt og retur" and then write one short paragraph regarding returns with bolded text for the important parts. 

With regards to estimated delivery date, we could be even more explicit about that as well, even if we write that same day delivery is possible. Since that is only possible for some region, it is a bit misleading. 

 

Product variations

Since product variations are found under the same URL at famme.no, i.e we have put all variations like color as variants in Shopify, instead of different urls like most stores do, we have fewer problems with different data across variations.

Baymard recommends not pre-selecting size which we do now and we do not have a relevant size guide linked per product type which we should have. Other than that we follow the relevant product variation guidelines. 

 

Product descriptions 

  • We should consider adding product features in the product headlines. Github issue
  • We should avoid marketing copy in product text (we already do that)
  • We should always use both bullets and text. We do that most of the times, we also bold the important parts of the text for making skimming easier
  • Structuring by highlights is an idea we should try for important products that we do not do well today, Lululemon is a good reference for that.

 

User reviews 

  • Display 6 reviews by default, we only have 1 now. 
  • Provide attribute about variation chosen (size)

Baymard recommends deprioritizing reviews for D2C sites since users in general are less prone to trust reviews on these sites, often seeking external reviews instead. 

 

Auxiliary Content

  • Provide links to manufacturing ethics, material sustainability, manual and similar. We can for example link to that under product details. We write about it on some products. 
  • We should have Q&A for products, that is built into Okendo, so we might consider using it. Baymard recommends both site provided and user provided. 
  • When Featuring “Expert” Content, Provide the “Expert’s” Title or Qualifications Alongside Relevant Content => Might be relevant for cosmetics brand giving advice on how to use makeup. Not so relevant for much of our product line. 

Cross-Sells & Cross-Navigation

Right now we only have these up/cross sells on famme.no:

1. "you might also like...", under products and in cart

2. upsell after checkout where they can add a featured item, based on conditions that take what they have bought into account, to their order. This is done through the app checkout promotions.

3. in product descriptions by linking to matching items, for example matching leggings for a top and vice versa. 

  • Provide at least one separate cross-sell section that suggests only alternative products.

 One solution here is to change the product templates so that the product recommendations are replaced by "product from collection" and use a collection per product type.

 

  • Provide at least one separate cross-sell section that suggests only supplementary products.

 Same as over, but it can be a bit harder to implement in Shopify. One alternative is to store references to alternative products in metafields or simply add a metafield where we write a custom text about alternative products. If using metafields with product references one could "easily" display thumbnails of these products. One alternative to putting the thumbnails and cross-sell products under the products is to put the info under a collapsible tab with the heading "supplementary products/complete the look". 

  • Ensure the Relevance of Cross-Sells by Using a Matrix of Data Points 

 I think for us a manually created cross sell list for each product might be feasible since we are D2C. This might also lead to higher quality upsells.

 

  • Include Enough Information for Cross-Sells to Facilitate Evaluation and Comparison 

I have an idea, that we should put the upsells in a collapsible section with the title "similar products / alternative products" and "complementary products / complete the look", people interested in those things would very quickly be able to open the section with upsell products.

 

 Cart & Checkout

Shopify's checkout can be customized via checkout.liquid, but there are some disadvantages with editing it. For instance auto-updates stop to work, and since checkout is a very important step, one could easily "screw up" conversions. 

Checkout Types & Layout

Shopify's checkout is probably "battle-tested", and many of Baymard's suggestions like enclosed checkouts are already implemented.

But 1 thing is to minimize the number of form fields the user sees by default. 

Hypothetically on famme.no we can simplify in two ways:

1. remove country selector (Norway chosen in background)

2. full name instead of first name and last name

 

Shopping Cart & “Added to Cart” Behavior

  • Be careful showing 3rd party checkout options replacing the standard checkout. Can confuse users.
  • Allow users to save the cart.

Based on this I decided to remove the "shop pay" quick checkout button which no one in Norway know what is anyways.

Saving to cart is a more advanced feature.

Account Selection & Creation

  • Always Allow Users to ‘Show Password

I submitted an issue on github for this. Makes sense.

  • Always Provide the Benefits of Creating an Account

We do not provide any benefits for account creation, so there we have possibilities to improve.

 

Customer & Address Information

  • Maybe hide address 2 behind a link. I see quite a lot of customers using it, so not sure about this guidelines.
  • Fullname instead of first and last is not straightforward to do in Shopify. 
  • Would be great with autoselect of state / city based on zip

Shipping & Store Pickup

 

  • Use Delivery Date Instead of Delivery speed

I think that is something we should try to implement with estimates for all carrier rates.

  1. The shipping name (if included) should be secondary to the delivery date
  2. The delivery date must be as accurate as possible
  3. Delivery date ranges can be provided instead

 Payment flows & methods

  • Hide Coupon & Promotional Fields Behind a Link

I think that is the only guideline we might do something about. On mobile it is somewhat hidden, but on desktop it is "in your face".

 Accounts & Self-Service

 As the account management functionality is limited for now, most of the guidelines is a bit "overkill" for us, but something to keep in mind. 

If we implement wishlist functionality custom or through an app, we should change the account functionality.

With regards to returns, as Baymard suggest, we should look into offering more possibilities for returns. The main drawback today is the reliance upon a printer needed to initiate the return. This is something we should fix by offering return options that does not use printers, that should be the highest priority for us right now to simplify.

Right now the login page does not support OS 2.0 templates, but once it does, we can add some more information about what you can do, like track order, retur order, file a complaint and edit/cancel orders from the account page.

 

  • Provide a full order-tracking interface within the e-commerce site that includes, at a minimum, the estimated delivery day, all courier shipping events, and the courier name.

It would be great if the carriers provided an iframe url that could be used for embedding the tracking, that would make it easier to reduce the need to visit the 3rd party platform.

Back to blog