Brief
Crom is an Alibaba like website for the Algerian market. My brief was
to redesign the UI to increase the visit duration and customer
engagement. Therefore, I used those objectives to lead me through
my design journey while keeping the design adequate for the middle
east market.
Before starting my work, I asked for some supports like their graphic
charter, but I was surprised that they don't have one. Furthermore,
they had some issues with the logo applications. As a result, I
suggested to do a rebranding then move to the website.
Bellow, you can find the old vs new logo with the same size.
It's clear that the old one is too charged and it has some accessibility problems. Furthermore, I found that this startup doesn't own the domain name crom.com. I deleted .com, the symbol, the small writings and I kept only the wordmark. Then I added the star in the "O" to communicate the great reputation and service quality. On the other hand, the star adds unicity while keeping it simple
Website
Next, I'll compare a few screens from the old and new design. Please note that the old design is in English while the new one is Arabic
1. Home page
Starting with the navbar, it had
two rows even when scrolling,
which decreases the screen real
estate (especially in the mobile).
Moreover, it contains unused
space and too many colors,
which makes the call to action
not clear.
Moving down, there are three distracting advertisements,
the website features, and some
partners. This layout takes us far
from our principal objective
(longer visit duration and more
engagement)
In the new design, we got rid of all the previous problems. One row navbar with a clear call to action.
Bellow, there is one main slider which will grab the visitor attention. And just after, there is a flash deals counter followed by different products categories.
Additionally, I was also able to show six products per row versus five in the old design
In the old home page design, there was a Request For Quotation section (RFQ). It contains two parts a form and a support image to explain the process. Starting with the form, we can see that the distribution of the elements is imbalanced. There is also a miss use of the colors inside and a bad Information Design. For example, in the payment methods, there are only three options, and it's exclusive therefore using a dropdown menu isn't appropriate.
There is also a scalability problem because the text in the image isn't accessible in the mobile version. Finally, it's not the right place for the contact us form.
First thing you can see here is that I got rid of the image and replaced it with a scalable text. Next, I fixed the colors problem and made the form look more balanced. I also changed the dropdown menu to three toggle buttons and created a custom button to upload pictures instead of the traditional one (faster access accordingly to Fitts' law and better feedback)
I moved the website features and the partners to the bottom of the page, and the contact form to the footer.
2. Single product page
Here I can list a few problems:
Navigation problems. For example, the visitor can't figure out the product's category or his location on the website.
Information architecture problems, many details are missing about the product and the shipping methods.
Typography problems and miss-use of the colors, the call to action isn't clear.
No controls, to buy more than one piece or select the product color, model, size …
So here I fixed the problems mentioned on the top.
I added the navigation path, product details, related products, and the shipping details. I also added some controls for the color, model, size…
Next, I fixed the typography problems and made the buy now button popup.
Another element that I fixed is the product description. In the old design, the supplier had to style the product description from his dashboard. Doing that leads to visual inconsistency and causes some research problems. Now it's pre-styled.
3. Shopping cart page
The shopping cart is one of the most important pages in the e-commerce websites. It comes just before the checkout page.
Consequently, users should have a great experience to proceed to the checkout.
Here we can see that there is no input for the coupon code, no shipping costs information, and no clear call to action
Our objective is to make the user proceed and buy the items in the cart and why not add more items to the cart.
I made everything clear so the user can find all the necessary details (probably you can proceed even if you don't understand Arabic)
Bellow, I added the user's favorite products section, and I made it easy to move on of them to the cart.
4. Request for quotation (RFQ) - customer view
This is an example of a power bank RFQ. There are four propositions from suppliers, but there is no way to display more than 4 with this layout. Besides that, the RFQ details aren't well presented.
There is another problem in the list on the left. The items are so big, and there is no way to collapse it to see the other RFQs.
Finally, there is no button to add a new RFQ.
I mad the RFQ list more condensed so it can fit more RFQs. Once you choose an item, it will show you the related suppliers propositions then you can choose which ones you want to compare.
I also changed the RFQ details layout and kept only the necessary details.
5. Product list - supplier dashboard
First, there is no highlighted item in the sidebar. Even header (products report) isn't that clear, which makes the user wonder of his location.
Next problem is in the search bar. Am I searching for a product a category, a subcategory? Just below, the data in the table is hard to read because there is no contrast between the rows.
Lastly, there is no button to add a new product. I have to visit another tab to add a product :)
I fixed the navigation issue by highlighting the actual tab and adding a big header.
I also changed the search bar look and wrote inside 'search for a product' to be specific. Then I applied an alternative background color on the table rows to make it easy to read.
Finally, I added three new buttons:
-
Add one new product
-
Add multiple products (new feature)
-
Buy a premium membership
6. Product categories - admin dashboard
There is a hierarchy of 3 levels for each product: Category, Sub-category, and a Class. This page enables the admin to manage those levels.
The problem here is that you have to scroll to add a sub-category. Moreover, there is no way to see the sub-categories of one category only (download the files to see the rest of the page)
CROM has around 15 main categories(right column). Next, in the middle, I displayed only the Sub-categories related to the selected category. Then I did the same thing for the classes.
Bellow, you can see a screenshot for the different webpages. You can also download more screens to see how I solved diverse problems.
I learned that
-
Our products should be both beautiful and functional, but we have to find the right balance.
-
Having arguments for our work isn't enough, we should also have the right words to transmit them.
See also
Copyright © 2019 Abderezak KAFI