Community Voices Hub
The Community Voices Hub is a web app showcasing Meta’s Community Voices video series, highlighting how people use Meta’s products to create positive global impact. Designed as a living portfolio, it emphasizes the meaningful ways Meta contributes to the world. The site features an interactive user flow with perspective and depth of field, aligning seamlessly with Meta’s new branding.
Perspective, Depth of field, GSAP, Web
One of Meta’s key objectives—and by extension, its marketing communications team—is to reinforce its continued relevance and future potential. The Community Voices series has been instrumental in shifting brand sentiment by showcasing the positive impact of Meta’s products on users’ lives. I led the design and engineering of the Community Voices Hub, crafting an experience that integrates perspective and innovation into each module. The site not only highlights individual stories but also provides a platform to amplify their causes and drive meaningful support.
Things to keep in mind
The Reasoning
No dedicated hub to showcase Community Voices stories—previously shared only on social media.
No platform for the community to promote their causes or initiatives.
High priority on Community Voices as a key initiative to strengthen Meta’s public image.
THE DYNAMICS
Limited resources allocated for web development.
Previously produced stories did not account for web assets, requiring adaptation.
Will be integrated into about.meta.com as a flagship initiative.
The Goals
Reduce bounce rate on about.meta.com overall.
Increase views of Community Voices films.
Drive engagement with community initiatives like charities, FB Donations, and organization discovery.
The Context
Existing tech stack lacked tweening capabilities, making perspective animations challenging.
Community Voices previews already existed on about.meta.com as simple looping videos linking to social accounts.
Let’s conceptualize
Through the use of animations, transitions, and UI design, we crafted a user flow that allows users to sequentially learn more about Community Voices stories. By engaging users with these visual elements, we managed to tell our stories thoroughly and effectively.
When a user selects a story, the summary thumbnail smoothly transitions into the full summary page, seamlessly revealing additional content and the featured video.
Results
This project was the first of its kind and served as a proof of concept for launching a site on Meta’s internal React renderer. It also paved the way for implementing the same renderer on Meta’s main communications corporate site, about.meta.com.
By utilizing animations and interactive transitions, we created a site that achieved excellent bounce rates and engagement rates during testing.
Bounce Rate
-60%
Learning Engagement
92%
Design and Engineering Lead for Web @Meta
Bay Area California
Featured Work
004 /007
Company
Meta Platforms
Involvement
- Product Design
- Front-end Eng
- Motion
Project Info