Case Study - RoastMyGift.com
Utilizing AI for roasting gift ideas
Challenge
Every year at Gray Loon we try and do a special self-promotion that we roll up into our "Holiday Card" that is delivered to clients and friends.
Action
Inspired by RoastMyStrava.com, I came up with the idea to build a single page application (SPA) that would allow users to submit their holiday gift ideas and have them roasted by AI.
My Roles
- Lead UX Designer
- Lead Creative and Visual Designer
- Lead Developer
Design Tools
- Figma
- Adobe Photoshop
- Adobe Illustrator
- Adobe After Effects
Development Stack
- React
- NextJS
- ChatGPT API
- Tailwind CSS
- Daisy UI
Credits
- Andy Hinkle, Collaborating Developer
Proof of Concept
Early in the process I developed a functioning proof of concept, to make sure that we could get the desired results before getting too deep into the project. This involved creating a functional sekeleton of the app, and using the basic user criteria would hit the ChatGPT API and return the roast. The proof of concept worked exceptionally well and the project moved forward into design.
Initial Planning and Design
The design phase started out with some basic pencil sketches to define the UI. From there, I started working on wireframes in Figma, and eventually functional prototypes.
Development
Building upon the proof of concept and with the Figma files now ready for development, I began to finalize the UI, setting up responsive breakpoints, theming and styling the front end.
At this stage I also began working with Andy Hinkle on some of the more complex backend work such as prevention of prompt injection and form validation. We also collaborated to set up the sharing features as well, allowing users to generate and share images of their roasts.
Animation
At the start of the design phase, I really wanted to add some personality to the page, and came up with the idea of the "unimpressed elves" - a pair of skeptical Christmas elves that would be roasting your gift ideas, both figuratively and actively in animation.
Loading video...
Beginning with some vector elf art from Getty Images, I modified attributes of their facial and body structures to give them a more questioning and criciisizing look. From there, I gave them gifts to roast on sticks and brought them into After Effects where, using the pupet tool, animated facial expressions to make them appear more judgemental and unimpressed.
Additionally, using CSS keyframes, I added a layer of slow falling snow to the scene to add to the holiday aura.
Check out RoastMyGift.com