Pinkoi Product Page Revamp
The primary key to a customer's purchase decision in e-commerce - the product detail page.
Product Detail Page Final Design (After Pinkoi Logo Redesign)
About the project
Summary
The product page is one of the key focal points in e-commerce. When customers visit a website and become interested in a product, they navigate to the product page. Customers who land on the product page have a higher likelihood of becoming buyers. They engage in various actions on this page, such as expressing interest, comparing products, exploring details, and reviewing ratings.
This project represents the largest-scale redesign effort and involved up to 30 different versions, spanning 12 sprints, 12 data experiments and street interviews. Ultimately, the project achieved its objectives of reducing page bounce rates, increasing the rate of adding items to the shopping list, and enhancing the purchase rate.
My Role
Product Designer
User research, Interaction, UXUI Design,
UX Writing, Prototyping & Testing, Questionnaire
Plat Form
Web, Mobile Web
Collaborative Partner
PM, Engineer, Marketing, L10n Team
Project Time
2019.10-2020.01 3 months, Agile+Scrum
12 sprint (10days / sprint)
Why Product Page?
When we reexamining e-commerce buyer's journey and marketing funnel, we found that evident that for both new and repurchased customers, the product page plays a crucial role in the user experience.
-
The product page encompasses several key interaction points, such as adding to the cart, add to the wish list, and viewing similar products. These actions are vital for building a relationship between Pinkoi and its customers.
-
Product page serves as a significant marketing entry point. Social media and shared links often direct users straight to the product page, resulting in higher traffic and exposure compared to other pages.
-
Through backend data analysis, we've observed that many non-purchasing users navigate between product pages, yet there is a relatively high bounce rate. This underscores the importance of the product page, which not only plays a critical role in the e-commerce ecosystem but also holds significant revenue potential.
Set Hypothesis & Sprint Phase
This project is built on the framework of Jobs to be Done (JTBD) sentence structures.The table below displays some of the hypothesis for the product page project:
Project Strategy
Based on the project assumptions from the previous step, we have segmented the project into three major strategies.
Strategy 1.
Highlight Product Pictures
We have optimized the presentation of product photos to expedite customer decision-making. By highlighting product images, we aim to streamline the process and reduce the time customers spend on “considering,” "finding more similar products," and “find more product of the store,” as well as minimizing the number of steps required for these actions.
Strategy 2.
Highlight Call-to-Actions
We've emphasized the next steps to help customers find entrances quickly, such as adding items to the shopping cart, adding to the wishlist, or exploring recommended products. This is designed to reduce the time customers spend on "finding the next action" and prolong their engagement on the platform.
Strategy 3.
Restructure Product Details
We have restructured the product information to let users can find the product information easily, also optimize the shop’s area. These changes aim to reduce the time customers spend on "finding product information" or the number of steps required to complete actions.
The Progress
This project falls under the responsibility of the Seller Squad Team. My responsibilities including all aspects of UI design, UX processes, defining functional logic, interaction design, user interviews, and testing, among others.
The team consists of a Product Manager x1, Backend Engineer x1, and Frontend Engineer x1. The PM is responsible for initial exploration, defining the Product Roadmap, formulating product hypothesis, and project management. Every team member is actively involved throughout each stage of the process. This allows each team member to contribute ideas and push decisions. Throughout the project's execution, we have cultivated a high level of teamwork, agility, and a fast-paced work environment.
Wireframe, Prototype & Test
Following the product strategy requirements, we engage in multiple rounds of brainstorming to generate various versions of ideas. After creating multiple sets of proposals, we prioritize discussions with team members. We then proceed with filtering and screening these ideas. In case of disagreements or differences of opinion, we involve all stakeholders from different departments to collectively arrive at the most suitable decisions and experimental designs.
Before designing, we go through several rounds of wireframe design brainstorming. These iterations are aimed at achieving the most efficient design exploration at the lowest cost possible. Before designing, we go through several rounds of wireframe design brainstorming. These iterations are aimed at achieving the most efficient design exploration at the lowest cost possible.
(Left/Right in the above image) During the wireframing stage, we create prototypes for testing. This allows us to collect design feedback and gather insights from different fields of expertise.
Design, Release & Optimization
This project has gone through 12 Sprints, and at each stage, multiple design concepts are created and launched directly for experimentation. Based on the data results, decisions are made regarding which versions to proceed with or whether further design optimization is required. Here, I will share two experiments conducted during different stages:
Sprint 07: Adding the Recommendation Module on the Product Page
We assume that adding a recommendation module to the product page can make it easier for customers to find desired products and increase their time spent on the platform. Then roll out three completely different and significantly distinct design and interaction concepts experiment directly and collect data. To test which version’s experience is better and also can increase the platform's conversion rate.
Version A: Adding the Recommendation Module to the Sidebar
Version B employs a pop-up window to recommend products.
Version C involves the appearance of a pop-up window at the top when a key action is triggered.
Sprint 07. Result
Each experiment runs for at least 14 days, involving the direct online participation of some actual users, and data is collected using Google Analytics (GA). The experiment results indicate that the bounce rates for the "Experiment Group B" and "Experiment Group C" experienced higher bounce rates on the e-commerce platform compared to the group with static product recommendations, "Experiment Group A," which had better conversion rates. Consequently, we will continue to refine the design concept of "Experiment Group A" in the future.
This also validates that overly aggressive or automatic experiences can hinder the shopping process. Common pop-up and top-of-screen slide-in windows, despite providing useful content to users, did not lead to an increase in click-through rates.
Sprint 09 Automatic photo carousel feature on the product page.
To test the "highlighting photos" strategy within the product hypothesis, the team conducted an experiment. When users entered the product page, the product photos were automatically displayed in a carousel, increasing the likelihood of customers viewing all the products. Additionally, experiments were conducted with different carousel time durations (5 seconds, 10 seconds). The goal was to reduce the number of steps for customers and the time required to find products, allowing them to quickly find suitable products and place orders.
Automatic photo carousel feature - mobile version
Auto Carousel Desktop Version
Sprint 09. Result
The results of this experiment were not favorable. In addition to collecting quantitative data during the rollout, qualitative user interviews were conducted to gather feedback and insights that couldn't be captured through data alone. The data showed that the photo carousel feature did not perform well, resulting in a high bounce rate and no significant increase in user dwell time on the page. Through user interviews, it was revealed that users preferred to manually browse through product photos, found the auto-play feature us an unexpected interaction.
Therefore, this experiment confirmed that product photos are a user-driven action, and the automated carousel feature, as an unexpected prompt, will led to the worse shopping experience.
(Left/Right images) User testing and interview
Street Interview
Towards the end of the project, in addition to quantitative data, we wanted to gather qualitative research data. Given the need for quick results, we opted for a simple method - "street interviews." Unlike the usual usability tests we conduct, there was no time for recruiting participants, setting up various tasks, installing recording cameras, or offering substantial monetary incentives. We had only one week to complete this task, including planning the interviews, preparing props, conducting the interviews, and documenting the results. We successfully executed user interviews in the streets of Taipei and on college campuses. The entire process was both fun and challenging. Besides gaining more design feedback, we also gathered insights into the user experience from unfamiliar users on the e-commerce platform. The process and experiences of these street interviews are detailed in a Medium article: [Link to Medium Article].
📝 Street Interview Initial Experience (Part I - Planning)
📝 Street Interview Initial Experience (Part II - Execution)
Street interviews were an entirely new and courageous experience for us. Besides summoning the courage to conduct random interviews on the street, we were able to gather responses that went beyond what was originally planned. These responses provided us with additional user needs, emotional insights, and valuable recommendations that we could offer to the company.
Street Interview
Interview Card
Interviewee Record Form
Achievements & Learning
1. Improve product pages to reduce customer friction in the purchase process.
- Increase the purchase conversion rate by approximately 10% on both Mweb and Dweb.
- Raise the proportion of customers adding products to their favorites by about 12% on both Mweb and Dweb.
- Confirm that placing product recommendations too high on the page leads to increased bounce rates and a poor customer experience.
- Restructure the product page layout on both Mweb and Dweb to address long-standing issues such as cluttered content and suboptimal product image interactions.
2. Conduct numerous experiments and validate data from multiple sources within a short timeframe to avoid data biases.
- Conducted at least 12 data-driven experiments during the project.
- Performed at least 10 internal user tests within the company.
- Executed 3 external user tests and interviews.
- Achieved high satisfaction levels within the 4-person team, which executed the most experiments and user interviews within a limited timeframe. The project concluded with a successful Retrospective Meeting, demonstrating excellent collaboration between the team and relevant stakeholders.
Retrospective meeting
Meeting
Meeting
Retrospective meeting
3. Bold Hypothesis and Design
In the past, design concepts were often limited due to constraints such as tight schedules, project objectives, or the inability to conduct experiments. However, this project embraced experiments and use bold hypothesis and greater diversity among experimental groups. This approach not only validated the project's original goals but also explored less common interaction designs, providing product designers with valuable insights and inspiration.
4. Rapid Trial and Error
This project heavily relied on real-world online experiments within a short timeframe, coupled with the rapid development pace of agile sprints. With only one Product Designer on board, the need for speed and efficiency was paramount. Activities such as brainstorming, ideation discussions, deployment, and user interviews required quick turnarounds. To facilitate effective communication, especially with stakeholders and founders, a more rapid communication approach was adopted. This increased communication frequency enhanced team cohesion and the number of iterations. The experiment results, both positive and negative, were highly practical, as setbacks often served as opportunities for learning. The knowledge gained wasn't limited to a single team but also benefited other teams by providing valuable reminders. Trial and error proved to be the best teacher for reducing future mistakes.
5. Ask Why first, then design
Creating visually appealing designs isn't the primary goal; it's about understanding the underlying reasons. When you don't comprehend user behavior, it's essential to consider how to conduct interviews, unearth the meaning behind data, and acquire the answers you seek within resource constraints. Sometimes, use the minimum viable action can yield significant rewards.
Final Design
Product Detail Page Final Design (Before Pinkoi Logo Redesign)
Product Detail Page Final Design (After Pinkoi Logo Redesign)
Product page on mobile
More Projects
Shipping Estimate System
Set International Shipping Fee at one time!
Pinkoi Group Pay
Let all customers checkout multiple shops at one time.
Pinkoi Business Site
Wholesale design, simplified.