Designing by prompt —
the Broadcast))) app
Overview
The goal of this project was to design and develop a fully functioning social media app through the use of AI development tools, combined with my industry knowledge of UX/UI principles and best practices.
Tools used: Bolt AI, Figma, ChatGPT, XCode, Supabase, Netlify
Discovery
Beginning with Bolt
The beginning of this project started with a prompt on Bolt AI whereby I listed out requirements for a social media web-app called Broadcast))) with the following functionality:
Each post includes precise geolocation data
Users can set a broadcast radius using a distance slider
Posts are only visible to users who are within the specified proximity range set by the original poster
The feed and layout should be similar to the UI of Twitter (as a basis to start from)
and… POOF!
Although I do not have screenshots of the first design that Bolt created, I can say that the first draft was only a skeleton of what you see in the above screenshot. Bolt was able to generate a logo and colour scheme, a basic slogan, and the necessary UI components for the requirements I provided. There was much work to be done, but the AI system was clever enough to understand the key design principles of hierarchy, text alignment, spacing patterns, and more, to create a useable, working interface for the first iteration of the app. It was a jumping off point, and, it actually worked surprisingly well!
Designing with words?
-----
Designing with words? -----
The process of designing with Bolt was unlike any other design process, and at times it felt limiting, yet extremely powerful. The process was much like having a conversation with any other AI LLM tool. I would give a prompt on the left hand of the screen, and through conversation, add and remove features, or give explicit design instructions for the system to execute and update in the code in real-time. The major downside when adding new UX features was consistency in the design, such as with font colours and size, padding sizes, and more.
AI Design with Bolt
Designing through conversation
“The process was like no other I had experienced. I was able to provide explicit design direction, and the system would execute it. It didn’t always get it right, but undoing the error and trying again was made so simple, that the trial and error process became quite fun. I felt like Tony Stark talking to Jarvis in Iron Man, when he built his first Iron Man suit.”
When designing the app I ensured that the UI was mobile-friendly and responsive throughout the process. Even though Broadcast))) was a web app, I always had the goal of porting it over to the App Store eventually. I used ChatGPT to help me edit my WebView in Swift, which mirrors the web experience to a native iOS app. In the slides below you can see how ChatGPT was able to review my code, write new code, and ultimately help me bring the contents of Brdcast.app to the App Store using XCode on Mac.
Development
Porting the app to iOS
The unconventional part of the design process with Bolt was that I had to design the components in Figma after the app was created. Since the design and development happened in tandem as I was prompting design direction, I never got a chance to document or record any of the UI design components during the process. So after I launched my MVP, I had to do some reverse-engineering to capture the correct font types, sizes, colour hex-codes, and more - to ensure that the Figma designs matched the work Bolt and I had produced. Down below you can see where I had to take screenshots and document Bolt’s design patterns.
Designing the UI components
Figma design
Design
High-fidelity designs
Final designs that are live today, both on the iOS app, and on https://brdcast.app/ .
Users may only make posts to their local feed, and must determine the max proximity radius. They also have the option to include a photo or share the location pin.Creating a post
Each post in the feed contains a proximity indicator in the top right, to show the radius of visibility. They also include like and comment functionality like other social media apps.Scrolling the feed
All user posts older than 7 days old are automatically deleted from the feed in order to keep the content unique and fresh every week. Read more below about why this happens.Social rules
Broadcast))) is about the greater community, and not the individual.
On Broadcast))), there are no public user profiles. I cannot click on someone's username to see a profile of the user's post history, because the purpose of the social app is only to add to the community feed. Posting is not for fame or glory, but rather to contribute to something greater than yourself, and add value to your local city or neighbourhood with something meaningful or positive.
-
I decided to limit the feed to only posts from within the week to keep the content relevant and recent. This way, the content is tailored to what is going on around you, and keep things fresh at all times when you check the app. It also allows creators to share the spotlight in the ‘most liked’ filter, since it resets.
-
I decided that a social media app with 0 notifications was better for mental health reasons, to avoid any sort of dopamine traps that hack our brain’s reward system - which could lead to anxiety and addiction. People, especially teens, may begin to tie their self-worth to the number of likes or comments they get.
-
Reduces Social Comparison
Without public profiles, users can’t compare likes, followers, or aesthetic feeds.
This reduces pressure to perform, compete, or "curate" a perfect life.
Privacy & Safety Benefits
Users have more control over who sees what.
Less risk of strangers collecting your personal info or photos.
Broadcast))) is available on web at https://brdcast.app
Reflection on designing with Bolt AI
Summary
Advantages
Bring ideas to life very quickly, and launching an MVP product within hours based on an idea -- great for speed to market
Very fast iteration process for design and development
Reduces dependency on other experts to test and QA new design or UX ideas in staging and production
Easy access to codebase for editing of CSS or other elements
Challenges
AI makes design decisions of it’s own without consulting user, unless given explicit instructions - but even then, can veer off course from the provided instructions
Uses public React libraries for fonts/iconography and other components so no room for custom designs in the process
Each iteration of design comes with the risk of breaking the app, as the AI sometimes changes other features or code without asking first
