PRophet platform UI
The problem
PRophet is a platform in which users can use a specialized AI to generate Blog posts, Pitches, articles and other types of content.
PRophet is in the process of re-design and the first step is recuperating the UI, which is only in InVision, and translating it to Figma. While recuperaing the files some changes will be requested based on user's feedback and the observations of the UX designer.
My role and dutties
As a UX UI Designer my role is to observe the UI and suggest changes, which will be either applied or saved for a second iteration.
Translate the images in InVision into flows in Figma.
Make prototypes to show to stakeholders.
Hand off dev ready components.
The process
1) Documenting: I went through the screens in InVision and took screenshots of the elements, then I clasified them into groups in order to start creating them in Figma.
​
2) Styleguide: I created the basic styles in Figma.
​
3)Using the images in InVision as reference I started creating the screens in Figma, in the order in which they were prioritized.
​
4) My PM Shandra and I met weekly to check out the designs, refine components, define goals and leave feedback in the file.
Style Guide
Grids
Header 1440px width screen
- Margin: 32px, Gutter: 24px

Body 1440px width screen
- Margin: 180px, Gutter: 24px, Central area: 1080px

Colors

Typography

Buttons
Size (height):
Large 56px

Default
Hover
Disabled
Selected

Medium 40px

Default
Hover
Disabled
Selected


Small 32px
Default
Hover
Disabled
Selected
