How to solve strategic tasks with the help of interface solutions: The case of Baku Electronics

Detailed case of website redesign using Revolutionary site redesign approach and adjustment of business processes to online sales for a major retailer.

Baku Electronics is known in Azerbaijan as one of the leaders in the area of electronics and home appliances: 25+ years on the market, 22 stores, over 60 brands. Turum-burum agency performed a comprehensive website redesign and created an online store. Through the example of this case, we would like to demonstrate how one can reach business goals with the help of interface solutions, and which practices might help in it.

UI/UX design of a large-scale online hypermarket has its own specificities:

• numerous categories and filters,
• many locations and delivery options,
• possibility of credit purchase.

Among the challenges we encountered was the absence of accurate web-analytics data and specific nature of e-commerce in Azerbaijan. We had to make additional research on customer preferences and shopping capacity of the Azerbaijani market audience.
We also established communication with an expert business representative who had a clear strategic vision of the project development.

Tasks assigned to us:

1. Create a WOW-project for visual dissociation from competitors.
2. Convey the global “home improvement store” concept –– a hypermarket where a customer can buy any household item, from tableware to home cinema.
3. Tell about Baku Electronics as a large-scale Azerbaijani hypermarket with a wide assortment of electronic appliances at friendly prices.
4. Focus on the unique selling point –– a convenient process of credit purchase by downloading a passport photo online.
5. Attract the young segment of the target audience, form their vision of the brand, and become their assistant in the shopping world for a long time.
6. Make the process of product selection and purchase as convenient as possible, enabling the solving of potential problems with the product even upon completion of the transaction.

We split the process into stages.

How we solved business tasks

When an online store is created, the customer usually doesn’t see 80% of the work. However, we are going to reveal the internal processes of UX designers’ activity in order to explain why these particular solutions were picked for the interface in this project and what usually guides the designer when he/she decides on the concept to be implemented.

1. Analysis of the Azerbaijani market and competitors

The main competitors were identified with the help of the expert business representative, as well as our own search requests by categories and market analysis. Thus we spotted four main competitors and did benchmarking, comparative analysis of the features for each page.

Thus we identified the features that can make the online store stand out among the competitors in terms of convenience and produce a WOW-effect on the users.

2. User persona / composite character

We identified user archetypes with their challenges, goals, motivation, fears, and context of the products use. We focused on the segment of the target audience aged 16-25 and researched it in more detail.

Then we determined user scenarios, pain points, and goals of the audience.

3. Customer journey analysis

Customer journey mapping helps visualize a journey of the customers through the website and figure out the ways they interact with the product. Marking up entry points at each stage helps optimize the navigation structure in the future.

We outlined user priorities in terms of the devices used and decided to apply the mobile first design strategy based on the market tendencies and focus on the young target audience. Besides, re-engagement of the users in the project was performed using SMS and e-mail notifications about the bonus program and personalized offers.

We sorted out the user’s thoughts on each stage on the way to the target action and spotted the barriers jeopardizing the transition to the next step.

4. Creating information and navigation architecture

We spotted the necessary page groups, sub-pages, categories, and page states. At this stage, together with the expert business representative, we laid the potential for the development of new product categories, defined the catalog structure, and thought the convenience of page flow.

When building the information architecture, we proceeded from the comparative analysis of competitors and necessary features identified at the stage of creating a customer journey map.

Navigation architecture helps map the customer journey from the first interaction with the product until purchase. As a result, it is possible to enhance interaction in the interface at the points where the target action is most likely to occur.

5. Creating the concept and raw wireframes

In order not to waste time on the development of detailed wireframes we sketched out the screens of the main pages on the journey to the purchase. The main task of these raw wireframes is to convey the concept and demonstrate to the business owner how user tasks are solved on their way to the goal.

6. Detailed dynamic prototypes

We gradually developed additional scenarios moving from the adaptive version. Thus, we implemented around 120 screens of prototypes. As a result, when creating the interface, we took into account the specificities of the market, characteristics of the audience, and patterns of its interaction with the website when making purchases.

Interface solutions for key pages

1. Main page

We made navigation step-by-step and consistent. We completely gave up on traditional pop-ups in favor of the concept of right and left sliding panels.

Thus we placed emphasis on the action that’s being performed right now. Dynamic elements attract attention, they are consistent and thanks to this solution the logic of the element change can be traced.

In order to shift the focus to the young audience, we laid stress on such categories as smartphones and gadgets, play stations, etc.

On the first screen spread, we placed a catchy slider with special offers so that the buyer could easily find information about the current discounts.

In the bottom part of the slider on the main page, just like at the other stages of decision-making, we made focus on the company advantages.

As the page is scrolled, the sidebar menu becomes a fold-out burger menu and follows the user through the blocks he/she is viewing. Thus, it is always visible and at hand.

Instead of a chaotic demonstration of popular products on the page, we split the categories by zones in accordance with the “home improvement store” concept.

For comparison:

Besides, the products are combined logically depending on the household area where they are used: kitchen appliances, portable gadgets, electrical items for recreation.

One can also go back to the already viewed products from the blocks of the main page or read the company news. Such design is convenient for the customer, whereas for the owner of the online store it is an opportunity to present all the important news and offers.

2. Product list

Another key page the user usually gets to is the product list. This is what it looked like on the old website:

In the new design, we made a teaser for every menu category, where the most popular products are shown. This element enables the customers to move to the most often viewed categories more easily.

Product cards have become more modern, accurate, and comprehensive, containing maximum useful information without extra buttons and details.

As the customer was looking through the page following the Z-pattern, he/she might have missed the necessary product because of the numerous product cards on the screen. In order to let him/her fix eyes on something, we mixed the products with the promotional special-offer blocks and useful articles with the tips on the product selection.

3. Product card

The product card used to look as follows:

The main task we faced at this stage was to provide the user with all the necessary information about the product in order to bring him/her as close to the purchase as possible. That’s why we added the following elements to the product card:

1. Big image of the product from different angles.
2. Possibility to choose the diagonal size and other parameters.
3. All the necessary data about the product: description, characteristics, information about delivery, payment, warranty.
4. The “Similar products” and “Cheaper together” block, which lets the customer make the right choice and purchase all the necessary adapters, cables and other related items right away.
5. Product reviews and “Ask a question” section.

While solving the strategic task of reaching the young audience we placed special emphasis on reviews that this audience segment actively reads. To motivate the users to provide feedback we chose to encourage them with virtual money that they can use during the next purchase. Thus we are building a stronger relationship between the brand and the user and maximize the chance of a repeat purchase.

Besides, we added a “You also viewed” block to the product card, so that while viewing numerous products in separate tabs the user could quickly return to the product he/she liked and press the “Buy now” button.

Thus, the product card page helps shape the final image of the product, find answers to all the questions and make a decision about the purchase.

4. Cart

There are several scenarios, according to which the purchase process can develop in the online store Baku Electronics:

1. Standard purchase process through pressing “Buy now” button, after which the user gets to the cart.
2. With the help of one-click purchase, one can quickly contact the manager to place the order.
3. When the user selects credit purchase, he/she is transferred to the payment calculation and selection of the credit type.

For perception convenience we divided the cart into two zones: the first one shows the added products, and the second one ­–– the total amount and transition to the order placement.

The process of filling in the order form was divided into 3 blocks: contact details, delivery, and payment terms.

Payment terms now included a possibility of using a taksit card or a credit card with a number of benefits. After clicking on the corresponding section one just has to choose the taksit card of his/her bank and enter its data.

5. Installment or credit purchase

One of the benefits of shopping at Baku Electronics was supposed to be the simplicity of installment and credit purchase. When creating the interface we tried to emphasize it and make the credit purchase as convenient as possible.

Now it is not only the price of the product that’s indicated on the banners on the first page, promotional offer blocks, and product cards but also the number of payments for credit purchase.

Credit purchase often scares away the customers, since it is associated with debts, lots of fuss and paperwork. Our task was to design the interface in such a way that these feelings disappear and show that the whole process could be done online and take just a couple of minutes.

We created the features that let the user submit an application and attach an id photo. There is no need to actually go to the store, one can get the feedback on the phone, and the papers for signature will arrive together with the product.

This interface solution is another way to attract the young segment of the audience who are not always ready to pay for the purchase in full right away.

Conclusion

As a result of the project, the interface reflected all the strategic tasks assigned to us.

1. Thanks to benchmarking we disassociated from our competitors and created the most convenient online store possible with the best functional solutions available on the market.
2. Due to the coordination of information and navigation architecture, we implemented the “home improvement store” concept and laid potential for the development of new categories.
3. We equipped the website with banners and promo-blocks for announcing unique products and special offers.
4. We simplified the process of online credit purchase, created the algorithm of calculating the interest payments, and placed emphasis on the convenience of credit or installment purchases, as an advantage of the company.
5. We found solutions for attracting the young audience: from the focus on the credit purchase process to the placement of popular gadgets on the website pages.
6. We provided the website with all the convenient tools for the blog so that the user could easily find all the necessary information on the product.
7. We made the site multilingual taking into account the specific characteristics of the Azerbaijani market.
8. We created such a structure that tracking and adjusting analytics etc. is easy and convenient.

We created over 120 prototypes and 130 design pages.

Thanks to such cooperation, Baku Electronics and Turum-burum managed to create comfortable conditions for choosing and purchasing products not only in the network of shops but also in the online store.

“Before the new design release, we fundamentally changed all the processes connected with online sales.  The range of products on the site was increased, and we also paid more attention to seasonality.

Before the release, we managed to increase the number of orders by 3 times, and after the new design was released the number was 5 times higher. At the same time, traffic increased by 2 times.”

‍