Monthly Archives

April 2020

Illustration of a person shopping on a mobile device.

6 Key Ways to Improve Your eCommerce User Experience

By User ExperienceNo Comments

When customers shop online, it is similar to shopping in a brick and mortar store. They have a goal in mind– whether to buy a specific item or to browse your inventory– and they want to make their purchase as seamlessly as possible. To customers, your website’s homepage is your storefront. Your category pages allow your customers to walk through your product aisles. Your product detail pages provide shoppers the information they would expect from holding an item and reading the packaging.

In the eCommerce world, competition is more fierce. If customers cannot easily find what they need on your website, they are only a few clicks away from your competitors.

Providing a compelling user experience (UX) is critical to your company’s eCommerce success to increase conversions and boost other KPIs. The goal is to transition curious visitors to loyal customers. And when a website is designed with the customer in mind, it creates a user-friendly shopping experience that builds trust in your brand.

Here are Bytelion’s top tips to instantly improve your eCommerce website’s user experience:

1.  Think mobile-first

Experts project that 45% of the total eCommerce revenue in the US will come from mobile purchases in 2020, and these numbers are expected to keep growing in coming years. Your website’s homepage is your first impression to visitors, which will often determine if they continue engaging with or leave your site. Websites that are not optimized for smaller devices can make it tricky for visitors to navigate, especially if buttons are too small to tap or the layout does not change to fit the new size. Usability testing, a research method in which UX designers observe and understand how people interact with interfaces, is a great way to ensure that designs are easy to use on different platforms. eCommerce websites that think ‘mobile-first’ save a lot of money during the design and development process by strategically building for both a mobile and desktop audience.

Screenshot of B&H's homepage on a desktop.

B&H’s website adapts to a user’s screen size. While product details and changing images are displayed to the user on the desktop website (shown above), the mobile-optimized website (shown right) is more intuitive for scrolling and tapping behaviors, which makes it user-friendly for small screens.

The navigation bar is consolidated into a menu to save screen size, and large buttons replace text, which makes tapping easier. Product category tiles stack to prevent crowding on the page, which lets visitors easily scroll through their options to find what they need.

Screenshot of B&H's homepage seen on a mobile view.

2. Make sure your calls-to-action (CTAs) are crystal clear to shoppers

Your goal is to help visitors find what they need and complete their purchase. By keeping the visitor’s next steps clear, you help reduce user confusion and potential frustration. CTAs such as “Add to Cart” or “Check Out” should be clear, large, and easily visible to your shoppers. 

This is a great opportunity to use some of your brand colors too, but make sure that your font size and colors make your buttons legible. UX designers regularly conduct user interviews to help inform site design decisions that keep the customer in mind. The effectiveness of website CTAs can often fall on labeling, color and other visual indicators. For example, buttons labeled “Submit” vs. “Cancel” should be easily distinguishable from one another by utilizing different colors, icons, text and formatting.

Screenshot of a product detail page on Etsy.

The CTAs on Etsy’s website are large and emphasized by bold outlines or filled in with black to make it stand out on the page. The button text is legible to shoppers, and by using different designs for each of the buttons, it is clear to users that the buttons complete different actions. Additionally, the site utilizes icons that help to show shoppers what they can expect to come next.

3. The checkout process should be effortless

The checkout process is often a website’s make-it-or-break-it point. Once shoppers have their credit cards ready, they will be the most critical about their confidence in you as a company. A well-designed checkout process should be simple and transparent to keep online shoppers at ease.

Keep the checkout process short and straightforward. Only ask for information you actually need to complete the purchase. Visualizing the shopper’s progress with a completion bar, for example, also helps set their expectations of how close they are to finalizing their purchase. Visitors should also have the option to check out as a guest, especially since some shoppers will be hesitant to provide more information than necessary. You can recommend making an account to make future checkouts easier, but forcing visitors is a guaranteed way to lose potential sales.

Transparency is key when it comes to building trust. Shoppers will not share sensitive information if they think a website is sketchy or unsafe. To build trust, provide transparency in pricing, including the breakdown of taxes and shipping costs. Apart from sheer convenience, accepting payment methods such as PayPal and Apple Pay can also help provide a sense of security to the customer by allowing them to pay through a linked trusted account.

FREE AUDIT
Screenshot of Amazon's checkout process.

The reason why Amazon comes up often in eCommerce examples is due to the thought they put behind their online shopping UX. In a single page, shoppers can review their default shipping and payment information while still having the option to make any changes. By providing transparency in shipping options, cost breakdown, and only showing the last four digits of the credit card number, Amazon builds user trust and credibility. It does not get much easier than placing an order with one click.

4. Visitors should easily find what they are looking for

Simply put, users should know where they are on your site at all times and should be able to easily move through the pages to find what they are looking for. Information on the page should be clear, whether the customer is looking at details for a specific product or browsing through a category of related items. How your website pages are structured is incredibly important, balancing the defined user needs on your website, while also considering search engine optimization (SEO). A well-designed eCommerce site will provide easy navigation for new customers as well as specificity that helps returning customers find exactly what they need. Providing a search bar is a great example of a website feature used to help customers quickly find specific items they have in mind.

Screenshot of Nike's navigation bar and categories as seen from the homepage.

Nike provides very simple navigation for its shoppers. With only a few main categories, visitors are not overwhelmed and can easily find relevant subcategories when hovering over the navigation bar. A search bar is also available for shoppers who know what they want and can be used by entering specific keywords to return results.

5. Product details should communicate information the shopper needs

Unlike shopping in a store, eCommerce shoppers are dependent on your product detail pages to understand the product they are considering purchasing. An effective product page is designed around the information that is most important to your visitor. 

Product names should be clear and descriptions be concise and include all the necessary details. Additionally, product images are also critical since this will be one of the first ways shoppers identify both the item and its quality. Having high-resolution photos and multiple angles help build customer trust that they will be getting what they purchase. The contents of your descriptions and product details will differ from product to product; however including a few sentences and dimensions or sizes are a good start.

As you learn about your users’ needs and habits, the next step to creating a delightful shopping experience is by personalizing content. Perhaps your user seems to like a specific item or style based on previous purchase or browsing information? When viewing a product page, offering suggested items that align with the user’s interests presents them valuable information and can help increase sales.

Screenshot of ModCloth's product detail page.

ModCloth, a women’s clothing retailer, provides a clear product page and helps visitors easily find the information they need about an item. Multiple images are provided to show the product from different angles, with added personality to make the visitor’s experience more delightful. The title and pricing are very clear, as are potential discounts and ratings. Visitors can see all available sizes and colors, and the product descriptions and details are all available on the same page, separated by clickable tabs to prevent overwhelming amounts of information from appearing all at once.

6. eCommerce websites should cater to different shopping styles

A successful eCommerce website is designed for the needs of various shopper types, including visitors who are browsing as well as buyers that know exactly what they want. When a visitor is not sure what they are looking for, category pages are important. Understanding what types of products your website offers and being able to compare individual items within those categories helps visitors evaluate their options before making their selection. On the other hand, when a visitor knows what they are looking for, a combination of search and filters will help them find their product quickly. Filters are ideal for buyers who know what they want, since they display specific results that fit the shopper’s exact needs.

Screenshot of Airbnb's filter options when booking accomodations.

Airbnb’s website allows visitors to view all available accommodations for their location and timeframe on a map, organized in a list on the left side of the initial search. This helps guide browsers who want to view all their available options. For buyers with intent, the filter menu allows them to select exactly what they want from their stay, ranging from facilities to house rules to the language the host speaks.

Bytelion’s Process

Providing a positive eCommerce experience begins with the consumer and understanding how people shop online. The tips above are useful for optimizing your website, but it is also important to remember that there is no one-size-fits-all model for all eCommerce websites. The needs of someone looking for a specific cleaning product differs vastly from someone browsing for shoes to match an outfit. It’s also important to note that no website is able to do everything perfectly (even eCommerce giants like Amazon have received a lot of critique), so it is important to understand your target customers. 

To achieve an eCommerce website optimized for your customers, it requires a dedicated team of professionals to learn about customers’ needs through research, adapt website designs to fit those needs, and continue to follow customer and industry changes. UX work is not a one-time task but a dynamic process that evolves with your business. All eCommerce websites are different and approaches need to be personalized for each site and its customers. To learn more about our team and unique UX processes, click here. To see if your eCommerce site could use some outside feedback, sign up for a free audit here!

FREE AUDIT

React Native Client-Side Data Storage Solutions

By MobileNo Comments

In order to develop a mobile application with maximum DIL [Disconnected, Intermittent, Low-bandwidth] functionality, local data storage is essential. Within the React Native ecosystem, there are a number of options to consider.

Simple Storage Solutions

AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system. AsyncStorage is a perfect solution if the data to be stored is simple, lightweight, and not sensitive in nature. This solution is supported in bare and managed workflows in Expo.

SecureStore is another asynchronous, persistent, key-value storage option available in React Native. SecureStore enables the storage of key-value pairs in an encrypted data store. The size limit is 2048 bytes for the value. This solution is also supported in bare and managed workflows in Expo.

Persisting simple data in key-value pairs is highly useful but it is typical that mobile applications will require the storage of more complex data structures. Because of this need, there are many options to choose from.

SQlite vs. NoSQL

SQLite is a relational database management system (RDMS). It uses tables where data is defined by columns and stored in rows. Each table has a unique name and may relate to one or more other tables in the database through common values. NoSQL databases are document-based, key-value pairs, graph databases or wide-column stores. They also do not have standard schema definitions that need to be adhered to. Additionally, NoSQL data stores are typically not relational.

SQL databases have a predefined schema. NoSQL databases have a dynamic schema for unstructured data. Therefore, migrations are necessary when schema changes are made when leveraging a SQL/SQLite database. For apps with the need to store unstructured or constantly changing data structures, a NoSQL solution is best. 

SQL/SQLite databases are a better fit for complex query intensive applications. SQLite implementations often will have an abstraction layer to allow developers to interact with the database in the native language of the project. SQLite also implements most of the Structured Query Language (SQL) standard. This allows developers to implement custom SQL queries if needed. In general, NoSQL databases don’t have standard interfaces to perform complex queries. Typically the queries themselves in NoSQL are not as powerful as SQL query language.

React Native Datastore Options

This is a list with a brief description of some of the options for client-side mobile application data storage solutions capable of handling more complex data than AsyncStorage or SecureStore.

NPM (Node.js Package Manager) is the most useful package manager for JavaScript. NPM is very commonly used by React Native developers to install critical libraries to be implemented into their mobile applications. Below is a graph generated using the NPM Trends tool. This gives a sense of how often the packages we are going to look at are downloaded by developers through NPM. It will also illustrate the current trends for data storage solutions in React Native.

React Native NPM Downloads Graph

_______________________

SQLite

The React Native SQLite module creates a client-side SQLite database that can be queried through a WebSQL-like API. SQLite is a small, fast, reliable, and self-contained SQL database engine. It is one of the most commonly used database engines and is leveraged by all kinds of applications on any platform and is supported in Expo managed and bare workflows. SQLite data stores can be encrypted using SQLite Encryption Extension (SEE) or plugins like SQLiteCrypt and SQLCipher. Unfortunately, it does not look like these libraries are supported in Expo managed workflows at the time of this writing (December 2019).

realm

realm

Realm is an object-oriented NoSQL database. As such it provides memory-efficient access to data by using Realm objects, which usually consume less RAM than native objects. Realm also has faster performance than SQLite and some other data storage solutions. The client-side datastore includes a built-in framework for seamless data syncing with Realm backend storage solutions. Custom security protocols for each of the different device platforms is also one of the strengths of Realm. As of this writing (December 2019), Realm is not supported in Expo managed workflow.

pouchdb

pouchDB

Pouchbase is a client-side datastore with a JSON-based NoSQL interface. It can be used as an abstraction layer over SQLite or by default it ships with IndexedDB adapter for the browser, and a LevelDB adapter in Node.js. The primary reason to adopt PouchDB is to leverage the built-in framework to enable data synchronization with CouchDB server-side data storage solutions. Client-side PouchDB instances can be encrypted using the Simple-Cryptor-Pouch plugin. As of this writing (December 2019), PouchDB is not supported in Expo managed workflow.

mongoDB

mongoDB

MongoDB is a document-based NoSQL database that reads and writes JavaScript objects. It includes the ability to sync to MongoDB backend datastore. The ability to encrypt the client-side data store instance is built-in. As of writing (Dec 2019) MongoDB is not supported in Expo managed workflow.

Couchbase

couchbase

Note from developers on the react-native-couchbase-lite repo: This plugin works for Couchbase Lite 1.x only. For new projects, we recommend to use the Couchbase Lite 2.0 Native API and to write your own wrapper to access Couchbase Lite APIs from a JavaScript codebase (see https://facebook.github.io/react-native/docs/communication-ios.html).

Disclaimer on the react-native-couchbase-lite repo: “This package is not an official couchbase plugin and is not supported in any way by couchbase. If you have issues with it please do not use the couchbase forums but raise an issue here instead. Although this package does work as described it may not be fully featured and may not be suitable for your requirements. This package is just a thin layer over the CBL REST API, PRs and suggestions are welcome!”

It does not appear like the developers of Couchbase are currently supporting a React Native implementation of their client-side data storage solution. The best React Native compatible client-side data storage solution with built-in server-side Couchbase syncing at the time of writing (December 2019) is PouchDB.

If you are looking for application support as it relates to building applications in disconnected, intermittent, and low bandwidth environments (DIL), contact us here. Bytelion has developed a portfolio of apps meant to sustain connectivity and support local data storage.

Advanced Search Experience with Algolia

By DevelopmentNo Comments

Providing the customer with an excellent search experience is one of the most overlooked aspects of successful eCommerce websites. According to Forrester Research, 43% of website visitors go directly to the search bar when they open a website for the first time. This means that, for nearly half of your user base, the search functionality of your website will be their first impression, so it had better be good! ECommerce giants like Amazon fully understand this, so they have spent significant resources on ensuring that the search experience of their website is user-friendly and effective. Considering how universal Amazon is today, they have essentially set the bar for advanced search experiences, and as such, your average user will expect high-quality search by default.

Algolia logo

This poses a significant challenge to the average eCommerce website. Very few eCommerce websites have the resources that Amazon has to engineer this kind of experience from the ground up. After all, an online merchant is not a search engine company – they should be able to focus their time and resources on other aspects of the website. Nonetheless, users will be expecting a search experience that rivals that of Amazon’s. So how can the average online merchant deliver advanced search features their users expect without exhausting their resources?

One great option is to utilize a tool like Algolia! Algolia is “a hosted search engine, offering full-text, numerical, and faceted search, capable of delivering real-time results from the first keystroke.”  By using Algolia to implement a search solution, eCommerce sites can rest easy knowing that their search functionality is solid while freeing up resources to focus on other aspects of the platform. Let’s take a look at some of the advanced search features that are made easy by Algolia, and how it can help you drive sales and deliver the search experience that your customers expect. 

FREE AUDIT

Guided search screenshot

Guided Search

A relatively simple but overlooked feature is what’s known as guided search. The screenshot above depicts the guided search feature on Coursera.com, whose search is powered by Algolia. As you can see, as the user types, they are recommended popular search terms. This helps to make the user’s experience more streamlined, so they can get to the product they’re looking for faster, or be inspired by some of the other popular search terms and decide to buy something else.

Federated search

Federated search screenshotNowadays, it’s not uncommon to find content other than merchandise on an eCommerce site, such as blog posts, corporate news, FAQS, etc. Using federated search technology, search queries can be done on multiple content sources simultaneously. This means that when a user searches for a product, the results could also include, for example, any relevant blogs posts about the same or similar products. This increases visibility to non-merchandise content on your website and could potentially motivate users to spend more time on your website, which is always a good thing.

Personalized search

A great search experience will not be the same for every user. Using personalized search features, search results on the same exact query can vary from user to user, based on a variety of factors. For example, a user that is located somewhere with a hot climate might have more warm-weather clothing in their results. The displayed results can also take a user’s past shopping habits into consideration, prioritizing brands that the user has purchased before. This helps to make the user’s shopping experience more relevant to them, increasing sales and customer satisfaction.

Analytics

Analytics screenshot

On top of all the great search features that Algolia provides for your customers, they provide valuable analytics into what your users are searching for and buying, all displayed in a convenient dashboard. At a glance, this allows you to see trending search terms, which search terms lead to the most conversions, which search terms are returning no results, and more. Even if Algolia did not provide any added search functionality to your website, these search metrics would be extremely valuable. These insights into what people are looking for and buying allows online merchants to rapidly respond to its customers’ shopping habits and take steps to increase sales.

Conclusion

These are just some of the advanced search features that Algolia can add to your eCommerce website, for a fraction of the cost of building them in-house. You can check out the documentation yourself at https://www.algolia.com/doc/ for a deep dive into the additional features they offer. Using the robust features of Algolia, one of our team members here at Bytelion helped improve the search experience on Under Armour’s website, resulting in 35% increased conversions from search. If you are interested in seeing similar improvements on your eCommerce site, please contact us. We can conduct a free eCommerce audit on your tool to give you actionable insights. 

FREE AUDIT

SalesForce Commerce Cloud

Salesforce Commerce Cloud – Product to Customer Centric Enterprise

By Cloud Commerce, DevelopmentNo Comments

As technology evolves rapidly and shopping trends shift on a daily basis. eCommerce is in a constant state of adaptation that can leave brands fumbling in the dark.

Bytelion has worked with companies that employ a number of eCommerce tools, many of which don’t meet the challenges we face today. Ultimately, companies need to respond quickly to changing demands with flexible eCommerce built around your customers.

B2B Commerce Cloud

Salesforce Commerce Cloud As Your  Solution

Commerce Cloud is a multi-tenant, cloud-based commerce platform that empowers brands to create intelligent, unified buying experiences across all channels i.e. mobile, social, web, and store. Leveraging the power of the cloud, Salesforce helps you craft innovative customer experiences that drive conversions and inspire brand loyalty. It allows companies to handle their entire business operations from a single place. After 10+ years in the eCommerce world, Bytelion has found Salesforce Commerce Cloud as a robust tool to ensure revenue stability and growth in times of economic unpredictability.

B2C Commerce Cloud

B2B Commerce Cloud – is optimized, customized, and integrated so that you can get the complete freedom to curate the entire customer journey. This starts from the first click in the purchase journey to order fulfillment.

B2C Commerce Cloud – connects with consumers and delivers personalized shopping experiences across all e-commerce channels i.e. web, mobile, social, and in-store. This platform enables digital experience and frictionless transactions at every touchpoint. B2C Commerce provides the resources and processing for your eCommerce sites, called a storefront in the Commerce Cloud documentation to help create and build your sites in your vertical.

Is Salesforce perfect for your business?

Today, companies need the best products and services available. As demand for online sales increases, tools that offer numerous capabilities and features are essential. Commerce Cloud provides the capabilities that ensure a personalized shopping experience for you and your customers.

  • Excellence capabilities – helps to manage the products, pricing, and promotions to boost customer engagement.
  • Operational capabilities – facilitates functionality over multiple channels, linking the backend process with the fulfillment of orders.
  • Intelligence capabilities – provide more clear data insights for guiding us with customer interaction(AB testing), engagement, and quick business decisions.

In the past few years, companies that grew their market share have either been native digital organizations or cloud enterprises. For this, companies need an expert team to help rematch, reinvent, and strategize the digital transformation journey.

Bytelion’s work:

Pier 1 Imports is the eighth-largest furniture retailer in the United States and its eCommerce platform is hosted and deployed in a standard Salesforce Cloud. Pier 1 Imports recruited Bytelion’s team of eCommerce designers and developers to optimize its eCommerce platform.

Bytelion is delivering an outsized impact on UI improvements through commitment to adaptation and efficiency. We learned a fully customized Commerce Cloud and navigated complex development systems to accomplish significant strides in software development. This transformed the user experience and contributed to increasing eCommerce revenue. Our team contributed heavily to frontend and backend development, automated quality assurance (QA) testing, and implemented best technical and organizational practices within their team and across the project.

Bytelion drives with speed and agility. We leverage our UX skills and design process to improve and create completely new personalized customer experiences. Bytelion helps build and drive the processes and campaigns that companies need to bring these experiences to life in quick, smart iterations.

We offer development support:

  • Trouble shooting:  Promptly react to complex performance, security or other Salesforce issues, which need to be fixed on the code level.
  • System evolution:  Implement enhancements, including substantial ones, to a Salesforce solution according to change requests. Modifies default functionality quickly with no impact to current business operations in Salesforce.

To learn how Bytelion can help your Commerce Cloud platform, sign up for free audit. Our team of user experience designers will run a thorough assessment and provide actionable insights to help grow your online sales.

FREE AUDIT

GitHub Template to Kickstart Your Project

By Development, Software Lifecycle, ToolsNo Comments

Have you ever needed to ramp up on a project quickly to produce a product as soon as possible? Typically, development teams start out fresh by creating a brand new code project; however, creating new projects from scratch can forfeit time that would otherwise go into building out new features. A GitHub template can help developers reuse code to bring a product to production level at a much faster rate.

We use templates at Bytelion to help our startup clients achieve their goals in a smaller time frame. Check out this GitHub template for a Ruby on Rails API project we have created. In this post we will demonstrate how we created this template so you can get started with recycling your code!

4 Steps to Create a Template Repository

1. Create a new repository that will host the GitHub template

Creating a new repository is the first step to creating your first GitHub template. To create a new repository select the plus button from the top of the page and enter the required info. You can choose to share your repository with the public or you can keep it hidden between you and your team!

2. Generate your code for reusing as a template project

Once you have a repository created you can add any code that you would like to use as a template. In our example Rails template we chose to have a Rails API that will be ready to use, the only steps left are to create our models and controllers that will be used when the API is called by a client.

3. Mark the repository as a template

When the code in the project is complete, navigate to the settings tab in GitHub and select the option to mark the project as a template repository.

create github template4. Use the template to create a new project

To create a new GitHub repository with the template do one of the following. Create a new repository as shown in step 1 and select the template you would like to use. Or if using a public template, you can use the “Use this template” button on the repository page. As a result, you will have created your first GitHub repository!

use github templateNow that you have created your own template you can get started with reusing your own code to kickstart your projects! Have a template you would like to share with us? Let us know by sharing this post and mentioning us on Facebook, Twitter or LinkedIn!