overall
The design of this e-commerce website was based on a brief from 99designs. The primary goal of the website was to enable users to follow fashion influencers and purchase their collections for inspiration.
Its desired aesthetic was sophisticated and upscale, with a minimalist color scheme utilizing only a few colors.
Its desired aesthetic was sophisticated and upscale, with a minimalist color scheme utilizing only a few colors.
Project
As a first-time e-commerce website designer, I conducted extensive research, drawing inspiration from renowned websites.
The user experience was a top priority, and the purchasing process was thoroughly thought out, including selecting items, adding to cart, and completing the checkout process. Visual notifications were included to provide feedback for every user actions.
USER INTERFACE & EXPERIENCE
The user interface was designed to be easily navigable, with a standard header at the top featuring all pages, a search option, cart, favorites, and user profile.
A combination of typography, featuring both sans-serif and serif fonts, was utilized to convey the website's elegance and high-quality aesthetic. Work Sans was used for UI dynamic elements such as links, while Lora was used for descriptions and buttons.
page design
The homepage features a visually appealing hero image taking up the majority of the screen, with the goal of encouraging users to scroll down to view seasonal and trending collections.
The checkout process incorporated input fields with error handling and verifications, and a numbered path was provided to show the user their progress.
MOBILE VERSION
Given the fact that most online shopping occurs on mobile devices, it was crucial to design a mobile version of the website.
I transformed each menu into a burger menu and converted drop-downs into overlays. To enhance the user experience, I transformed the left-side menu on the shop page into a fixed arrow button on the left edge of the screen. This design decision ensures ease of access and fast navigation for mobile users.
Consistency was kept across both versions by converting the visual effects triggers from mouse events, to taps.
