Day 1: Kick-off Meeting

What are the project goals?

• Solve the current problems in checkout performance.
• Enhance customers' shopping motivations.
• Reduce the number of clicks in the checkout process.
• Emphasize the legitimacy, security, and privacy of the payment process.

"I want to optimize the checkout process; the customer can purchase our products more easily. So the conversion rate will increase." From the PM.

Who is the customer?

The customers are youthful (45% are 25-46 years of age); 75% male and 25% female. The majority of customers (75%) live in the US and Canada. Regarding payment, 65% of customers pay through mobiles and 30% through desktops.

What is the timeline?

10 business days.

What is the project scope?

The focus was litmited to optimizing the checkout process and improving the UI of the checkout pages. The final deliverables included hi-fi design (Zeplin files), design assets, and new screen flow. The shopping cart page and log-in/sign-up page are not part of this project.

Day 2: Metrics Analysis

I analyzed the checkout page, in which only 21% of the traffic proceeded to buy. If we could increase that to 40%, it would result in 4 more orders per day and an additional $20,00 per month—30% revenue growth.

Google Shopping Behavior Analysis: See Large View

"How do we get more people to go through our checkout flow and complete purchases? "

My Design Hypotheses:

I believe that the "One-page checkout" layout can accelerate the customers' checkout process, leading to improve the sales and conversion rates.

The Current checkout user flow: See Large View

Seecurrent checkout pages

Day 3: Brainstorm

I created three concepts of the "one-page" checkout layout： C1:Three-section Layout; C2: Classic Layout; C3: Compact Layout.

Day 4: Wireframes

After interviewing with stakeholders and conducting a heuristic analysis of the current pages, I created the low-fi wireframes based on C2: Classic Layout.

Desktop:

Mobile:

Day 5: Low-Fi & Prototyping

I created the clickable low-fi prototypes and had the team try them on Figma, which resulted in positive feedback.

Desktop Version:

Mobile Version:

Day 6: User Testing

I conducted guerilla user testing with three participants, using the prototype on desktops and mobiles. All three felt the checkout flow is better than the old one, especially on mobile devices.

Day 7: Create Design Guide

Day 8: High-Fi & prototyping

I finished "One-Page" Checkout and confirmation Page.

See details on figma file.

Hi-Fi Prototyping

Desktop:

Mobile:

Day 9: Final Tweak & Checkup

Spacing checkup

4px grid check

Content and Spelling check up.

Day 10: Design Handoff

Screen Flow

Design Files Zeplin file.

Design Assests Zeplin file.

Results and Takeaways

The design received positive feedback and the average checkout duration reduced 25%. In retrospect, I might have started the design guide and created the component library earlierin order to generate consistent styling pages.