# Product design ## Designing a new writing tool ### A real-world case study at Prisma Media ![[PrismaMedia.png]] # Takeaways ## Problem Statement • Journalists were using costly third-party tools with usability issues that slowed down the publication of articles. ## Solution • Designing a tailor-made internal tool, integrated into their workflows, validated through frequent user testing to precisely meet their needs and optimize article publication time. ## Role • Principal UX Researcher and Product Designer on the project. --- # Case study %% ## Sommaire - 01. Contexte - 02. Rôle - 03. Méthodologie - 04. Empathie - 05. Définition - 06. Idéation - 07. Prototypage - 08. Test - 09. Résultats - 10. Impact %% ## 01. Context ### About the Organization ![[01.Prisma.svg]] **Prisma Media is France's leading magazine and digital press group, managing over 26 brands and reaching approximately 400 million monthly users.** ### The Project ![[01.a.Prisma.png]] Prisma aimed to **internalize its tools** to reduce costs associated with expensive licenses while **accelerating article production for its editors and journalists**. ## 02. Role ![[02.Prisma.svg]] As the **Product Designer for the Internal Tools Division**, I was responsible for **designing Prisma Media’s new editorial tool**. ![[02.a.Prisma.png]] ## 03. Methodology ![[03.Prisma.svg]] I structured my work into two-week agile sprints: 1. **Design** Prototype my designs based on insights from user research to address identified user needs. 2. **Usability Testing** Test these prototypes with clear scenarios by an internal user panel and adjust designs directly based on their feedback. 3. **Implementation** Ensure seamless integration by the development team. ## 04. Empathy ![[04.Prisma.svg]] I conducted a **contextual inquiry** with **journalists and editors across brands** to **understand their needs**. ![[04.a.Prisma.png]] ## 05. Definition ![[05.Prisma.svg]] I **structured insights** collected using a collaborative **card sorting** approach to ensure **alignment with user needs**. ![[05.a.prisma.png]] ## 06. Ideation ![[06.Prisma.svg]] I created **low-fidelity sketches and wireframes** to rapidly **explore various solutions** that addressed user insights. ![[06.a.Prisma.png]] ## 07. Prototyping ![[07.Prisma.svg]] I designed **high-fidelity interactive prototypes** using **Sketch and InVision**, leveraging **Google’s design system**. ![[07.a.Prisma.png]] ## 08. Testing ![[08.Prisma.svg]] I **systematically tested** prototypes with a **user panel** co-created with the editorial leadership. ![[08.a.Prisma.png]] ## 09. Results ![[09.Prisma.svg]] I designed a **custom internal editorial tool** tailored for Prisma Media’s journalists and editors, incorporating all necessary features for their editorial workflow: - **a. Topic and Publication Management** Precise categorization of each article topic according to the group’s brands and editorial sections. - **b. Image Import and Management** Intuitive functionality for importing, comparing, annotating, and storing images to illustrate articles. - **c. Article Editing and Collaboration** A clear and structured workflow from initial drafting to final approval, including integrated proofreading. ### a. Topic and Publication Management | Sujets ![[09.a.Sujets.Importer.png]] ### a. Topic and Publication Management | Parutions ![[09.a.Sujets.Parutions.png]] ### a. Topic and Publication Management | → Importer ![[09.a.Sujets.Importer.png]] ### b. Image Import and Management | Importer ![[09.b.Importation.Importer.png]] ### b. Image Import and Management | Importer ![[09.b.Importation.Importer2.png]] ### b. Image Import and Management | Destination ![[09.b.Importation.Destination.png]] ### b. Image Import and Management | Destination ![[09.b.Importation.Destination2.png]] ### b. Image Import and Management | → Visualisation ![[09.b.Importation.Visualisation.png]] ### b. Image Import and Management | Visualiseur ![[09.b.Importation.Visualiseur.png]] ### b. Image Import and Management | → Filtres ![[09.b.Importation.Filtres.png]] ### b. Image Import and Management | Filtres ![[09.b.Importation.Filtres2.png]] ### b. Image Import and Management | Visualiseur ![[09.b.Importation.Visualiseur2.png]] ### b. Image Import and Management | → Informations ![[09.b.Importation.Infos.png]] ### b. Image Import and Management | Informations ![[09.b.Importation.Infos2.png]] ### b. Image Import and Management | → Diaporama ![[09.b.Importation.Diaporama.png]] ### b. Image Import and Management | Diaporama ![[09.b.Importation.DiaporamaVisualiseur.png]] ### b. Image Import and Management | → Déplacer sujets ![[09.b.Importation.Sujets.png]] ### b. Image Import and Management | Déplacer sujets ![[09.b.Importation.SujetsDeplacement.png]] ### b. Image Import and Management | → Copier stocks ![[09.b.Importation.Stock.png]] ### b. Image Import and Management | Copier stocks ![[09.b.Importation.StockCopie.png]] ### b. Image Import and Management | → Gérer sujets ![[09.b.Importation.Retour.png]] ### a. Topic and Publication Management | → Éditer ![[09.b.GestionSujets.png]] ### c. Article Editing and Collaboration | → Corriger ![[09.c.Edition.Correction.png]] ### c. Article Editing and Collaboration | → Sélectionner ![[09.c.Edition.Correction.Selection.png]] ### c. Article Editing and Collaboration | → Corriger ![[09.c.Edition.Correction.Corriger.png]] ### c. Article Editing and Collaboration | → Éditer ![[09.c.Edition.Correction.Quitter.png]] ### c. Article Editing and Collaboration | → État ![[09.c.Edition.Correction.Etat.png]] ### c. Article Editing and Collaboration | → Éditer ![[09.c.Edition.Correction.Workflow.png]] ### c. Article Editing and Collaboration | → Gérer sujets ![[09.c.Edition.Correction.Retour2.png]] ## 10. Impact ### The **Agile UX approach mitigated risks** of developing an unsuitable tool. ![[10.a.Prisma.svg]] ### The tool **accelerated article publication by 30%**, increasing user satisfaction. ![[10.b.Prisma.svg]] ### Significant **cost savings** were achieved by eliminating expensive third-party licenses. ![[10.c.Prisma.svg]]