top of page

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

image.png

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

Colors

colors1.jpg

Typography

typography_edited.jpg

Buttons

Size (height):

Large 56px

image.png

Default

Hover

Disabled

Selected

b1.jpg

Medium 40px

image.png

Default

Hover

Disabled

Selected

b2.jpg
image.png

Small 32px

Default

Hover

Disabled

Selected

b3.jpg

Prototypes

Changing groups

Part 1: Filling out the form and generating content

Generating a Templated Press Release

Part 1: Filling out the form and generating content

Generating a Blog

bottom of page