︎

Facebook Shops
Checkout redesign


A redesign that overperformed goal metrics, increasing transactions and gross merchandise value, and a comprehensive component library that made designing and developing for web faster & easier.






On the Commerce team at. Meta, I worked on the Checkout and Post-purchase experiences across the Facebook and Instagram apps as well as facebook.com

I helped improve conversion and buyer satisfaction by developing strategic features and conducting growth experiments.



The Challenge

  • An outdated web Checkout flow on facebook.com, inconsistent with industry best practices and the Instagram/Facebook apps.
  • Different component systems on web and app, leading to UX inconsistencies and design/engineering inefficiencies. 




Hypothesis


Improving conversion on web will yield significant GMV gains due to AOV being consistently higher on Desktop.




Goals and Constraints

Business goals
  • Drive growth, increase transactions and gross merchandise value
  • Enable faster development by creating a unified component system across mobile and web

User goals
  • Provide an industry-leading and consistent user experience across all platforms.
  • Close the feature gap and allow buyers to checkout with the same options across mobile and web.

My role
Design lead in a cross-functional team (UXR, Data Science, Eng, Product)



Kickoff

Scoping and cross functional (Design, Product, Engineering, Data Science, Research) alignment
  • Defining product requirements, making early prioritizing decisions.
  • Sizing potential impact, determining success and guardrail metrics.
  • Aligning on an execution framework: stakeholders, cadence, resources, timeline and milestones.
  • Build cross-organizational partnerships, establish communication channels with partner teams.



Research and discovery

Research
  • Demographic data/segments
  • Past research and behavioral insights
  • Current funnel metrics, pain points
  • Industry white papers (eg, Baymard)
  • Competitive analysis

Discovery
Workshops and collaborative sessions with Content Designers, Researchers, Product Managers and Engineers help us define the user journey and  prioritize user needs.



Ideation and iterations


Information architecture
Our guiding principle was to prioritize consistency with mobile, while introducing thoughtful deviations based on learnings and web-specific patterns. For instance, a larger screen size allows to display the total at every step, which our research had sown was what users expected.



Navigation pattern
We aligned on a stepped pattern to minimize pushing content below the fold.


Modal/Fullscreen

In order to meet our timeline, we launched with a modal while continuing to iterate on our north star of a full screen checkout.



Visual design

A fully responsive experience



A holistic shopping journey



Responsive framework
I created and drove adoption of a responsive framework for the entire shopping funnel, ensuring visual consistency and streamlined workflow across teams with easy to use templates.


Component system
A responsive product system and component library aligned with the Facebook Design System, app, and purchase funnel. Outdated components and inconsistencies were resolved through collaboration with the engineering and design systems teams.




Outcomes and learnings

Outcomes
  • Increase in transactions and merchandise value beyond the original goal.
  • A streamlined design and engineering process with a comprehensive web component library aligned with mobile
  • Stronger cross-org partnerships
  • A more consistent user journey

Learnings
  • Early partnerships with stakeholders outside the organization were beneficial.
  • Balancing rapid iteration with systemizing components is crucial

Going Beyond
  • Continuously experiment, test, and improve.
  • Achieve our long-term vision for a full-screen, immersive experience.
  • Additional use cases like subscriptions and donations


Most recently on the Commerce team at Meta in New York. Formerly at mental health startup Spring Health and luxury furniture retailer One Kings Lane. Before that, I worked on short films, music videos, and visual design in Montreal.