How to preserve the brand identity and emphasize its competitive advantages when scaling an e-commerce project? With the example of website redesign for Bagazhnik.ua the Turum-burum team has shown how to turn the complex process of selecting products with multiple characteristics into a simple purchase tool.
From car roof boxes to strollers
Bagazhnik.ua is an authorized distributor of the Swedish company Thule in Ukraine. Originally the brand specialized in rooftop cargo carriers, but later the range of Thule products (and consequently, that of Bagazhnik.ua) became wider and started including backpacks, strollers, and other active lifestyle accessories
Product range at Bagazhnik.ua offline store
As the website of the Ukrainian distributor started having difficulties keeping pace with the increasing workload, the company representatives turned to us with the following tasks:
- Scale and adapt the site to the new product categories;
- Update the website style to harmonize it with the identity of the brand that positions itself as a company selling modern, high-tech, quality products;
- Inform the users that on Bagazhnik.ua they can also buy backpacks, strollers and other products;
- Emphasize the competitive advantage –– the high level of service and staff qualifications.
After analyzing the current site and the tasks assigned to us, we decided to act in accordance with the RSR approach, as the online shop was very outdated, both visually and technically, and individual changes would not produce the desired result.
Studying the specific features of the niche
Buying a car rooftop cargo carrier is a rather complicated process, since it is not just a box, but a composite mechanism with fastenings, guide rails, etc. And for each car brand, the accessories are different.
That’s why Turum-burum representatives went to Kiev to study the specific features of this business.
If the process of selection and purchase of the car roof boxes was set up quite well on the current site, the purchasing procedure for other products needed serious revision, so this was what we focused on.
A Bagahnik.ua sales assistant told us everything about Thule –– the history of the brand, its mission, positioning, company values and competitive advantages of the products.
We thoroughly studied, which parameters matter when a car roof box is purchased, what the criteria for choosing bike racks are, how to choose a backpack, a suitcase, etc.
A separate task was to look into the specific aspects of selling strollers, demonstrate their advantages to the user.
It took us 30% of the total project time to study the niche, the products, and all the ins and outs of their selection and purchase.
We were so taken with the idea of the brand that some of us even became its ambassadors.
Our Head of Customer Service Alexander is enthusiasticall telling the team about the benefits of a Thule backpack after his trip to Kiev.
The main advantage of the company that we took notice of was the high level of the staff training and qualifications. They are real experts and know everything about the selection, mounting and operation of rooftop cargo carriers for any vehicle type. This was exactly what we needed to communicate on the new website –– that this was a tool that could help the users find the right product as effectively as an expert in a brick-and-mortar store.
Creating the concept
We decided to build on Thule's message, that products of this brand accompany their owners in any life situation: be it a family holiday in the mountains or a walk in the woods. It is communicated through emotional banners on the key pages of the site.
To highlight the status of the authorized distributor we used the color scheme of the official Thule website.
To emphasize the scale and monumentality of the brand in the website style, we used a wide-format banner that does not change when the screen format is reduced.
Wide-format banner in the design of the Bagazhnik.ua interface
Key design solutions for Bagazhnik.ua
The home page makes an accent on the brand reputation
The main issues of the home page were as follows:
- the website was narrow and looked outdated,
- the focus was placed on roof racks and cargo carriers, and other product categories were not properly presented,
- navigation was vertical, which was inconvenient for the user.
Bagazhnik.ua website before redesign
The first thing to redesign was the header:
- information about the offline store was added;
- opening hours were indicated;
- partnership option was included.
Thus, the answers to the users’ frequently asked questions were given.
Bagazhnik.ua home page after redesign
Horizontal navigation was introduced with the focus on:
- main product sections: racks and cargo carriers; sport travel bags, backpacks and luggage; outdoor activities with kids;
- goods producer.
Additional entry points were added on the first screen, thus it was communicated to the users that Bagazhnik.ua is not only about car accessories, but also about backpacks, bags, etc.
The next screen tells more about Thule in Ukraine for those who are unfamiliar with the brand. Besides, Bagazhnik.ua’s expertise is additionally presented.
Home page elements that help highlight the brand reputation
Then more detailed information about other company products is given and the website’s “tone of voice” is communicated through emotional photos. A special service is offered, where the users can get answers from a qualified specialist to all their questions about the company products, get advice on the selection of the cargo carrier or any other Thule product.
Additional entry points on the home page
Thus, we placed the entry points that are necessary to start the product selection and purchase process on the home page.
Product list pages were customized for each category
For each of the 3 main menu sections product list pages were customized in accordance with the specifics of the product selection.
Product list page for cargo carriers and accessories therefor
Product list page for rooftop cargo carriers and accessories therefor
The task was to make the process of finding the suitable cargo box as easy for the user as possible.
For this, we introduced a special tool that welcomes the potential buyer on the product list page and serves as a sales assistant.
As a result, the user sees only the products that suit a particular vehicle.
The selection process was split into three consecutive steps:
- Car brand selection
- Car model selection
- Modification selection
As a result, the product list is limited to 2-3 models, and the user needs no more filters or additional tools.
Product list for bags, backpacks and luggage
Product list page for bags, backpacks and luggage
In this section the product list looks more traditional. Since these products are close to the fashion niche, we used the corresponding patterns in the design.
A horizontal filter bar was placed in the upper part of the screen. The main accent was made on the product thumbnail, where a big image and key features that can affect the decision-making process were presented (collection name, size, volume, weight, material, colors available).
As a result, the general picture is stylish and high-tech, just like the products of the brand.
Portal page and product list page for strollers
Before the user gets to the stroller product list page, he/she sees a portal page filled with emotional pictures, demonstrating specific features of different product series and highlighting competitive advantages of the goods. Once the user is informed about the specific features of the products and is prepared for the next step, he/she is taken to the product list.
Portal page and product list page for strollers
Product card communicates competitive advantages
Product cards are performed in the same style for all the three sections.
- Focus is placed on the competitive advantages of the company: free delivery, official warranty and extended warranty from the store. This increases the customer’s trust and affects the loyalty level.
- Big product pictures from different angles and in various states (e.g., the view and size of the stroller in folded position), as well as video review of the product.
Product card in Bagazhnik.ua online store
- Custom icons are used to draw attention to the product features, which are important for making a decision about the purchase
Information is presented in various formats: text, images
- Information about delivery and payment methods, product availability in the store and pick-up locations.
- Cross-sell tools are used on the product cards of strollers and rooftop cargo carriers, since there are a lot of additional accessories and components for them.
Cross-sell block on the product card
If the user still has some questions/doubts, the second screen is split into two blocks. The first one contains the fullest possible description of the product, its characteristics, specific features, an instruction manual, a video review, etc. In the second block a little product thumbnail is placed, so that the user could move on to the next step of the funnel at any moment.
Detailed information about the product is presented: a video review, product characteristics and specific features, an instruction manual
Even though the product cards almost don’t differ visually, we worked on them for each section separately. Since these are three different areas with different sales funnels, different triggers are relevant for each of them, which was important to consider in the design.
Checkout was made as simple as possible
Once more attention is drawn to the competitive advantage –– free delivery. The products are mostly rather big, so this is a crucial point for making a decision about the purchase.
Collection-by-customer and payment functions were optimized: the available delivery methods, relevant pick-up addresses, and payment options are now automatically updated depending on the choice of the delivery city.
For example, if for Kyiv one can choose collection by customer, delivery by Nova Poshta and by company courier, for Mykolaiv delivery by courier is unavailable, so this option is not shown in order not to confuse the user.
Simple and understandable checkout process is an indicator of the company’s high level of service and customer care. As a result, the number of abandoned carts decreases, and that of loyal customers increases.
Redesign as a new step in business development
Thus, thanks to using the RSR approach we helped adapt the site to the new business tasks.
This let the company:
- highlight their reputation
- improve the service level
- increase the conversion rate
- segment the users
Besides UX/UI, we also created the frontend of the website to introduce all the interface changes as seamlessly as possible.
The site became fresher, more modern and in line with the reputation of the foreign manufacturer brand.