Project
1
Info
2
Heritage
online store of leather goods of two brothers
My Role
UX/UI Designer
Tools
Adobe Photoshop
This project focused on enhancing visual design by editing images in Photoshop, creating adaptations for PC, tablets, and mobile devices in Figma, and crafting a cohesive visual style inspired by the store's logo and the story of its owners—two brothers who inherited the business from their father. To reflect the owners’ personalities and the heritage of the business, a bold black design theme was chosen, creating a masculine and striking visual identity.
Timeline
2 weeks
Figma
Overview
3
The Need
The goal was to create a unique and original style for the website that would captivate users and make it stand out.
Overview
4
Idea
The prototype is designed to highlight product photography, with a dark background reminiscent of black matte leather to enhance the visual appeal. A clean sans-serif font further reinforces the sense of prestige and premium quality.
Process
5
Catalog
In the catalog, I incorporated unique rounded corners for the cards and buttons. This design choice aligns seamlessly with the font style used in the headings, creating a cohesive visual aesthetic.
Process
6
Product card
In the product card, I included a detailed description of the product, specifying size, colour, number of pockets, type of fastener, and warranty period. These details make it significantly easier for customers to make informed decisions online. Additionally, I added an option to include gift wrapping, as leather accessories are frequently purchased as gifts.
Process
7
Basket
The basket contains all the necessary information, presented in a clear and readable manner thanks to grid-based layout. Users can easily adjust product quantities or remove items. A separate section displays the final total, ensuring the user can quickly and accurately review the amount to be paid.
Additionally, suggested complementary products are displayed below the basket, encouraging users to make additional purchases, which can increase the overall order value.
Additionally, suggested complementary products are displayed below the basket, encouraging users to make additional purchases, which can increase the overall order value.
Process
8
Checkout
On the checkout page, all required fields are clearly visible, allowing users to quickly assess the time needed to complete the process. The fields are organized into categories: email address, delivery address, payment details, and shopping cart. This structured layout reduces cognitive load and keeps users focused.
The most critical information — total cost and the "Pay" button is displayed prominently and separately. This approach enhances transparency and ensures users aren't confused during the final step.
The most critical information — total cost and the "Pay" button is displayed prominently and separately. This approach enhances transparency and ensures users aren't confused during the final step.
Process
9
Typography & colours
Two fonts were chosen for this project: Buyan for the headings and Raleway for the body text.
Buyan is a decorative font with prominent serifs and unique proportions that capture attention. Raleway, on the other hand, is a neutral, modern geometric sans-serif font known for its clarity and readability. Together, they complement each other by creating a striking contrast of styles.
The primary colour in the project is orange, while black and white serve as neutral tones. This choice not only ensures simplicity but also creates a strong contrast.
Buyan is a decorative font with prominent serifs and unique proportions that capture attention. Raleway, on the other hand, is a neutral, modern geometric sans-serif font known for its clarity and readability. Together, they complement each other by creating a striking contrast of styles.
The primary colour in the project is orange, while black and white serve as neutral tones. This choice not only ensures simplicity but also creates a strong contrast.
Lessons Learned
10
Project Reflections
and Future Potential
and Future Potential
This project allowed me to create a unique website style from scratch, adapt it seamlessly to different devices, and refine every detail. The final result is a concept that can be effortlessly implemented in the real world.
The project was reviewed by a UI design course leader Kris Anfalova and received the highest praise, with no comments or edits required.
You can see more screenshots, mobile and tablet versions by clicking on the button and going to Behance.net
The project was reviewed by a UI design course leader Kris Anfalova and received the highest praise, with no comments or edits required.
You can see more screenshots, mobile and tablet versions by clicking on the button and going to Behance.net
Let's continue!
11
Dive into more projects
