Usability assessment of a furniture store website (case study)
Hello! My name is Pavel and I am a Junior UX/UI designer. Actively looking for a job for this position. In this longread, I want to share with you a test task that I performed for a Digital company.
Evaluate the usability of the site mnogomebeli.com and give an expert opinion.
Redesign the product page.
Before assessing the usability of the site, a study was conducted on the audience: in particular, the age group, in order to roughly understand the target audience. The data is taken from the company’s official page on VKontakte. A total of 325,654 thousand people (data as of 12/16/2022).
As we can see from the table, the basis of potential customers is in the segments from 25 to 64 years old. This is an economically active population, independently making a decision on the purchase of goods. Their social level and income are fully formed. At the same time, there are more buyers among the female population.
1) Usability check
In the menu navigation there is a “Sale” button. In color, it is no different from the rest of the items. To draw the user to this page (or pay attention), you can highlight the button with an accent color.
There is no “Find” button in the search bar, which would suggest that you can search for a query. Since the 50+ audience may not be very good at computers and surfing the Internet, this can cause a cognitive load on the brain and scare off a potential customer to make a purchase. In addition, the search string itself is unreasonably long.
The phone is indicated in the header. You can add detailed information. For example, the contact center mode is to call around the clock or at a certain time.
The “Promotions” button near the logo is ineffective. First, it looks more like a Menu button, which, when hovered over, should bring up a drop-down list. Also, the button itself “merges” next to the logo. Secondly, it completely duplicates the “Promotions today” block. Therefore, it can be removed.
I can assume that the solution with the button was taken from the Ozon and / or M.Video sites as a reference. But, so that it does not look like it is plagiarism, they decided to give the button a different function.
The “Promotions today” block is located in front of the footer. But it would make sense to place it at the top of the page instead of a huge banner. Next to the product of the month. So the user will be immediately informed about today’s promotions, which are limited in time, which will encourage the person not to miss the opportunity to save.
The banner itself about New Year’s sales can be placed below in full width, as is done by indirect competitors. For example, Ozone.
There is no “Add to Cart” call to purchase on product cards. Such a function could be done when hovering over a product in order to maintain visual purity and add a familiar shopping pattern.
A bug was found in the footer. When hovering over an empty area, the active state of the cursor appears.
Add more information. For example, the operating hours of a contact center.
Bring icons of company logos to a single style.
An interesting observation on the page with addresses of salons. The entrance to the site was made at 00:20 (Krasnoyarsk time). In the list of addresses, a plate is shown that the store is open.
It is not entirely clear what is meant. The store is open in the city in general (there is a branch) or is working right now. At the same time, the card says the opening hours until 20:00. Perhaps the time is calculated in Moscow (where shops are open until 21:00), which is not very convenient. You must enter local time.
Order status page
There is no incorrectly completed form error message on the checkout page. As well as the active display of the input as you type. The contract number always starts with the letter A of the English layout – this is displayed in the inactive input.
At the same time, if a person did not notice this message and entered another letter, he will only receive the message “fill in the field”, but this does not cancel the presence of an error. It is worth making a tooltip that “the contract number starts with a certain letter and layout.”
If you select the item “goods purchased in the salon”, then you can also enter data using Cyrillic. Which again is misleading.
When adding an item to the cart, the user is forcibly redirected to the checkout page. Although he should have the choice to stay in the catalog and continue shopping. The constant forced transition only causes irritation and refusal to purchase, which will affect the decline in sales. Not the best call for a quick buy.
In the shopping cart, in addition to the list of products that calls for checkout, there is a second block with detailed ordering. It is worth delimiting them and creating a new page under the second block, as the user enters important data.
At the same time, you can add a stepper to monitor the progress: “You are on the checkout page.” And also give the opportunity to return to the basket and, in which case, remove the product.
An inconvenient page structure that loses the focus of the user’s attention and raises the question: where to start here? Panoramic image of the product in full screen distracts from the data below.
At the same time, the image itself also increases when you click on it. You can optimize the page to fit more information on the screen by making the image smaller. If you need to view the product closer, he clicks on the picture.
A bug was found: on some product pages, when you click on the “customer photos and videos” button, it redirects to the reviews section. In other cases, an additional section with photos and videos appears.
2) Product page redesign
What was done:
The structure of the page has been optimized taking into account the usability problems described in task 1. The header has been fixed, the Promotions button has been removed. The search bar tells you what product you can find.
Added the familiar search icon. Huge photos are collected in a collage. One photo is accent. Saving space helped to arrange the block with the price and the buttons “add to cart” and “buy in 1 click”. Also added the ability to quickly see the availability of goods in the shops of the city.
Added quick jumps to the most used sections. Implementation can be done via anchor links.
The block with advantages was removed, as it duplicated some of the characteristics of the product. To more clearly show the benefits of the product, the user can watch a video review from experts.
Blocks with discounts were also optimized by reducing the indents between products.
Improved the structure of the product review card.
Icons of social networks are brought to the same style.
As a result, the company said: “We have carefully studied your resume and test task. Many skills were highly appreciated, but, unfortunately, the manager gave preference to other candidates with a profile closer to our activity profile at previous jobs.”
As you can see, I did not receive a normal feedback on the assignment. I would like to hear constructive criticism from other designers.
PS Tried for the position of jun. Currently, also looking for work.