This portfolio snippet is an example of a deliverable package that includes different options for what could be included in several proposed screens.

Iterations of Screen Insights

The Test Case Generation screen has a light and dark mode proposed. Then, the content of the screen was changed after discussion with client. The graphic was moved to the Model Monitoring screen, and the content and layout of the Test Case Generation screen was finalized for the deliverable mockup. Right below this is the final version, and the two underneath that final version display the two previous light and dark mode drafts.

Final Test Case Generation Screen

This is the final version of the Test Case Generation screen agreed upon after iterating. The graphic was moved to a different screen, the aim of this screen was altered using different layouts and a select evaluators feature. The bottom feature of adding test case examples was created to better fit the screens new goals.

Draft: light mode of test case generation.

Draft: dark mode of test case generation.

AI Comparisons

This screen shows the features needed to compare SQL generation outputs created by an AI model. Code and response comparison switching feature is displayed by dropdown, and more outputs are displayed using modal popup.

Wireframe to Mockup

This is a wireframe made for this client before beginning full-out Figma interactive prototype drafts. This screen is the wireframe for the evaluation metrics screen which is included here as a more developed, standardized screenshot.