Online store for the EHS industry

What happens when the industry turns out to be more demanding, for example, due to its extensive range of products that make it difficult to remember all the categories of products available in the store? Recently, I had the opportunity to work on a project of an online store for a company specializing in the sale of occupational health and safety products. Everyone has certainly participated in occupational health and safety training, whether at school or at work. Let's not kid ourselves, these were not the most captivating presentations/trainings. However, the idea of safety itself is very important and correct. How can we provide people who need specialized equipment with easy access to the range of products offered?

As I mentioned earlier, there are standard elements that the store should be built upon to ensure the complementarity of the entire solution. You can also rely on proven design patterns, confirmed by research and having a positive impact on user experience. The industry in which few designers have tackled the problem of presenting data in a clear and attractive interface is a challenge. Sometimes you have to blaze new trails and take responsibility for the proposed solutions. This is well demonstrated by a benchmark conducted as part of research to prepare for the design process. You can see that there is a lack of curiosity to understand the problem and a willingness to provide an attractive solution in the design of stores in this industry. In other words, these projects can be considered treated poorly. But whoever doesn't make mistakes stands still :)

Starting from the beginning, a big challenge was designing the menu architecture itself. The website navigation should be clear, unambiguous, and almost always immediately available to the user. With a large number of tabs available, I had to consider which type of navigation would work best for this project. Due to the mentioned constraints, I decided to use a vertical menu. In its form in this project, it catches the user's attention and is a standout element on the screen.

When designing a menu, one cannot forget about its lower levels (if they exist). The technique used in the discussed online store project can also be successfully implemented in the case of a horizontal menu. Making full use of the space works in this case, as the area of the expanded menu can be used to place additional advertising banners or promoted products. In addition to marketing aspects, this strengthens the message about the selected menu item and assures the user of their location. This is, of course, an additional technique, in addition to such means of expression as highlighting the active element / dimming the remaining elements, color highlighting, etc.

During the workshop with the client, we agreed that the search functionality would also have a significant impact on finding products. Therefore, we made sure that the search engine, which is an important, well-visible, and easily accessible element of this interface, was also functional. Hence, we implemented categories that can narrow down the search, as well as intelligent suggestions that list products as soon as the user starts typing a query. To provide customers with additional product information, it appears in the suggestion listing, making it easier to find the desired item.

Remember that no matter what industry we design a store interface for, it is still a store, and it must sell. Therefore, it is essential to consider the concept of "above the fold". This is the area that the user will see when they first enter a page. It is crucial to provide the customer with information that will encourage them to continue browsing the site or make a purchase. To determine whether a given view meets our expectations and business assumptions, we can perform very quick and inexpensive tests. One of them is the 5-second test. It involves displaying a subpage view to the test user for 5 seconds and asking them what they remember. If the elements that were supposed to be visible first are never mentioned, it may be a signal to rebuild the tested subpage.

Sometimes online stores are overloaded with products or bombarded with promotional slogans, flooding the user with information that can distract their attention. Of course, I'm referring to an excessive number of such elements. On the other hand, we cannot go to the extreme and not mention promotions at all. After all, we need to somehow encourage customers to make purchases 🙂 That's why I focused on clarity and allowing some "breathing space" in the design. Using the full screen space to place content provides greater possibilities, which I wanted to take advantage of in this case. Thanks to this, products could be placed in large boxes with clear pictures, prices, informative labels (e.g. "Promotion", "New Arrival"), and Call To Action buttons (CTA). The latter element in this implementation has a slightly different functionality than usual. Namely, the large number of products in the store is due, among other things, to the large number of their variants. Therefore, we could not place a classic "Add to cart" button in the product boxes, but rather a "See all variants" button. Such a solution makes the CTA button unambiguous - it clearly indicates the multiple options and clearly defines what will happen when it is pressed.

By using the aforementioned button, we move to the product card, which can be rich in many of its variations. Because I opted for clarity and accessibility, all variations are located as high as possible to make it easier for the user to access them. Thus, the customer does not have to worry about browsing the page to find a specific version of the product and knows that all possible variations are in a visible place on the first screen. Thanks to the full-screen option, a fixed informational element could be placed. From the point of view of summarizing purchases, it is very important because it shows the final number of selected items and the updated total price. In addition, the "Add to cart" and "Add to compare" buttons are located in its area. The aforementioned fixation ensures accessibility at any height of the variations listing.

A product card without such elements as the product name or price does not exist. It is worth making sure that these are not the most prominently displayed elements but at the same time, they provide the user with comprehensive information in an easy-to-understand manner.

Due to the highly expanded menu, it is not possible to mark in a simple and unambiguous way where the user is located. In this situation, breadcrumbs are helpful. With them, you can also return to another subpage that was part of our path.

When designing digital products that we have never encountered before, it is most important to understand the industry and the user. Parameters defining their profile, combined with business requirements, will give us a clear view of the needs and requirements that must be met. When designing a store for the safety industry, I noticed that above all, clarity and unambiguous communication of information must be emphasized. Of course, this is also important in other projects, but here it was particularly important to pay attention to it. Customers visiting the store must know where they are and where they can "go" to find and purchase the desired item. That is why the design is rather subdued in its creation and focuses on presenting products along with necessary information about them. The recipients of this particular industry do not expect great artistic experiences. Completely unnecessary in this case would be gradients, overly large texts, or overloaded animations. For customers of this or any other safety store, the experience should be simple and fast. The user expects to find the product easily and without any problems. Expectations are determined by the large number of available variants. The entire process must be accessible and intuitive. Summing up the guidelines outlined above, we can say that the project must be useful :) This statement is currently so heavily exploited that it is used interchangeably with other, more appropriate terms, or even the opposite - for too general description. In this case, usefulness has been profiled from the perspective of the end user, and I encourage practicing this approach.

Returning to the lack of appropriate comparative material for the benchmark, it is worth reaching for proven practices and presenting them in a minimalist style. This will avoid getting lost during design in accordance with modern trends and using complicated solutions. Remember that the store must sell, and every additional click distances its user from the purchase, and our Client from success. And ourselves as well.