AI Generated Design

Designer

Prompt Writer

I wanted to experiment with AI-generated design by feeding it the same design challenge I received and comparing the AI’s finished design with mine. I want to analyze how much effort it takes to achieve desired results and the impact AI could have on a designer's workflow.

The Design Challenge

Design a form for patients to check if a procedure is covered by their insurance. The insurance eligibility check form will be based on the following snippet of code.


                            const
                            form 
                            = 
                            {

                            payerId:
                            "FHI",

                            serviceTypeCodes: 
                            [
                            "MH"
                            ],

                            provider: 
                            {

                            name: 
                            "Fake Health Institute",

                            npi: 
                            "1234567891"

                            },

                            patient: 
                            {

                            dateOfBirth:
                            "19990919",

                            firstName:
                            "John",

                            lastName:
                            "Doe",

                            memberId: 
                            "1234567890"

                            }

                            };

“payerId” is a drop-down field for selecting the provider ID, “FHI” is for “Fake Health Institute”.
“serviceTypeCodes” is a drop-down field for selecting the procedure code, “MH” is for mental health.
“npi” is the National Provider Identifier for FHI with the default value of “1234567891”.
“npi” is the National Provider Identifier for FHI with the default value of “1234567891”.
“memberId” is a text field.

Figma AI's First Attempt

Figma AI is a beta feature of Figma that can generate designs from user prompts. I will be using Figma’s “First draft” and “Basic app” AI settings, as I want it to generate a high-fidelity mockup from scratch.

Prompt:

Make an insurance eligibility check form from the following code snip: const form = { payerId: "FHI", serviceTypeCodes: ["MH"], provider: { name: "Fake Health Institute", npi: "1234567891" }, patient: { dateOfBirth: "19990919", firstName: "John", lastName: "Doe", memberId: "1234567890" }};

Review

The first attempt worked really well. It only took a few seconds to generate a design and the design fit almost all criteria. Most errors were due to a lack of context in the prompt.

Errors:

1	Title cuts off rather than wrapping text or using available space.
2	Payer ID and Service Type Codes are not drop-downs.
3	Provider Name and Provider NPI are not supposed to be input fields.
4	Date of Birth field not formatted, and manual date entry is poor UX.

Can We "Make Changes"?

Figma offers tools to make quick adjustments to AI generated designs. The tools can be used to change colours, corner rounding, spacing, and fonts. Alternatively, you can write a prompt for the AI to execute. I used the Figma AI “Make changes” prompt tool to try and fix the errors from the first attempt.

01 Prompt

Make the full title visible.

First AI generated form without any changes

01 Review

The AI seemingly ignored this prompt. I tried several variations but the AI never made the full title visible.

02 Prompt

Add drop-down arrows to the Payer ID and Service Type Codes fields.

The same AI form with strange, miscoloured fields

02 Review

Not sure what happened here. The AI will not allow you to add complex elements, so asking for a drop-down will result in an error. Asking for an icon, however, resulted in what you see above.

03 Prompt

Add Provider Name and Provider NPI as read-only content, remove Provider Name and Provider NPI fields.

03 Review

The AI ignored the first part of the request, but completed the second. It did not resize the screen for the reduced content, though, so there is excess white space at the bottom.

04 Prompt

Format the Patient Date of Birth and add a calendar icon.

AI form with removed content and strange UI

04 Review

Another head-scratcher. Like the drop-down, asking for a date selector will result in an error, but I have no idea why it decided to remove most of the fields and add random elements.

Man v. Machine

The following designs are my own creation. I gave myself 1 hour to complete the challenge. I also finished these screens before the AI, so the AI wouldn’t influence my choices.

Noteworthy Differences

Split Screens

I split my design thematically between Insurance and Patient information to reduce information overload.

Form Description

I added a description so patients would know why they are filling out this form.

Read-Only Payer ID Info

I added a section under Payer ID to display extra information, like full institution name and NPI number.

Info Icons on Field Titles

I added an information icon to field titles because terminology like “Payer ID” might be unknown to patients.

Added Full Names to Payer ID and Service Provided Fields

Patients may not be familiar with medical codes, so I added the full names to the Payer ID and Service Provided fields.

Drop-down Menus and Date Selection

I made Payer ID and Service Provided drop-down menus (ideally with type-ahead capability) and Date of Birth is a date selector for better UX.

Reflections on an AI Workflow

Although the AI failed to edit the original design correctly, the First Draft tool has the potential to accelerate workflow. For a designer, manually editing the original output would be simple, and it provides a great starting point. Figma also has the ability to generate wireframes, which would not require the same level of nit-picking detail as the mockups and would be better suited to expediting design workflows.