Meta
AI Studio is a platform designed to be the birthplace of groundbreaking AI experiences. It serves two primary user groups: Creators: A platform for building and sharing AI experiences, regardless of technical expertise. Consumers: A space to discover, explore, and get inspired by novel AI experiences. The goal of this project was to transform AI Studio into a user-centric, scalable, and accessible platform that fosters collaboration, innovation, and ease of use.
Client
Meta AI
Role
Lead Designer
Year
2022
Category
Design Systems
The Problem
1. Lack of User-Centric Design
An internal UXR study conducted with Meta employees (designers, PMs, engineers, and research scientists) revealed that the existing AI Studio experience was not user-centric. Key pain points included:
Difficulty in exploring and understanding demos.
Challenges in building upon and scaling existing demos.
Limited collaboration opportunities with external teams.
2. High Drop-Off Rates
User retention was a significant issue, with drop-off rates as high as 55%. Key reasons for user disengagement included:
Difficulty sharing prototypes externally for UXR or data collection.
Inability to integrate AI Studio with other tools or frameworks.
High friction in finding and trying demos.
Complexity in creating usable, performant demos independently.
Goals
Increase Demo Output: Develop a coded component library to accelerate the creation of AI experiences.
Boost Intentional Use: Improve in-app usage metrics and average time spent on demos.
Enhance User Experience: Make AI Studio more user-centric, accessible, and scalable.
Constraints
Engineering Support: Limited engineering resources risked delaying the project timeline.
Featured Apps: Deciding which apps to prioritize for design and engineering efforts.
Non-Featured Demos: Ensuring legacy and non-featured demos remained functional despite not receiving updated designs.
Future-Proofing: Standardizing the look and feel of demos across teams and designers.
Themes
User-Centric: How might we ensure AI Studio serves both internal users and creators effectively?
Accessible: How might we lower the barrier to entry for creating demos?
Scalable: How might we scale AI Studio to integrate with other tools and frameworks while meeting diverse team needs?
Process
1. Research & Analysis
Conducted internal UXR studies to identify pain points and user needs.
Analyzed drop-off rates and user feedback to prioritize areas for improvement.
2. Design Modifications
Redesigned the UI/UX to make the platform more intuitive and user-friendly.
Created a standardized design system to ensure consistency across demos.
3. Technical Overhaul
Audited existing apps to identify areas for improvement.
Converted the platform to React Native for better performance and scalability.
Explored integrations with external tools and frameworks to enhance functionality.
4. Component Library
Developed a coded component library to streamline the creation of demos.
Enabled designers and engineers to collaborate more effectively.
5. Backlog & Fixes
Addressed a backlog of bugs and additional findings to improve overall platform stability.
Outcomes
1. Increased Visibility
Launched a new release for external Meta teams, fostering collaboration and awareness.
2. Optimized Workflow
The implementation of the component library improved collaboration between designers and engineers, resulting in faster and more efficient workflows.
3. Improved Metrics
Reduced drop-off rates and increased in-app usage metrics, indicating a more engaging user experience.
Lessons Learned
1. Revolving Door of Resources
Shifting organizational priorities led to frequent resource reallocations, requiring flexibility and adaptability.
2. Constant Rebranding
The transition from Facebook to Meta mid-project introduced additional complexity, requiring alignment with new branding guidelines.
3. Balancing Priorities
Deciding which apps and demos to prioritize was a constant challenge, requiring careful consideration of user needs and business goals.
Conclusion
The AI Studio redesign project aimed to transform the platform into a user-centric, scalable, and accessible hub for creating, discovering, and testing cutting-edge AI experiences. Through internal research, key pain points were identified, including high drop-off rates, difficulty in sharing and integrating demos, and a lack of user-friendly design. The team addressed these challenges by redesigning the UI/UX, developing a coded component library to streamline demo creation, and converting the platform to React Native for better scalability. Despite constraints like limited engineering resources and mid-project rebranding from Facebook to Meta, the project achieved significant outcomes: increased visibility among external teams, optimized workflows, and improved user engagement metrics. Key learnings included the importance of flexibility, user-centric design, and standardization for scalability. This redesign positioned AI Studio as a more collaborative and innovative platform for both creators and consumers.
Next Steps:
Continue iterating on the platform based on user feedback and evolving needs.
Expand integrations with external tools and frameworks to enhance functionality.
Further optimize the component library to support even faster demo creation.