Project: Substack | Brainrot Pharmacy
At a glance:
- Website
- Brainrot Pharmacy
- Skills
- UX, Visual Design, Code, Project Management
- Tech
- Figma, HTML, CSS, TypeScript, Preact
- Impact
- 600+ Subscribers to a new Substack
2000+ Subscribers on TikTok
Dynamic image creation and social sharing
I developed and helped design a web app quiz that would grow Substack’s overall users and subscribe folks to a new Brainrot Pharmacy publication.
Research
Using a quiz framework I had created for a previous project (built with Preact and now improved with TypeScript and Routing), I worked directly with two of Substack’s social team to come up with a quiz format, scoring structure, and calculated result (🧠 diagnosis) that would grab people’s attention and encourage social sharing.
Plan
I outlined a user flow and defined key pages for design. I also broke down each screen into reusable components and identified some key opportunities for surprise and delight. We decided on a few key points: music, animations, sound effects.
Deciding on an appealing aesthetic was the most challenging part of this project. We wanted a direction would catch traction with folks spanning different age groups. After researching and presenting a three distinct design directions we landed on a “Webkinz” aesthetic which felt playful and inviting. Nearly all of the traffic for this quiz would be on a mobile device, so our focus during the design and development process was to maximize our screen real-estate while still being playful and fun. In addition to helping design screens, I also worked with an animator to create unique Lottie animations for use as an introduction as well as the diagnosis.
Execution
This project allowed me to explore a more in-depth Preact app utilizing design and development techniques I had never used before. I really enjoyed creating small instances of delight as well as working with a small team to make a fun and interesting experiment that had some quantifiable impact.
