Pinkoi Discover
Explore Pinkoi Magazine and discover unique designs.
Pinkoi APP - Discover
About the project
Summary
The new Discover feature uses rich and diverse content to provide users with the fun of exploration, highlighting the company's brand value and brand differentiation, and implementing the brand vision "Design the way you are." ; and help users deeply explore the long-tail and featured topics selected by Pinkoi .
Discover has successfully become one of the starting points for users to explore Pinkoi. The feature uses a new interface design, micro-interaction effects and continuous development iterations. The adoption rate increased from 19% to 26% within 3 months, and the user click rate on products reached a new high.
My Role
Product Designer
UIUX Design, UX Writing, Prototyping,
Interaction Design
Plat Form
Web, Mobile Web
Collaborative Partner
PM, Engineer, Wholesale departments
Project Time
2024.8 - 2024. (1.5 months)
APP
How we Start & What we found
This project was led by the Buyer Squad Team. Since it was a brand new feature and project from 0 to 1, in addition to the familiar cooperation with PM, Dev, UR, PA, and L10n, we also worked with the cross-departmental Curation team to create this feature product. I was responsible for the full-featured page design, interactive experience, and spec writing. I also served as a coordinator between departments, building a bridge between requirements and company goals.
This project places special emphasis on interactive displays of animation effects. In addition to having a simple and easy-to-read layout, it is expected to accommodate multiple languages, break away from the previous purely static page, and increase the product's interactivity.
After the project started, we worked with the UR Team to conduct a questionnaire survey on different types of users (Visitor/Member/Buyer). In addition to exploring the feasibility of the function, we also made preparations for the "curated content" in the function; at the same time, I started to plan the design strategy.
The Progress
The Discover function will provide inspiration explorers with a browsing page with a "sense of context" and "magazine feel", helping them to discover content full of "freshness" and "design sense" on Pinkoi. In the short and medium term, we hope that Discover can be a place for users to start early exploration. In the long run, we expect Discover to highlight the Pinkoi Vision - "Design the way you are", enhance brand value and content depth, and become the most differentiated and distinctive page between Pinkoi and other platforms, attracting new users and increasing user retention.
【Project indicators】
-
Journey
-
Click-through rate from Discover to product pages
-
Page browsing depth
-
-
Mid-Journey
-
Browse more topics on Discover
-
More interactive rate with features, like:
-
Add to favorite
-
Share
-
Add to cart
-
-
Design Strategy
This project was advanced using a "design-led" approach, starting with "template analysis" and close discussions with stakeholders. Requirements were collected proposals, allowing for rapid iteration, information sync, and making every decision together. Through competitive product analysis and layout ideas, we developed three different layout browsing methods:
-
A. Combine exploration and wandering:
Horizontal sliding of themes: full-screen large pictures and titles are the main features, one screen is a theme, and sliding left and right is the sub-theme of the theme; combined with switching between vertical themes and appropriately curated graphics or video content, a rich visual interface experience can be presented.
-
B. Picture and text catalog display:
Each curatorial topic is integrated with pictures and texts and presented in a list format. Click to enter the details page to see the full content; quickly swipe to see multiple articles.
-
C. Gallery style:
Mainly based on pictures, it presents an electronic browsing method of viewing picture albums, with a function that can switch the picture display method, so that you can select the topics you are interested in and then browse more.
Discussion on the Design Strategy of Template Browsing Method
Combining the survey results, project strategy goals, planning materials and manpower, etc., we chose B. Graphic catalog display to start the next step of detailed design. At the same time, we discussed with the curator and L10n team about the appropriate image size, text presentation, data classification and label classification structure, providing the most appropriate recommendation modal according to type in the future, which can be extended to localized presentation in various regions. At the same time , we formulated the "Design Strategy Guidelines" for this project , leading the team to have a clear context to follow when thinking about the choice, and to make the basis for the selection of the type and style.
-
In line with the Pinkoi brand tone, different new design vocabularies are created according to the Discover theme and values.
-
The layout is mainly based on pictures, supplemented by text
-
The layout is flexible enough to accommodate various languages and multiple lines of text
-
Add "micro-interaction" design , you can feel the page feedback while browsing and scrowing
-
In the future , it can expand more complex functions and retain development flexibility
Cart Page Design
The organizational structure of Discover starts from the list page. In order to present a sense of surprise in the content, every week will present five new topic content so that users can view new topics when they open the page. The first part, "New this Week", displays five topic themes in a carousel and records the first article the user sees. Even if the content is not scrolled, topics that the user has not seen can be presented. This logic is used to increase richness and freshness, then hope to develop a habit of regular visits.
This page also adds dynamic effects when scrolling up and down. By moving to each card, there will be a zoom in and out effect, which reminds users that they have switched to the next topic, increases user attention.
Cart Page
Listing Page - English version of the actual interface
Scroll Interaction Details
List Page - Japanese version of the actual interface
Cart Page Design
When entering the details page, the title and label Slide-in effect is added to attract the user's attention and read the title and the content description below . The content is deliberately written between 80-120 words, which is just the right number of words to not increase the reading burden but can be understood quickly. The staggered form of the pictures is not limited to squares, and can accommodate more situations. At the same time, the carousel is used at the end of the layout to dynamically present, so that users can see all the products without sliding, and have the effect of "taking another look".
After reading, the following logic is used to recommend topics similar to this one, hoping to entice users to click on it . Related tags are also displayed at the very bottom. Even if the topic of this article does not meet expectations, more tags may be seen to guide clicks, achieving the effect of "visiting again and again" .
List Page - Actual Operation Video
Scroll Interaction Details
Listing Page - English version of the actual interface
List Page - Japanese version of the actual interface
Let's see the Results
&
Start with the low-hanging fruit 🍊
Results after one month of launch.
-
After Discover was launched, the adoption rate was pretty good. However, only a small number of users would go to the Discover details page.
-
Users do not browse the list page deeply (the average scroll is about 3-4 cards), and most of them do not click on it. Only a small number of users will scroll to the end of the page.
-
As long as the user enters the details page, the proportion of clicking on the product page is about 34%, and on average they will scroll to about 12 products, which is a very good performance, showing that the theme curation content has a certain appeal.
What the low-hanging fruit iteration does:
-
Reduce image height: Reduce the height of the image to maintain the browsing experience while allowing the content title below to be seen faster, hoping to attract users to scroll down to see more.
-
Title names are displayed in regional languages: Previously, all languages were displayed in simple and easy-to-understand English. After changing to Chinese, users do not need to switch between two languages. It is hoped that the content prompts of each section will be strengthened, attracting users to stay longer and increase clicks.
-
Add tag hints to cards: Display tag hints to arouse users’ curiosity and encourage them to click to enter the details page.
-
Add notification reminders: Add APP Push reminders every Monday, also add a tab to display the word NEW, and cultivate the habit of users to visit regularly
Results:
-
Usage of entering the details page has increased : successfully breaking through the new high and continuing to rise
-
Enter the Tag page to improve : Directly grow by 2% within 7 days
-
Improved product page visits : After optimization, the rate increased from 34% to 37.5% in one week. This means that as long as users enter the details page, 37.5% of them will be pushed to the product page, and they will browse about 13 products on average at a time.
-
Adoption Rate continues to grow : compared to about 19% one week after launch, the adoption rate has grown to 26.1% after optimization
Before & After
Data performance
Featured for APP of the Day 🎉
In January 2025, Pinkoi APP was nominated for publication in TW, HK, MO, and JP App Stores. The Discover function was also highlighted in the article, and the App Store browsing exposure was increased by DoD+84%, which also represents Apple's recognition of the product!
-
Editor’s Choice: This prevents users from being overwhelmed by the selection and improves overall shopping convenience.
-
AI personalized recommendations: The "Similar to this product" function provides users with tailor-made product recommendations.
-
APP "Discover" function: a selection of various exploration styles.
-
Follow designers: receive instant notifications when products from your favorite designers are available.
-
Gift Guides: Pinkoi gift guide and other selected theme pavilions, allowing users to use them as a starting point for inspiration.
Takeaways & Learning
1. Is it difficult to advance from 0 to 1? Projects can also be smoothly advanced by "design-led"
-
Regardless of their role, some people are afraid of encountering projects from 0 to 1. Using existing data to estimate functional corners and an unlimited scope will make many people back off. This project uses a "design-led" approach to advance the project. Through discussions on various products, processes, lines, or images, etc. , and the collection of opinions and data feasibility from all stakeholders, make this project successfully put online for verification. During the communication process, it is also necessary to grasp the priorities and the appropriate development pace to avoid too long development or too simple functions that cannot be verified. This is one of the successful "design-led" projects.
2. With precise strategies, low-hanging fruit can also shake up the results
-
After the project was launched, due to human resources and schedule constraints, I could not use too many resources for experiments and adjustments. So I initiated my own hypothesis and discussed with engineers to make fine adjustments, which successfully improved the data . At the same time, it was verified that even very simple English words cannot replace local terms. Even short titles can make users understand the meaning faster and have an interest in reading down and deepening the scrolling depth . Content management may not see much effect within one month of launch. It takes time to accumulate and wait patiently. After the curatorial team tried various themes, they were able to see considerable results in the third month of launch, and some users also revisit regularly.
3. The importance of micro-interactions
-
This project has added a lot of micro-interactions to the design, which enhances the operational experience of the original static scrolling interface, and helps visualize the results of the behavior , so that the product can convey pleasant user feedback through details . This project adds dynamic effects when scrolling, so that users can clearly know where they are sliding, and through interactive operations, increase readability, such as: gradual sliding when the Top Bar slides, title Slide in..., etc., to catch the reader's attention and increase the product interaction rate.
More Projects
Dcard AI Lab
Where Ideas Transcend, Solutions Emerge
Product Page revamp
Browse product easier and shop happier.
Pinkoi Shipping Estimate System
One click to estimate shipping cost.