To capture customer interest in the products right from the homepage, large images of the products will be displayed. Each product image will reveal only half of the product, and as users scroll, additional product images will appear on alternating sides of the screen.
This approach aims to pique customers' curiosity, encouraging them to explore the full product details on the product listing page. This design not only funnels users into the ecommerce flow but also showcases the product's fine details through these prominent images.
On the product listing page, each item will be displayed individually with a large product image, minimal text, and a neutral background. In the future, when 360-degree images are available, the product will automatically rotate as users view it. This design emulates luxury brick-and-mortar stores, giving each product its own spotlight, offering a high-end experience, and highlighting the product's craftsmanship. The owner of Sareta Designs mentioned that the website will typically feature only 5-10 products at a time, so dedicating the full screen to each product shouldn't hinder the user experience.
For easy viewing of multiple products at once, users will also have the option to view the product listings page in the traditional grid style.
On product detail pages, large product images will be displayed, along with a clear 'Add to Cart' button at the bottom of the screen. When users scroll down, the 'Add to Cart' button will disappear, and the images will shrink, making it easier for users to read about the product details. When users scroll back up, the 'Add to Cart' button will reappear, accompanied by the larger product images.
The wider desktop screen allowed for positioning elements along multiple columns, unlike the mobile design where most elements were confined to a single column. This is noticeable on the product details page, where the 'Add to Cart' CTA is situated to the right of the images, and on the 'Your Cart,' 'Shipping,' and 'Payment' pages in the checkout process, where the Order Summary is positioned to the side.
Prioritizing the restructuring of the website's information architecture was essential, as it was one of the greatest struggles users had with artist websites.
The current website features CTAs on the homepage that lead to pages with unclear titles like "Kimono," "Home," and "Messenger." To enhance website navigation, the information architecture was restructured, resulting in the main pages being "Behind the Seams," "Product Care," "Gallery," "Shop," and "Conventions.
Since purchasing products from the website was important to both the client and customers, the task flow for this process was mapped out.
To capture customer interest right away, the homepage features large product images against a black background, enhancing the vibrant kimono fabrics. The 'Shop' CTA remains fixed at the center of the screen, emphasizing the website's online shopping focus.
The uniqueness of Sareta Designs' products, crafted from different kimonos, is highlighted in the 'Originals Only' section before the gallery CTA. To increase this section's visibility, the gallery was strategically placed after 'Originals Only', since users will look for the gallery. Based on the client's needs, additional homepage sections include more information on kimonos, upcoming conventions, and the Sareta Designs Instagram.
Since only 5-10 products will be listed on the website at a time, each product is individually showcased on the product listing page to display the product's finer details and provide a high end feel. Future 360-degree images will enhance this experience with automatic rotation. A grid view option is available for viewing multiple products simultaneously.
The product details page features large images and a prominent 'Add to Cart' button. As users scroll down, the button disappears, and images resize to accommodate the details text. Scrolling back up restores larger images and the button.
The checkout process is divided into three sections: Shipping, Payment, and Review. A progress bar at the top helps guide the user through these steps, reducing user fatigue. As each section is completed, a checkmark appears next to its title, offering positive feedback to the user.
To optimize for desktop, screens were designed on a 12 column grid instead of the 4 column grid used for mobile devices. A top navigation bar was added for quick navigation. On the product details page, even when scrolling, the images remained large and the 'Add to Cart' CTA was static since the wider desktop viewport could accommodate all these elements simultaneously, unlike the constraints of mobile screens. With the increased screen width, the Order Summary was displayed on the right side of the Shipping and Payment screens during checkout, ensuring transparency to the customer regarding the total cost.
Improvements to the Homepage and Product Listing Page include...
