Pinkoi Group Pay
Cart Page Revision
Group Pay - Let all customers checkout multiple shops at one time.
About the project
Summary
The shopping cart page cannot achieve the function of purchasing multiple stores at one time before. This project is to solve the pain point of "you can only buy one store at a time" when you checkout. In addition to changing the shopping cart operation process, it also involves all discount structures, receipt information filling, payment process, refund system...etc. change. Achieving various outcomes, including: reducing the duration of the shopping process, minimizing buyer hesitancy, and boosting the average monthly spending of buyers.
This shopping cart revision project is one of the largest revision projects for Pinkoi's e-commerce website. In addition to the large project changes, it is also the first time to try agile/scrum development. In addition to successfully achieving results, it has a major impact on the company's subsequent development process.
The redesign project of this shopping cart is one of the most significant overhauls on Pinkoi's e-commerce page. In addition to the substantial engineering changes, it is also the first time to try agile/scrum development. Not only has it proven successful in achieving its objectives, but it has also had a profound impact on the company's subsequent development processes.
My Role
Product Designer
User research, Interaction, UI Design,
UX Writing, Prototyping, User test
Plat Form
APP(iOS, Android), Web, Mobile Web
Collaborative Partner
PO, Engineer, Customer Relationship, Marketing, Finance, CS Team
Project Time
2018.02-2018.05
Website
Project Hypothesis & Goals
This project is built upon the framework of Jobs to be Done (JTBD) and extensively gathers shopping cart processes from both domestic and international e-commerce platforms. It combines data exploration from our own website at that time and second-hand e-commerce data. Then plan all the hypothesis of this project. The table below presents some of the project's key hypothesis :
Shopping Cart Page Scope Inventory
The Progress
The team member including one Product Owner (PO), two Product Designers, one Back-End Developer (BE), one Front-End Developer (FE), and three App Developers (APP Dev). Due to the complexity involving multiple pages and logical structures, the two designers share the workload and are responsible for all aspects of UI design, UX processes, functional logic definition, interaction design, user interviews, and testing, among others.
This marks the company's first project to use Agile development which also influence the development processes for subsequent large-scale projects within the company.
Team daily discussion
Team daily discussion
Wireframe, Prototype & Test
This project involves extensive modifications to existing logic and rules. In the beginning significant time is dedicated to discussing the processes and collaborating with engineers. Then I proceed to create wireframes, flow and prototypes, engineers can build the infrastructure function at the same time. Each process can have multiple design options, and throughout, there are several rounds of discussions, user tests and cross-departmental collaboration. Then build the final design mockups and handoff the specs to the engineers.
Flowchart
The shopping cart page is the most of the important page of e-commerce revenue, and the design process is finalized after several cross-departmental discussions and adjustments
Design
Before
After
Step 1. Select the Store and Products, Enter Promo Code
Step3. Purchase Completed
Step 2. Fill in Recipient Information and Payment Details
Shopping Cart Page (Left/Computer Ver., Right/APP Ver.)
Takeaways & Learning
1. Project Achievements
-
Survey Results: The satisfaction score for the merged checkout reached 4.02 out of 5.
-
After the implementation of the merged checkout, it accounted for up to 30% of the total GMV, and this percentage is steadily increasing (subject to the influence of holidays and discount promotions).
-
There have been no system abnormalities reported post-launch, and the customer support team has not received an excessive number of negative reviews or user operation issues.
-
Following the launch of the merged checkout feature, we received user reviews on the app.
2. Breaking Down a Giant Project into Smaller Steps
When dealing with a massive project, breaking it down into several smaller sub-projects is important. Before breaking it down, it's essential to list out all the stakeholders involved in the project. This step not only helps in identifying potential challenges in advance but also allows for the discovery of any overlooked aspects.Through multiple cross-departmental discussions, we also facilitates the evaluation of the effort and impact of each functionality and prioritize every backlogs.
3. Show Your Ideas and Explain Design Strategies
When faced with the most important page of a company's project, one of the approaches I took was to openly present all design proposals. This approach involves gathering relevant stakeholders, explaining all design strategy options, and actively involving development engineers in the discussion. It not only streamlines the design decision-making process but also reduces the time and communication costs associated with multiple rounds of discussions. Additionally, it enhances idea consistency and fosters mutual support when facing various challenges during development.
4. Being an agile action tester
This project involves multiple departments and the development team members. In addition to the two points mentioned earlier about frequently explaining design strategies, it's essential to conduct usability tests within the company when necessary. We can involve five internal testers for different design versions. This not only allows us to collect feedback quickly but also provides insights into user interactions during the testing process. These insights help us make informed design decisions and can be shared with other product team members. Sharing more practical test results can have a more significant impact!
More Projects
Shipping Estimate System
Set International Shipping Fee at one time!
Product Page Revision
Browse product easier and shop happier.
