UX/UI Trends Amongst Non-Dairy Drinks Brands

Key Takeaways

7 out of 9 brands in the competitive set saw a sizable increase in website traffic in April 2021 (vs. April 2020). The visits growth was driven by mobile traffic — on average 69% of the web visits come from mobile devices. Load speed is a determining factor of whether users will interact with the brand’s website — 90% of visitors will bounce off if a website takes ~5 seconds to load. Hence, it is critical to continuously check and optimize web content as well as follow best web development practices to ensure fast loading speed. While faster is better, <2 seconds load speed is a good benchmark to aim for. There are more trends and tactics non-dairy brands deploy to effectively engage website visitors: 

Trends — User Experience (UX): When it comes to website usability non-dairy drink brands follow common best practices. For example, a trend of moving the navigation menu to the bottom of the screen has been observed in websites across many different domains. Vegan brands experiment with how they display the menu content — list style (like Chobani) is a common way to treat navigation links; tiles with images (like Riviera) resemble in-app experience. Other brands leverage the lucrative bottom-of-the-screen area to feature a call to action button. Users heavily rely on the internal search function when browsing websites. Hence it's important to find a visible location for a search bar. Integrating stockists' search is a common practice for both e-commerce and non-e-commerce websites. To make this functionality more convenient for users, brands should consider enabling visitors to choose between the location list or map view. 

Trends — User Interface (UI): When it comes to UI, brands aim to amplify their brand attributes via using natural and product textures. Oatly and Silk Canada use paper textures on the section backgrounds and Elmhurst and Forager work with product texture backdrops to convey taste qualities. The use of icons is another common way amongst non-dairy brands to call attention to key product features, such as vegan, GMO-free, gluten-free and others. Many brands opt for bold typography with raw edges that often has a handwritten style — an effective way to compliment natural textures and further amplify the naturalness of the product. Embedding Instagram feed into the webpage is a common way to maximize content reach and convert visitors into followers.

7 out of 9 non-dairy drink brands in the competitive set saw a significant YoY website traffic increase in April 2021.  

‍

Share of traffic coming from mobile devices outweighs desktop traffic. On average the brands in the competitive set have 69% of visits coming from mobile, where Almond Breeze has the highest mobile share (84%) and Milkadamia (47%) the lowest.

‍

While desktop visits still outperform mobile interactions in terms of visit duration, pages per visit and have a lower bounce rate, mobile traffic saw a year-on-year +3% increase in visit duration and -4% in bounce rate.

To cater to consumers’ website usage patterns brands need to adopt mobile-first design thinking. 69% of consumers use a mobile device for product research while shopping in-store. 

‍

Loading speed is a determining factor of whether users will interact with a brand's website or not. Visitors are not willing to wait for the website to take 5 seconds to load and 90% will bounce off. 

While “the faster the better” is the rule of thumb when it comes to mobile site optimization, a loading speed of <2 seconds is a good benchmark to aim for.

‍

Minor Figures and Califia Farms have the fastest loading mobile websites in the competitive set — both load in 1.6 seconds. At the same time, Riviera and Silk Canada have the two slowest mobile sites that take 7.1 and 5.6 seconds to load. 

‍

Unoptimized images are usually responsible for slow mobile site performance. Both Riviera and Silk Canada websites use images in the background, which can significantly slow down the loading speed.

‍

The main trends observed in non-dairy drink brands:

User Experience

1. The bottom of the screen navigation is more accessible than the upper right corner.

Users might’ve noticed many websites (from LinkedIn to Airbnb) moved the navigation menu to the bottom of the screen from the traditional upper right corner location. This approach has multiple benefits:

• Resembles app experience 
• Convenient to reach for menu controls
• Prioritizes website pages

In Chobani’s example, bottom navigation disappears when a user starts scrolling the site, to activate it a user has to scroll up.  

Riviera aimed to further mimic an in-app experience and imitated notifications to catch mobile visitors’ attention. 

2. Brands leverage full-width search bars or tile menus to the expanded mobile menu.

Chobani opted for a regular list menu style, while Rivier took it one step further to resemble the app experience and created a tile menu with product icons. 

• Chobani added a visible full-width search bar at the top of the expanded navigation menu. 
• Both brands placed a menu exit icon in the bottom right corner, where it is the most accessible.

3. The accessible bottom-of-the-screen area can be used for the main call to action.

Other brands leverage lucrative bottom-of-the-screen real estate to place the most important CTA buttons while keeping the website navigation at the top.

• Elmhurst prioritized their referral program signup page (bottom left) and shopper’s card. 
• Milkadamia encourages visitors to learn more about the brand’s sustainability practices and invites them to explore the “It’s R Choice” page.

4. Internal search helps users navigate websites faster.

59% of web visitors frequently use the internal search engine to navigate on a website and 15% would rather use the search function than the hierarchical menu. (Source).

Navigation is more complex on mobile and since people are likely to be engaging with the website when they are pressed for time (for example in-store), brands have to ensure users find what they need as quickly as possible. 

5. Map view location search eases users’ shopping experience.

Store locator is an important function regardless if a brand has e-commerce or not. Brands in the competitive set leverage the Destini plugin to manage their store list.

• Oatly provides visitors with an easy way to alternate between list and map view, making it considerably easier to locate the nearest stockist.

User Interface

1. Icons draw attention to product characteristics.

Brands use icons on the product detail pages to visually draw attention to the key product characteristics. They visually stand out from the written text and help grab users’ attention. 

Brands mix industry-standard icons (NON-GMO VERIFIED) with branded visual stamps.

2. Product textures help to amplify taste perception.

Vegan brands leverage product texture to visually communicate the taste attributes of the product. 

Elmhurst uses a product texture background for each SKU, while Forager adds product close-ups to the website header and accompanies them with appropriate headlines. 

3. Natural/realistic textures help to communicate the naturalness of the product.

Natural textures are a trending design approach in 2021 across many industries. Vegan brands have favoured this approach a long time ago. Companies deploy this approach to amplify the “natural” and “sustainable” product benefits. 

• Oatly has a paper-like section background and Silk Canada leverages watercolor-like backdrops throughout the site. 

‍4. Handwritten fonts compliment the effect of the natural textures. 

Bold typography is another trend of 2021. However non-dairy milk brands adopted it way before. The handwritten, raw styles communicate the cues of naturalness and have a real touch to them.

It’s important to keep the balance between overly designed fonts and simple readable typography. Just like how you should not use all caps for long sentences and paragraphs.

5. Custom-drawn imagery help to effectively convey brand personality.

Brands like Chobani and Minor Figures create distinct visuals to go along with the products and create a character for their websites. 

Unique designs enable brands to effectively communicate their personalities. 

Often time these hand-drawn images deliver on the same objective as natural texture and create a sense of realness. 

6. Instagram is a part of the content.

More often brands feature their Instagram feed on their websites. Given the efforts the brands invest into creating their social content it only makes it fair to maximize its potential reach. This approach has some more benefits: 

• The ever-updating Instagram feed provides an element of interactivity to the web pages.
• Invites users to follow the brand’s account.

Alternatively, brands can add user-generated content to their websites by pulling the posts with relevant hashtags. However, this approach requires curation to ensure only proper UGC appears on the website. 

‍