Online fashion store
Role
UX/UI designer
Area
E-commerce
Year
2024
About the project
The aim of the project is to create a website design of online shop, specialising in sales of clothing, footwear, accessories, cosmetics and everything related to the fashion industry from Belarusian brands.
Goals of the site: attract the attention of the target audience, of the target increase sales conversion and stand out against competition.
The site should be minimalistic, functional, and must take into account the user experience.
The aim of the project is to create a website design of online shop, specialising in sales of clothing, footwear, accessories, cosmetics and everything related to the fashion industry from Belarusian brands.
Goals of the site: attract the attention of the target audience, of the target increase sales conversion and stand out against competition.
The site should be minimalistic, functional, and must take into account the user experience.
Home page
Catalogue & Product page
To start a purchase, just hover over the «SHOP» button or use the «SEARCH».
To start a purchase, just hover over the «SHOP» button or use the «SEARCH».
Product card states:
Product card states:
Default
Hovering over the name
Hovering over the photo
Navigation
Navigation
The navigation on the site turned out to be simple and understandable. The only thing worth paying attention to is that in order to return to any previous page, we should hover the cursor over the previous section in the navigation field.
The navigation on the site turned out to be simple and understandable. The only thing worth paying attention to is that in order to return to any previous page, we should hover the cursor over the previous section in the navigation field.
And it's also worth noting that the parameters will vary for different sections.
And it's also worth noting that the parameters will vary for different sections.
Product page
Product page
In this project the task was set to focus on photographs.
In this project the task was set to focus on photographs.
So a small feature was implemented: the right part is fixed when scrolling until all the product's photos are scanned (no more than 6), and only then you can go down the page.
So a small feature was implemented: the right part is fixed when scrolling until all the product's photos are scanned (no more than 6), and only then you can go down the page.
Separately, we specify the parameters of the model's body from the photos, this will help to more accurately understand the dimensions of the product. For example, a person with a similar figure is probably more likely to want to purchase a product.
Separately, we specify the parameters of the model's body from the photos, this will help to more accurately understand the dimensions of the product. For example, a person with a similar figure is probably more likely to want to purchase a product.
After the product description, we offer products that are combined with the main one, and first of all this is what the model is wearing.
After the product description, we offer products that are combined with the main one, and first of all this is what the model is wearing.
Checkout & cart
When adding a product, the site informs us about the successful action and opens the shopping cart on the right.
When adding a product, the site informs us about the successful action and opens the shopping cart on the right.
Placing an order
Placing an order
When the cart is empty, both buttons take us to the catalog.
When the cart is empty, both buttons take us to the catalog.
One of the tasks is to encourage the user to create an account, but it is also possible to place an order without logging into the account.
One of the tasks is to encourage the user to create an account, but it is also possible to place an order without logging into the account.
If we have an account, then the information is filled in by default.
If we have an account, then the information is filled in by default.
Once the delivery and payment method is selected, we are transferred to a third-party page for payment. After payment, the order appears in the "ORDERS HISTORY" window, where the order status will be visible and the user will only have to wait for the product.
Once the delivery and payment method is selected, we are transferred to a third-party page for payment. After payment, the order appears in the "ORDERS HISTORY" window, where the order status will be visible and the user will only have to wait for the product.
The states of the "Shipping method" and "Payment method" buttons are shown below:
The states of the "Shipping method" and "Payment method" buttons are shown below:
Account
Mobile adaptation
The scenario of searching for a woman's dress and viewing the product.
The scenario of searching for a woman's dress and viewing the product.
