Design evolution

I’ve been wanting to translate my additional product design work samples that are not use case ready to a more presentable format beyond the existing PDF for some time now. While I have significant prior experience in designing applications powered by AI and ML, I am diving deeper and deeper into integrating generative AI within my own and team’s design process like the rest of my industry peers. This project offers a valuable opportunity to work on both of these goals simultaneously. I chose Writer as my tool of choice by happenstance as I was trying out the latest version and features in general, and it performed so well in my initial and subsequent runs that I just kept going and going (or vibing and vibing as some might say.)

Here I will share some of my learnings & reflections along the way.

After 170+ prompts (!!), this project was so fascinating to work on that I have many lessons learned where I can show up better for the next version and future projects, and also gave me insights into areas I need to dig deeper and learn more about. Here are just some of my observations and learnings. My goal is to continue to share more.

---

Takeaways

First impressions were strong and a great level set of what was to come

I started the process by giving the AI my PDF of additional projects and a simple prompt to I would have to be. I didn’t want to over prescribe on purpose to see:

I was blown away by the initial results from such a simple prompt (Version 1). While the visual design did indeed have a clean and simple approach, I was most impressed by the clear information architecture and visual hierarchy compositions that it was able to discern from my initial PDF (Version 0). It was really impressive that the AI decided to display my LinkedIn, Dribble, and main portfolio site links right under my name, while choosing to render work samples as cards, patents, and accolades as list views - all within their own respective sections. There is definitely an inherent taste and design context behind these decisions and it made me wonder what kind of design-related data, information, and rules Writer’s Palmyra LLMs are trained on.

AI is an impressive design co-pilot you always wanted and needed

As a designer who can code, and coded his own portfolio site, I'm very aware of the heavy lift to do a lot of these HTML/CSS/JS tasks and it has been amazing to have an “assistant” to tackle these, but what I have also appreciated are the recommendations, detailed explanation of the changes and thought leadership.

For version 4, myself and the AI made many significant updates including to imagery (more on that later). This felt like a major milestone as compared to the previous versions. While my last prompt never used the word “continue” as the AI indicated, It really felt like a moment that needed a breath and reflection as to what comes next so I was absolutely floored when it suggested documenting the version to the version history and other improvements. The moment felt like the AI recognized how much work we just did together and that I had a thought partner in what comes next, which is what you hope, want, and need from your human design colleagues as well:

AI fills in the blanks like a great partner (and designer)

As I started to prompt explicit instructions on how to update the design and contents for the work samples cards, when I gave more abstract direction for including new cards, the AI filled in the gaps based on previous context and directives. For example, for a new work sample card I wanted to include, I didn’t explicitly mention the type of banner graphic, default text, and action it should have, but the AI recognized that this card should have such in concert with the other cards and did its best to include defaults to match. This Is what you would expect from a strong designer on your team supporting you - to fill in the blanks from high level goals and direction with not too much more additional prompting needed (pun intended ;), and then you advise and coach on how to course correct:

In another example, when I prompted the AI to add a new version in the history after another successful collaboration, the AI not only added the section, but also filled in the blanks for all the default content besides a visual snapshot based on past context that I did not specify:

AI challenges you like great partner (and designer)

Great designers I have worked for, managed, or collaborated with, all have this in common - you can positively challenge each other on the design solution to ensure the best design solution comes out on top - through iteration - instead of indexing on where the solution came from. When I asked the AI to update a specific icon in the AI experiments card that links to this Design evolutions page - Writer uses Lucide library by default it seems - and not finding this particular icon, it stood by its initial recommendation which was very correct based on the current contents of the versions page vs. where I wanted to go with the page which I hadn't communicated yet. When I prompted again with the explicit url for the icon, it successfully made the change:

In hindsight it would be very interesting and better to grow the AI's context by explaining the reasoning and future thinking I had in mind for the page and to ask it for feedback on such a direction - as would be proper behavior when working with a human co-pilot. This would likely yield better results as well where direction is less abstract for the AI so it can properly fill in the blanks and offer suggestions.

I learned a lot about the art of prompting (and so much more to learn)

After using 170+ prompts for this AI project, I learned:
Note: I used AI to help recommend shorter verbiage for my responses

• Context is key: Set context early and update the AI as requirements change.
• Be explicit on "knows": Provide clear direction for specifics (e.g., visuals, colors, interaction), but allow the AI to handle less opinionated structure (e.g., CSS).
• Set limits: Prevent unwanted changes by explicitly prompting the AI not to make other design changes, especially to imagery.
• Imagery is improving: High-quality results require specific context, explicit color palettes, and indicating consistency requirements. SVG is not a default format for LLMs (PNGs) but if you are prompting for animation use cases which are optimized by using such a format, they will offer this as an option.
• Mirror the AI's format: Adopting the AI's response structure (e.g., lists, punctuation) improved results - as has been studied and reported on - and helped prevent unwanted overwrites.
• Prompting improves writing: Clear, concise prompt engineering enhances general communication skills and reduces the number of prompts needed for course correction.

The series above shows the evolution of prompting the image for the Product design process & management card. In some cases, my prompting took the design backwards not forwards so to speak when trying to adjust positioning or scaling between elements to be optimized for display as a small banner for a card.

Reflections

What's next

• Explore and iterate on a more modern and minimal visual theme with lighter chrome that has less of a Bootstrap feel.
• Explore and iterate on different layouts to show larger actual visual previews of the design work instead of generic imagery for the card banners. This will be more engaging to users as to what the work entails.
• Explore where can push on SVG and animation usage more. It will be really fun to see where I can direct the UI to help achieve delightful and delicate target states that would normally be expensive time wise and have a much higher difficulty to code and prototype.

What I'd love in the Writer editor

• The ability to search through my prompt history without scrolling up and having to user Ctrl + F
• Indicator that files are uploading so don't upload them 2x
• Explore why the prompt box doesn't support bulleted and numbered lists or other formatting options like bold and italics (I had to manually prompt text to be specifically bold or italics)
• I found myself wanting to queue up prompts and wanting to execute them if the last one was successful or keeping them "on deck" once I resolved the previous one. It could be interesting to have such a capability.

Reflections on AI collaboration (from AI)

In a true inception / meta manner, I also asked the AI to reflect on our current time together thus far. I appreciated the constructive feedback mirrored my own observations of need to increase specificity. Here is what it had to say: