Yargici: E-Commerce Website Re-Design
Fashion E-Commerce Website Store:
Enhancing User Experience with Elegant Design
Yargıcı.com is the online store, a Turkish fashion brand known for contemporary clothing and accessories for women, men, and children. They blend Turkish heritage with global fashion trends, offering a range of stylish products including clothing, shoes, bags, and accessories for online purchase. Here I’ll represented part of my job of ongoing project.
Case study
Yargici: E-Commerce Website Re-Design
My role
UX / UI
Year
2024
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=787,fit=crop,trim=75.52447552447553;117.45318352059925;75.52447552447553;117.45318352059925/Yg22evNJjzivkoJ4/main-Yg2lQyX66ESGWy9K.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=208,fit=crop,trim=86.08695652173914;117.31843575418993;86.08695652173914;117.31843575418993/Yg22evNJjzivkoJ4/main-Yg2lQyX66ESGWy9K.jpg)
Principal tasks
User Problem
Project Includes
Outdated Design, old fashioned home page, overwhelming product page.
Current design trends have shifted, and users now prefer simpler experiences developed by new competitors, highlighting the need for streamlined and intuitive interfaces.
UX/UI Design
User Interviews results
Additional Research
User Testing
Responsive Web Design
The Whole Process Split into Separate Steps:
Current design trends have shifted, and users now prefer simpler experiences developed by new competitors, highlighting the need for streamlined and intuitive interfaces.
User Feedback:
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=606,h=244,fit=crop/Yg22evNJjzivkoJ4/frame-413-ALpJWeEgV9CyXqJ1.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=132,fit=crop/Yg22evNJjzivkoJ4/frame-413-ALpJWeEgV9CyXqJ1.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=606,h=244,fit=crop/Yg22evNJjzivkoJ4/frame-415-ALpJWeEgjLhMRgMW.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=132,fit=crop/Yg22evNJjzivkoJ4/frame-415-ALpJWeEgjLhMRgMW.jpg)
The Whole Process Split into Separate Steps:
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=300,fit=crop/Yg22evNJjzivkoJ4/frame-450-dJoJWbqpgBSeNqJB.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=80,fit=crop/Yg22evNJjzivkoJ4/frame-450-dJoJWbqpgBSeNqJB.png)
Product Page Changes:
Easily find what you're looking for with intuitively planned tabs. The both versions desktop and mobile offers comprehensive information without requiring additional efforts. Navigate effortlessly through tabs such as Product Description, Details, and Delivery & Returns to access all the information you need.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1018,h=688,fit=crop,trim=0;0;0;0/Yg22evNJjzivkoJ4/group-102-YleMbQev5nIlpBb7.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=222,fit=crop,trim=0;0;0;0/Yg22evNJjzivkoJ4/group-102-YleMbQev5nIlpBb7.jpg)
Product Categories Changes:
On the product categories pages, filters have been significantly improved. They are now immediately visible using dropdowns, allowing you to filter clothes by size, color, material, and more. Additionally, you can sort the products for easier browsing. Both mobile and desktop versions have been enhanced; however, the user experience differs as the mobile interface is optimized for smaller screen real estate.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1018,h=635,fit=crop/Yg22evNJjzivkoJ4/group-101-YrDabJQ23gI5eJJL.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=205,fit=crop/Yg22evNJjzivkoJ4/group-101-YrDabJQ23gI5eJJL.jpg)
When I was searching for the right font for the current design, I narrowed it down to two options. My primary choice was Gotham, inspired by the architectural signage of the mid-20th century, particularly the lettering found on buildings in New York City. Gotham aims to evoke a sense of modernity, straightforwardness, and functionality.
My second choice was Didot, a serif typeface that exudes elegance and sophistication, known for its high contrast between thick and thin strokes and its distinctive, modern aesthetic. Didot is often used in branding identity and frequently represents luxury. The main goal of using Didot was to differentiate certain elements from the common text on the webpage, adding a touch of refinement and distinction.
Design System
Fonts & Typography
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=487,fit=crop/Yg22evNJjzivkoJ4/group-26980-AMqnW8VnMoIeyEbG.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=131,fit=crop/Yg22evNJjzivkoJ4/group-26980-AMqnW8VnMoIeyEbG.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1018,h=830,fit=crop/Yg22evNJjzivkoJ4/frame-437-Yyvo40yoqrSEl7px.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=267,fit=crop/Yg22evNJjzivkoJ4/frame-437-Yyvo40yoqrSEl7px.jpg)
Before
After
![Website re-design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1018,h=662,fit=crop/Yg22evNJjzivkoJ4/after-mp8nbJqW97hwKO1y.jpg)
![Website re-design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=320,fit=crop/Yg22evNJjzivkoJ4/after-mp8nbJqW97hwKO1y.jpg)
More Later
I am currently in the process of working on this project and intend to incorporate additional information at a later stage.
![Mobile app design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1018,h=636,fit=crop/Yg22evNJjzivkoJ4/yargici-mobile-app-A3Qp97P7Z8CZzNQL.jpg)
![Mobile app design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=205,fit=crop/Yg22evNJjzivkoJ4/yargici-mobile-app-A3Qp97P7Z8CZzNQL.jpg)