Re-design Zalando
Product Page
How does proper UX design improve fast-fashion checkout and boost sales?
PROJECT BACKGROUND
DESIGN CHALLENGE
I chose Zalando because I am familiar with the platform. Based on my experience, I can empathise with myself as a user while shopping online, selecting a product, and making a purchase. Zalando is one of the biggest fashion e-commerce platforms in Europe.
How proper UX design improve fast-fashion checkout and boost sales?
PROJECT GOAL
HOW WE RE-DESIGNING ONLINE FASHION PRODUCT PAGE
The issue with these features is that the layout for the Product Page is too long, taking up too much space on the PDP Layout. There are several issues with the interface, such as an excess of boxes and icons that need to be aligned with the others, which makes them unusable.
I strive to streamline design and provide efficient, on-point information on the PDP. How effective are visual elements for additional services on the Product Detail page?
Key insights from responses:
_ Not to overload the page with too much information.
_ We can use visuals and other elements to provide clues as necessary information.
_Accurate product details and good images are essential for successful sales.
_The top reasons for returning an item are poor fit and wrong size.
_Detailed and accurate product information reduces the frequency of returns.
TREND RESEARCH
FASHION E-COMMERCE
By adjusting content to meet our business requirements, we stitch together information from multiple platforms, allowing us to quickly identify the content needed for our own prototypes.
Matches Fashion and YOOX are the ultimate destinations for high-end fashion enthusiasts looking for an unparalleled luxury experience. With their user-friendly interfaces, frequent discounts, and extensive multi-brand options, they offer a one-stop shop for fulfilling all your fashion aspirations. Whether you're looking for the latest trends or timeless classics, Matches Fashion and YOOX have got you covered.
North Face inspires its customers with premium e-commerce services, providing exceptional product imagery, intuitive icons, and easy-to-read text that simplifies online shopping.
Experience the world of fashion at ASOS through their user-friendly and highly informative website, where a smooth checkout process ensures your satisfaction.
USER RESEARCH
Personas
Customer Journey Map
PROBLEMS AND SOLUTIONS
OPPORTUNITIES
The users must see and access the features of a product easily. To achieve this, the information details must be visible to the users. The Product Detail page plays a significant role in providing all these elements. I have conducted a study to improve the Product Detail page layout. This includes pricing, features, services, and accessible information access. Based on my findings, placing the additional services AFTER the Call-to-Action (CTA) button provides a more cohesive user flow. It is important to determine which information deserves an icon and which data should be represented by text.
-
Make the additional service information more visible by using a clearer interface
-
Put visible icons for sizes and colours. They found that it was very easy to locate the size and fit information.
-
Pop-up suggestions can be utilized to display related products in a simple and integrated manner with other elements.
Impulsive buying behaviour is common among customers in the fashion market. However, the website and product detail page are made to be more visually clear to attract users to browse and ultimately buy at the last minute. Users are encouraged to post looks and inspiration to increase engagement and drive sales.
_The information on the product page should be clear and easily visible to the user.
_Highlight additional service
_Clear understanding comes from seeing.
KEY FEATURES ON NEW PRODUCT PAGE
The information on the product page should be clear and easily visible to the user
Highlight additional service
Clear understanding comes from seeing
View more features for sugestion more align to centre
I made the ‘discounted’ text more visually bold and catchy regarding the discounted item. I also placed an accompanying icon on the right side to create a more balanced look. The pop-up box, which appears in light orange, has a limited size because, in some cases, the discounted product only appears in a specific colour.
The icons on the right of every image convey information about likes and sustainability, while those on the left provide details about new and discounted items.
The images for sugestion more align to centre
I suggest adding a tag under the photo to match the product or service.
I have updated the information by organising it in boxes and ensuring that the information in each box matches with other relevant information in that box.
To indicate clickable areas, I used hover effects on the icons.
Opportunities to change the layout position on title design brand
I made the footer bold by changing its color to black, instead of using purple as an accent for the brand title.
The icon can be placed beside, on top of, or to the right of the brand to avoid repetition.
Current Zalando's Product page
New design Zalando's Product page
HIGH-FIDELITY
FINAL RE-DESIGN PRODUCT PAGE ZALANDO
Providing additional service information in a separate and distinct box enhances user understanding and accentuates policy focus. The inclusion of recycled material in the additional service information is of paramount importance.
The tooltip information about recommendations has been strategically positioned on the page, preceding similar items. This approach has been adopted instead of duplicating tooltips across every section. The change has been made to streamline the user experience and ensure the required information is conveyed clearly and concisely. The tooltip information for recommendations is visually displayed before similar items instead of repeating tooltips in every section.
KEY TAKEAWAYS
Through this project, I have tested my hypotheses regarding a rising challenge predominantly caused by the fashion industry and our shopping practices. It has made me realize that even slight improvements can significantly impact.
Zalando faced the challenge of customers struggling to navigate through their vast range of options instead of the range itself. Creating a browsing experience that could solve these issues was complex, but it presented an opportunity to rethink fashion e-commerce search and browsing. A product page is a dynamic element of a website, which requires continuous research and testing to develop all aspects and minimize the risk of creating products that won't function correctly. It's essential to balance testing enough design changes and gaining clarity from the test results.
During this project, I gained valuable insights into the contrasting behaviours of the target audience. I made efforts to incorporate these differences in new designs, for example, by adjusting additional services and redesigning the product information and suggestion. These disparities provided us with the opportunity to explore various design options.