Continuing from my rapid prototyping project, which consisted of a ChatGPT-coded website, I am developing the website presence for my group, Tapeify, which creates physical custom Spotify playlists based on each customer's unique music preferences.
Midjourney Web Development
Due to complex requirements and the need to integrate a chatbot, ChatGPT wasn't an option due to unreliability and limited HTML coding features. So, I used Wix's Editor X and Midjourney for UI design. With the attention economy in mind, I wanted an eye catching website, so I designed it around a cassette player. After Midjourney prompts, I learnt wireframes in Adobe XD and recreated in Editor X. The website can be viewed at tapeify.co. The combination of visual media outputted by Midjourney, converted into HTML code and reproduced visually by browsers can be seen through a transmedia lens. Looking through a copyright lens, designing my own cassette player helps reduce copyright issues.
Incorporating A.I into a ChatBot
Our chatbot, TapeifyBot, guides users to generate their own playlists, rather than selecting prebuilt sets. This creates a more personalised experience, taking full advantage of the attention economy and participatory culture.
My goal was to use ChatGPT to analyse user input and determine sentiment, essentially extracting the user's mood. OpenAI's API often failed to determine users mood and timed out on slow connections. Making it too unreliable currently for a customer-facing service.
To take advantage of AI capabilities, OpenAI is now running in the background to update Pop artists using Zapier and the ARIA Charts. I learnt to create with uChat and retrieve and store data in a Google Sheet. Analytics of user experience are added to a 'responses' sheet after each interaction. TapeifyBot allows for a long tail approach, combining many nice products for an ultra-personalised customer experience.
Looking at this through an algorithms and data lens, the database plays a key role for user-friendly website experiences, creating efficient backends which aid in faster data retrieval allowing capability for a real-time ChatBot.
Through a privacy lens, data privacy is a top priority; personal info from our bot is permanently deleted after each conversation, and only unidentifiable data is retained for statistics.
Building a Unified Analytics Dashboard for our AI ChatBot & Websites
Feedback loops are important for our project success. I created a custom app using Glide to consolidate data from uChat (AI Bot), Wix (Main Home Page), and BigCartel (eCommerce). Obtaining unified statistics posed a challenge. After learning how to build this dashboard, all team members are able to view and measure the project's success, track audience interactions and promptly address issues. It also enables us to better adhere to design thinking methodology and further develop our product based on understanding our audience and their needs.
Findings
Overall, ChatGPT is powerful but has been unreliable for HTML coding, so I've used in the background instead of the main bot flow. Midjourney can understand UI Design prompts and generate incredible ideas for industry leading websites. AI Bots create a captivating and customised shopping experience, providing an exciting and niche solution for the promotion of ultra-personalised products. Moving forward, I will use ChatGPT more as a tool for saving time rather than taking over tasks completely.
Next Steps
My future plans for the AI ChatBot and Website include a more unified design and integration of TapeifyBot into Instagram DMs. Additionally adding more natural conversation features to bot (currently has 1 conversation flow). I also want to enhance the Cassette Player website's functionality and interactivity, allowing users to swap cassettes and possibly play music from their browser. Inspired by amazing websites from UncannyValley and Klevgrand.
