Prismic Flow
Brief
Validation mode and Editor UX, Enhanced AI assistance, Design Tools
Stack
OVERVIEW
Current Issues
Teams using Prismic face a trade-off: lax validation leads to fragile frontends and runtime errors, while rigid validation slows editors and encourages placeholder content, designers also struggle to keep layouts consistent. There’s an opportunity to introduce a lightweight, incremental validation framework (modes + content contracts + editor UX + runtime fallbacks) that improves data safety, speeds up authoring, and preserves visual integrity with minimal friction.
01
RESEARCH
Defining Problem
To align the end goals of designers, developers, and marketers, I conducted initial research using sources such as Reddit, LinkedIn, and industry blogs. This helped me gather insights into their specific needs, goals, and pain points, providing a foundation for mapping opportunities for collaboration and solution design.
02
RESEARCH
Main Focus
The refined goal centers on streamlining workflows, ensuring content consistency, and improving cross-team validation. These factors highlight the importance of efficiency in execution, clarity in communication, and reliability in outcomes. By studying how existing products manage these aspects, opportunities emerge for Prismic to strengthen its positioning with a solution that balances technical precision with creative flexibility.
01
RESEARCH
Existing Competitiors
The main focus of this comparison is to highlight the strengths and weaknesses of leading CMS platforms: Builder.io, Strapi.io, and Contentful. Each solution offers unique advantages, from Builder.io’s visual editing for marketers and designers, to Strapi.io’s open-source flexibility, and Contentful’s scalable API-first model. At the same time, the cons emphasize key gaps around scalability, collaboration, and usability for non-technical roles, showing where opportunities for a more balanced, user-friendly solution exist.
01
USER PROFILE
User Personas
I created these personas, a designer and a software engineer at Prismic, to reflect the real challenges, needs, and goals of each role. They allow me to better understand where misalignments happen, identify opportunities for smoother collaboration, and guide the design of solutions that address both perspectives while pushing the overall project forward.
03
IDEATION
Initial Sketches
For the initial sketches, I focused on mapping out the core layout and functionality. I explored key elements like the editor, tabs, terminal, and action buttons for running code and comments. The goal was to quickly visualize how these features could work together in one workspace.
04
FINAL DESIGN
Prismic Flow
My final design, Prismic Flow, introduces Validation Modes, an improved Editor UX, and lightweight runtime defaults to make collaboration clearer and more reliable. From early sketches to high-fidelity mockups, I focused on conflict resolution, validation feedback, and real-time teamwork, ensuring a smoother, more scalable content editing experience aligned with Prismic’s brand.
04
FINAL DESIGN
Workflow
My final design, Prismic Flow, introduces Validation Modes, an improved Editor UX, and lightweight runtime defaults to make collaboration clearer and more reliable. From early sketches to high-fidelity mockups, I focused on conflict resolution, validation feedback, and real-time teamwork, ensuring a smoother, more scalable content editing experience aligned with Prismic’s brand.
05
IDEATION
Writing Code
Code in Prismic Flow can be written in multiple languages across frontend and backend, making it flexible for different project needs. Real-time comments enable seamless collaboration between designers and developers, ensuring changes are clear and actionable. Validation Mode further supports the process by flagging conflicts between UI and code, helping teams maintain consistency and prevent errors.
05
IDEATION
Editor UX & Validation Modes
The Editor UX in Prismic Flow enables marketing teams to seamlessly add and edit slices, hero sections, and titles, with changes reflected across design and code. This two-way connection ensures that updates made by editors align with the work of designers and developers.
05
MARKETING & ADVERTISMENT
Product Promotion
Prismic Flow would launch with targeted emails for existing users, a website spotlight with a countdown timer, and engaging Instagram content showcasing collaboration and speed. This multi-channel rollout builds anticipation and highlights how teams can work better together.
