A fast, intuitive, and scalable tool that enabled journalists to publish mobile-first stories in minutes.
Position
Senior Product Designer
Company
Omelete Company
Platform
Web App (Desktop+Mobile)
Duration
4 months (Sep 2022 – Dec 2022)
Team
Me + 2 developers + Tech Lead
Tools & methods
Figma · Interviews · Usability Tests · Design System
Omelete Company relied on an external tool to publish Web Stories, their highest-traffic content, with 4–5 stories produced daily for a 15M-monthly-user audience. When the tool became paid, the newsroom faced slow workflows, inconsistent layouts, and unstable previews. We needed an internal CMS fast and tailored to how journalists actually worked.
We had only 4 months to design and build a CMS that eliminated SaaS dependency, accelerated production, and reduced errors. Journalists didn’t want design tools or drag-and-drop interfaces; they needed clarity, predictability, and strong SEO validation. Engineering had to work within a fixed stack and strict scope.
I led discovery, UX/UI design, interaction design, prototyping, testing, and the creation of the design system. I partnered daily with engineering to ensure feasibility and with journalists to validate flows, templates, and publishing rules through real editorial scenarios.
We built a CMS optimized for speed, predictability, and SEO performance. Instead of drag-and-drop, the editor used a guided, block-based model aligned with journalists’ workflows. Branded templates ensured visual consistency across both portals. A real-time preview matched exactly what would be published on Omelete and The Enemy, reducing errors and rework. Built-in SEO configuration and a validation checklist ensured compliance with Google’s Web Stories guidelines. Every feature directly addressed a friction uncovered during discovery, resulting in a tool that enabled fast, confident, and consistent story creation.
From 2 hours to ~30 minutes per story.
Dependency on the external tool fully eliminated.
Templates standardized layouts across both editorial teams.
~30 journalists used the CMS from day one, no training needed.
Interviews + shadowing exposed bottlenecks and real editorial needs.
Tools: Notion, Meet
Benchmarking + audits shaped essential features and constraints.
Tools: FigJam
Iterative testing refined clarity, steps, and content structure.
Tools: Figma
Templates, components, tokens, and rules built for scale.
Tools: Figma
Live collaboration ensured feasibility and performance.
Tools: Storybook, Notion
Research included interviews with ~10 journalists, workflow mapping, and a deep audit of the external tool. The newsroom published 4–5 Web Stories daily, making speed and reliability essential. A key insight emerged early: journalists rejected design-heavy tools and drag-and-drop interfaces. They wanted to focus on content, not layout. Previews were unreliable, forcing them to check everything manually on their phones. Layout inconsistencies across stories also affected brand quality and SEO performance. These insights guided the first flows and wireframes, validated with the editorial team before moving to full prototyping.
The Dashboard and Story List centralized drafts and published stories. V1 focused on visibility and quick access. A future V2 included analytics once data infrastructure matured. This solved a major issue: stories were scattered across tools, slowing down daily editorial work.
The block-based Story Builder replaced drag-and-drop tools and reduced cognitive load. Templates ensured brand consistency and eliminated repetitive formatting. Together, they made story creation faster, clearer, and accessible even to non-designers.
A live preview guaranteed full fidelity with the final published story on Omelete and The Enemy. SEO settings followed Google best practices, while the validation checklist prevented errors before publishing.
The CMS behaved smoothly on desktop, tablet, and mobile. This was crucial: journalists often published stories live from events. After launch, several stories were successfully published directly from smartphones, validating the responsive approach in real-world conditions.
I created a scalable design system documented in Figma and Storybook. It included color, spacing, typography, and grid tokens; reusable components; templates; and interaction rules. Components were built with master structures and variants to support responsiveness and accessibility. The dual documentation aligned design intent with coded behavior, reducing ambiguity and speeding development. Over time, the system became the foundation for new CMS features and updates.
Business impact
User impact
Team impact