Tools Used

Here you'll find Prompt engineering, tools, and wireframes.

4/11/20244 min read

As you surely read in my bio, despite not being a coder, I'm a product designer at heart—I can sketch ideas on napkins if inspiration strikes, although I prefer to avoid it when possible! When an idea sparks, I jot it down immediately for later development. My strength lies in conceptualizing ideas and conveying them clearly, often for others to execute. Precision in communication is crucial to ensure the final result aligns with my vision, not just because it's my preference, but because I understand it's the best approach for the project."

For Pornmortem, I jumped right into wireframing the website using Figma. At first, I toyed with the idea of hiring a friend to assist with the creation, only to realize that taking on the challenge myself would be a fantastic learning opportunity.

What I used to create Pornmortem
"a photo of a group of people are browsing their phone with a surprised look on their faces as they attend a funeral of a commonly known person."
"draw a pixelated illustration of a person using a computer at night thinking of their future self displayed in a cloud of thoughts above their head"
"A graveyard with a grave in the foreground that has a tombstone with an evil smile on its face, and in the background, a man and a woman visibly upset checking their phone"

I used to favor Adobe XD until it was discontinued some time ago. One memorable project involved creating a workflow experience for smart lockers, specifically designing a unique UI for Estafeta, a carrier company seeking a customized solution. Initially, my thoughts were scattered as I outlined the site's content, but it served as a visual roadmap for what I envisioned. At the outset, I aimed for a blend of security and intrigue—imagine an amalgamation of an antivirus site and a unique concept like mine, which may seem odd at first.

However, I soon realized the paramount importance of capturing users' attention from the get-go. This led me to craft a landing page that not only conveyed the core idea but also piqued curiosity and encouraged word-of-mouth promotion. Effective communication isn't everyone's forte, but my website strives to be an exceptional communicator, engaging and informing users effortlessly.

My attept at using Wordpress. A nice but limited tool, at least for my purposes.

After several iterations, I reached a stage where the website had a solid foundation, allowing me to share it with trusted friends for their feedback. To ensure confidentiality, I even prepared a Non-Disclosure Agreement (NDA) in case I decided to showcase it to someone more seriously.

As I gathered feedback and reflected on my website, I began to refine my ideas. I identified areas that needed improvement and toyed with the notion of revamping it using new AI tools I had been experimenting with. Leveraging Hostinger as a foundation, Bing for image creation, and ChatGPT for refining textual content, I embarked on a journey to enhance the user experience. My focus shifted towards evoking specific emotions and feelings, aiming to convey entire concepts through visuals alone. This led me to craft a single, powerful image that encapsulated the essence of my entire idea:

Before long, I was deep into using the image generator to craft visuals that followed a consistent format, creating a unified look as if they were all part of the same artistic vision. This led to the development of the pixelated style that became a signature feature of the website's illustrations. I believe it injects a playful element into the virtual experience, resonating perfectly with the style preferences of my target users who are immersed in online content consumption.

This phase marked the point where I truly felt like the director of the project. Here, I delved into the realm of emotions, crafting short descriptions that aimed to evoke specific feelings in the user. My goal was to effectively convey my idea, captivating users' attention and enticing them to create an account on my website. I understood the importance of grabbing their attention within the first 10 seconds, given the short attention span of online users. However, I encountered some prompts that didn't quite satisfy my intentions

I opted to explore Hostinger's website AI creator over Wordpress for its streamlined approach without requiring plugins. This decision simplified much of the work, granting me ample time to focus on refining the user experience, as detailed in Product Design.

Through this process, I gained insights into web hosting, domains, and other technical challenges. I prioritized selling my idea first before delving into costly solutions.

Moving forward, I would leverage Jira to map out epics and user stories. This would facilitate collaboration with architects for estimations and feedback on the overall design, a practice I've found valuable in previous projects.

To create Pornmortem as is, I've spent about $100 USD