PRophet platform UX UI
June 2025
The challenge
In May 2023, I led a platform migration and redesign project that involved transitioning from InVision to Figma, as part of a larger effort to shift the front-end implementation from Azure to React JSS.
The initial challenge was to faithfully translate the existing experience into a flexible design system within Figma to support the new tech stack. Now, the project has entered a new phase focused on complete rebranding and refinement—this includes rethinking the information architecture, wireframes, UX flows, and UI components from the ground up to align with updated business goals and user needs.
My role and dutties
As the UX UI Designer my duties are:
-
Auditing the existing experience (both UX and UI).
-
Defining the new structure, flows, and visual language aligned with the rebranding.
-
Using SMC's Design System in Figma and create extra components if necessary, and ensure that the design can be efficiently implemented in React JSS.
-
Collaborating closely with developers, product owners, and stakeholders to ensure the redesign aligns with technical and business requirements.
-
Testing and validating UX decisions through wireframes, prototypes, and user feedback loops.
The process
​
1. Discovery & Audit
-
Review the legacy platform in InVision.
-
Map out all screens, user flows, and components.
-
Identify UX and UI pain points.
-
Conduct stakeholder interviews or usability testing (if possible).
-
Evaluate how the old design maps to the new technical stack (React JSS).
​
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.
​
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.
​
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 if used.
-
Ensure correct implementation of components in React JSS.
-
Join QA rounds to flag UX or UI inconsistencies.
​
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
I originally worked on the UI for this platform, but due to constraints at the time, I wasn’t given the freedom to refine or improve it. Now that I have the opportunity, I start eager to revisit and elevate the experience—both visually and functionally—based on everything I’ve learned since.
Discovery & Audit
I reviewed the platform in the development environment and conducted tests with both AI tools and real users. I also personally walked through the platform’s core user flows to identify friction points and usability issues. My review began with the login process and extended into the main screens, focusing on the key actions we expect users to perform.
Design System
​
At the same time I added the color tokens to Silverline, the new SMC DS.
Wireframe​
​
An old wireframe from a different platform, UNICEPTA, was provided as a reference. Although it didn’t follow any of Silverline’s components or structural conventions, it served as the initial foundation for PRophet—since PRophet is in the process of acquiring UNICEPTA.
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, I began reworking the information architecture and have completely redesigned the Home screen to reflect this shift in user intent.
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.
First iterations
LLM latest Iteration
I redesigned the information architecture and layout to reflect this, introducing a clear visual hierarchy with a conversational input field at the center, encouraging 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.
-
But I decided to do a third iteration with new components that would be more scalable across Design Systems
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
1) Full state
2) Error state
Why? Something seemed to happen every time the Project Manager reviewed our progress. According to him, the direction had changed and we needed to pivot multiple times. However, it appeared the real issue was that he lacked experience with this type of product and didn’t fully understand what was happening—or even some basic aspects of the product itself. To help him grasp it, I found myself obliged to step back and walk him through the user flows to show exactly what the product does.
But we had to take a few steps back...
Back to flows
As frustrating as it was, I realized that in order to move forward, I first had to step back. Sometimes it takes an extra effort to ensure our teammates fully understand what’s happening. In this case, that meant creating user flows based on the mockups I had already designed. I also used the opportunity to audit those mockups and incorporate the resulting improvements directly into the flows.
Search functionality
Key actions in Journalist database
Once the PM and I aligned, 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.
Leading Through Clarity and Communication
Brand New Landing page
Mixed card view
