Adventures with
Artificial Intelligence

Getting Started

Artificial intelligence is here. Growing up, this meant that skynet was inevitable and the war with the machines was a certainty. Or, we all live in The Matrix and those that have escaped are still fighting the machines. But, I will go a step further back and think of my first introduction to AI. Lieutenant commander Data, second in command of the USS Enterprise NCC-1701D. For my fellow Star Trek fans, the memory of Data is a fond one, not scary in the slightest.

Holding on to this childhood treasure put me in the right mindset to jump into the vast AI resources we have available today. ChatGPT, OpenArt and even Lovable. There are AI apps to help us write, compose, illustrate, or even make our own applications. To get the most user experience impact working with AI, I decided I needed to make a website!

Finding the Project

When we are at work, much of our day-to-day is already planned for us. That next jira ticket, the newest enhancement on the project you've been heading up, there isn't always room to throw in a whole new technology to your existing workload. To give this adventure its own room to breathe, I decided I would start on something new.

Since the pandemic, my wife and I have been having movie nights. It started as something to look forward to when going outside was considered impossible. This quickly became a tradition and one that we haven't stopped for almost six years! Watching six years worth of movies is a lot and a quirky sub-product came from this ritual. Through a shared notes app on our phones, we started making a list of the best movies we had found. It surprisingly ended up being a pretty small list compared to the amount of movies we had seen. When we did the math, we had an acceptance rate of about 4%. This meant that, at least to us, we had a curated list of movies that really fought hard to be on our list.

Since October is upon us, and the majority of our movie list fell into the thriller/horror genre, my AI adventure seemed clear. I needed to make a website for an audience seeking a scary movie night using the highly curated list my wife and I had generated since the pandemic!

Hello Lovable

We all have that friend that is on the cutting edge of technology. I turned to mine, Teddy Zhou, former co-worker at Oracle and AI connoisseur to get me on the right path. After her experiences at many AI meet ups and her own personal projects, she suggested that I try using Lovable.

Lovable is an AI-powered platform that enables users of any skill level to create full-stack websites through natural language. Simply describe what you want, and Lovable builds it for you.

A platform that builds a website for you? Ok that sounds amazing, but what do I get, what about colors, user interface, what does this thing even look like? It says to start with natural language which is my introduction into the AI prompt. "I want a horror-themed website that shares this list of movies."

Wow a Website!

When you are first beginning these projects with AI it is easy not to know what to expect and I certainly fell into that category. With a single prompt I went from notes-app list to multipage website! This was impressive ... and didn't look good.

Let's pause for a second and realize what we were given. Many decisions were made for us in an instant. From the user experience side, questions like, how do we display this list of movies? What are the colors options? What style library should I use? All of that was answered in an instant to output what my prompt demanded. Was it a list of movies? Yes! Was it horror themed? I suppose, black, red and a very simplistic skull, ok. While AI did a heck of a lot just on one prompt, this isn't what I want for my movie selection website and I need to give this AI engine more information to realize my thoughts, and provide excellent user experience.

Enter the User Experience Designer

In this world, there is no Figma, no Photoshop, I'm not wireframing or doing a competitive analysis. I'm talking with AI to output a product. While the work I am doing is different, in that I am communicating to a machine, the UX principals remain the same. My audience is human, and the site needs a human interface to become usable.

I need colors, images, calls-to-action, a way to differentiate the types of movies. I also need to analyze what was given to me. There are some mistakes, like movies that are "upcoming" that aren't because I've already seen them. I start working with the AI agent to tackle some of these UX principals I will need for a human audience. Through several prompts like, "use this color palette" and "I need an image for each movie", I got the site looking something like this:

Bringing the Human Factor

I'm making some progress now. I have removed the errors I saw with movies being "upcoming". I've asked for images and gotten some, though not the real movie images. I have descriptions now for the movies that are short enough that, if interested, a user will want to learn more. These make my default call-to-actions. I've grabbed a piece of an Edgar Allen Poe poem to help name my site and give it further theme. The Lovable AI platform has already provided me with a search, sort and filter capability. Now I need to decide if I want to keep it or not and if I want to expand on it. We are a far ways away from done but the site is taking shape. AI is outputting code, ready to be used live, while I am making changes on behalf of the human interest.

Some AI Hangups

This being my first jump into the AI service, I don't know how hard to push the system or where it will be blocked or stop. I want real movie images. The same posters that were used to promote the movie when it was in theaters should be here as well. "Lovable, please find the movie poster for each movie and apply it to the movie card on the homepage." ... No luck. The system doesn't know where to look for those images, can't use them for copyright purposes or the appearance of copyright, and the tax on the system to just reach out to the entire internet and grab these is too much. I need to be more specific and I need to help the AI know where to look and or what to grab.

As this was a side project to get to know AI, I spent the next several days updating movie images, cast information, previews, and synopses while also doing portfolio work, dishes, and cleaning. I was making good progress and the site was coming along great. I have some experience coding and building my own sites and this was already beyond what I could do on my own. With 75 movies on our list, I had a website with nearly 80 pages done and I spent 1/10 the time making it. It was impressive to say the least. I would run into a few more problems but the way Lovable addressed them was in plain english and provided explanations of what it was doing and why. I'm sure a developer would have much more knowledge to why things were happening and would understand what Lovable was doing for me more than I understood it, what I was able to see was that the system was working. It was identifying errors it made, future issues it would run into, and make adjustments to head them off.

A Human Usable Site, An AI Built Product

Once all the movies were added, trailers, posters, cast, directors and so on, I had just about all the information I needed for this site. I decided to push the AI a little further and ask for capabilities that I knew I couldn't code myself. I wanted users, passwords, rating systems and reviews. The AI didn't even flinch at these requests and using some of the other free tools available to me like supabase and resend, I had a website that shared the six years worth of movie watching work my wife and I had done.

Concluding My Adventure

Working with AI was actually a lot of fun. To quote Jack R. from Rondesignlab on what AI is doing in our industry "AI isn’t creating brand-new jobs yet. What it does is amplify existing ones." There aren't enough prompts that can account for the human user side of product design. When I hooked up the big portions of the site like making an account and writing a review, toast notifications were needed. It was too easy to delete a review on accident and needed a modal to slow the interaction. The human factor stood out as missing from the end product. That was what I was able to provide working with Lovable and AI. Artificial Intelligence didn't replace my 15+ years in the industry knowing the pitfalls and gaps of human interaction with products. What it did do was expedite the mandatory technology. Databases, react code, storing templates and providing search functionality was so perfectly in the wheelhouse of AI that it gave me these necessities on my first prompt. From there, I added the human interaction side of things.

Since it is October, what a perfect time to launch my AI project. You'll find a deeply curated selection of 75 horror themed movies, documentaries and real life crime stories to chill your nights until Halloween (stick to the horror comedies with children, still, viewer discretion is advised). And if you find the site particularly usable, check out some of the other works I've done in the user experience field at ericjohnjohnston.com.

Visit DarknessPeering.com

If you dare ... oooOOOooo