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
I identified opportunities for improvement within this simple user flow and implemented targeted design changes to enhance the overall experience.
Projects page
Previous version
Improved version
Improvements
🧭 Navigation & Layout
-
Clearer View Toggle Controls:
-
Old: Obscure, grey toggle buttons in the top left.
-
New: Labeled "Table view / Card view" with clear radio button design.
-
-
Left-Side Navigation Bar Introduced:
-
Old: Top nav only, limited real estate and hierarchy.
-
New: Persistent vertical nav with icons, improving discoverability and accessibility of key tools.
-
🧠 Usability & Hierarchy
-
Improved Card UI:
-
Slight shadow, cleaner borders, and use of space make each card more scannable.
-
Rounded avatars and better padding improve legibility and modernity.
-
-
Vertical Ellipsis Menu:
-
New version adds a “more options” (3-dot) menu on each card, improving interactivity and access to actions without clutter.
-
-
Component Consistency:
-
New version uses unified components (buttons, pills, cards) with standardized spacing and behavior.
-
🌍 Global Controls
-
Global Header Adjustments:
-
Workspace name and language selector added in top-right—more scalability and localization ready.
-
-
Improved Search Bar and CTA:
-
Same placement, but cleaner visual hierarchy.
-
Rounded edges and spacing make the “New Project” button more prominent.
-
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 and improved iteration
1) Full state
2) Error state