Unicepta/PRophet AI
June 2025
March 2023
UNICEPTA is a media and data intelligence platform that helps organizations listen to and interpret a vast landscape of media, from social posts to broadcast news, in real time. It uses AI to distill that data into insights that inform reputation strategy, communications planning, and business decisions.
Who uses Unicepta?
1. Large corporations & multinational companies
UNICEPTA’s media intelligence and analysis tools are built for organizations that need to understand how they appear in media, how narratives about their brand evolve, and how that impacts reputation and strategy.
​
2. PR, communications & corporate reputation teams
Communications leaders use UNICEPTA to monitor coverage, analyze sentiment and trends, detect risks, and inform messaging across channels, from news outlets to social media.
​
3. Marketing & brand management teams
Marketing organizations rely on UNICEPTA to track campaigns, measure brand visibility and performance metrics in media, and align marketing decisions with audience conversation dynamics.
​
4. Public sector institutions and global organizations
Public institutions, like the European Commission, have contracted UNICEPTA for multilingual, real-time media intelligence across complex regional media landscapes.
​
5. Strategic decision-making & executive leadership
Senior leaders and strategy teams use the insights to make quicker, evidence-based decisions about risk, stakeholder perception, and organizational positioning.
Actual clients
-
Adidas
-
Bayer
-
FIFA
-
TikTok
-
Toyota
-
Apple
-
Airbus
-
European Commission & other public institutions
-
Other Fortune Global 500 companies and major enterprises
The challenge
The project initially began as a legacy UX update, modernizing an existing platform without altering its underlying structure.
However, after PRophet acquired UNICEPTA and significantly expanded the platform’s capabilities, it became clear that incremental updates were no longer sufficient. The product had outgrown its original architecture.
​
The challenge evolved into a full redesign:
Rethinking the information architecture, user flows, and system-level UX to support a broader set of intelligence, AI-assisted workflows, while ensuring scalability, design-system consistency, and technical feasibility within a React-based enterprise environment.
​
Incremental updates began to introduce inconsistency, duplicated components, and unclear ownership between legacy and newly introduced flows, increasing implementation complexity and long-term maintenance risk.
Technical context
-
Enterprise-scale React application
-
Shared design system (SMC / Silverline)
-
Token-based theming to support rebranding and future white-labeling
-
AI-assisted workflows with asynchronous states (loading, error, partial results)
-
Large, data-heavy surfaces (journalist database, media monitoring results)
Key responsabilities
-
Audited the legacy UNICEPTA experience to identify structural, usability, and scalability issues as the platform expanded.
-
Redefined the information architecture and core user flows to support new AI-driven intelligence and content workflows.
-
Designed task-oriented, AI-first workflows with clearly defined states (empty, loading, error, success) to ensure predictable frontend behavior and reduce edge cases during implementation.
-
Led the design system application and extension in Figma, using tokens and reusable components aligned with React implementation constraints.
-
Partnered with engineers to ensure designs were technically feasible and efficiently implemented in a React-based environment.
-
Used wireframes, prototypes, and explicit user flows as alignment tools to externalize system behavior, reduce ambiguity in requirements, and stabilize frontend implementation during rapid product evolution.
-
Iterated on designs based on stakeholder feedback, technical constraints, and evolving product strategy.
The process
​1. Discovery & Audit
-
Review the legacy platform in InVision.
-
Map out all screens, user flows, and components.
-
Review videos of users using the platform.
-
Identify UX and UI pain points.
-
Conduct stakeholder interviews or usability testing (when possible).
-
Evaluate how the old design maps to the new technical stack (React JSS).​
​3. Design System in Figma
-
Create a token-based design system in Figma (for future theming or white-labeling), for that I use the SMC DS and just add Color Tokens for PRophet.
-
Define typography, spacing, grid, and color systems aligned with the rebrand.
-
Componentize UI elements (buttons, inputs, cards, tables, etc.) with auto-layout and variants.
-
Prepare dev-ready components with specs and documentation.​
​
2. Information Architecture & UX Strategy
-
Redefine the information architecture: navigation structure, content hierarchy, user flows.
-
Create low-fidelity wireframes to explore UX options.
-
Align user goals with business needs.
-
Consider accessibility and responsiveness early on.​
​
4. High-Fidelity UI Design
-
Apply the new visual identity and branding.
-
Redesign key screens with updated interactions and layout.
-
Create interactive prototypes for validation and handoff.
5. Developer Handoff & QA
-
Collaborate with devs using Figma inspect mode, tokens, and Storybook.
-
Ensure correct implementation of components in React JSS.
-
QA rounds to flag UX or UI inconsistencies.
-
Standardized spacing, typography, and color tokens to match React usage
-
Reviewed edge cases (loading, partial data, empty results) with engineers to ensure predictable UI behavior under real data conditions
-
Flagged implementation mismatches early during QA to reduce rework and iteration cycles
​
6. Validation & Iteration
-
Support usability testing (if possible).
-
Gather feedback and iterate on flow and UI polish.
-
Document UX rationale and design guidelines for future scale.
The old UI
New PRophet Branding
​
I received PRophet’s new brand book, pitch deck, and additional collateral to help inform and guide my design decisions throughout the rebranding process.
Options
This option was chosen
Home page / Projects page
The homepage, the screen users landed on after logging in, used to be the Projects page.
However, after speaking with the Product Manager, it became clear that the primary goal for users right after signing in is to start creating content with Taylor, our AI assistant.
Based on that and observation of the user behavior, I reworked the information architecture and redesigned the Home screen to reflect this shift in user intent, prioritizing task initiation over navigation and reducing time-to-first-action.
Previous version
New branding applied
This is what the page might have looked like if I had simply changed the layout without thoughtfully rethinking the experience.
Instead, I grounded the redesign in user insights, product goals, and the latest trends in AI UX and LLM-driven design patterns ensuring the result is not just visually improved, but also meaningfully aligned with how users interact with AI today.
What do the users want?
Create a Pitch
Generate a Blog Post
Create a Media Briefing Book
Generate a Bio
Generate a Press Release
They sometimes prefer Spanish as main language
They want to switch mods quickly
Iteration 1
Iteration 2
They ask about their projects
They want to see their projects, they've grown used to have them visible in the first screen
LLM latest Iteration
I redesigned the information architecture and layout to support AI-driven, asynchronous workflows, introducing a clear visual hierarchy with a conversational input field at the center to encourage natural language prompts. Below it, I surfaced common content types to guide new users, while moving saved content to the sidebar to reduce clutter. The interface now greets users with a personalized, task-oriented experience that supports both first-time exploration and returning user efficiency. This redesign not only aligns with LLM-first UX trends but also simplifies the interface, reducing cognitive load and helping users take action faster.
One additional improvement I would have implemented—if not for technical limitations—was making dark mode the default. A darker interface would better align with modern UI trends, reduce eye strain for frequent users, and provide stronger visual contrast for key interactive elements. However, due to current development constraints, this enhancement had to be deprioritized.
I identified opportunities for improvement within this simple user flow and implemented targeted design changes to enhance the overall experience.
Modal
First and old version
Second iteration
Improvements
🎨 Visual & Component Improvements
-
Improved Button Design
-
Old: Standard blue button with generic label (“Save Project”).
-
New: More descriptive label (“Update Project”) with modern rounded styling, consistent with overall UI.
-
-
Updated File Upload Button
-
Old: Generic button (“Browse file”) with minimal affordance.
-
New: Visually distinct button with icon, better affordance and clarity, following new component standards.
-
-
URL Option Language
-
Old: “Use URL Logotype” (somewhat unclear and technical).
-
New: “Keep URL” (simpler, clearer copy).
-
🧱 Layout & Structure
-
Consistent Spacing & Padding
-
Old: Cleaner vertical rhythm, improved padding and grouping of elements for better readability and flow.
-
New: Tighter layout with slightly cramped feel.
-
-
Rounded Modal Corners
-
Old: Modal corners are rounded for a more modern and approachable aesthetic.
-
New: Sharper corners give a more dated or default-modal feel.
-
New technical constraints and implementation considerations required a third iteration focused on system scalability.
Third iteration
1) Empty state
3) Loading state
2) Hover state
4) Full state
5) Deleting state
On the PRophet platform, users can create content powered by AI that is trained on specialized, curated datasets. The content generation process is organized into distinct flows, each tailored to specific content types.
Creating content
Generating a Bio
Second and old version
Third iteration
This iteration focused on incremental system alignment, applying visual updates while validating component structure and interaction patterns before introducing larger architectural changes.
1) Full state
2) Error state
Fourth iteration
The fourth iteration is born from insights about the user.
This helped define patterns for other flows.
But we had to take a few steps back...
Why?
Product requirements were evolving without a shared system-level understanding of the platform.
As new functionality and technical constraints emerged, it became clear that existing flows had not been sufficiently externalized.
This resulted in misalignment around expected behavior and scope.
Back to flows
To resolve this, I stepped back and formalized the product behavior through explicit user flows derived from the existing designs. This helped clarify system boundaries, validate assumptions, and align design, product, and engineering on how the platform should behave end-to-end.
Search functionality
Key actions in Journalist database
Leading Through Clarity and Communication
Once the team aligned around clearly defined flows and responsibilities, progress became smooth and predictable. Clearer task definitions and more accurate timelines helped us get back on track. Because the PM was relatively new, investing a bit of time to guide him on ticket creation and explain my workflow saved far more time than the earlier back-and-forth. I’m not a PM, but I do have experience structuring projects. I shared my protocols and approach with him, and once we applied them, everything began to run smoothly.
Brand New Landing page
The landing page was made to allow the user to test the tool before committing to it.
Journalist database
