Oh Norman
WebGL Physics Custom Quiz
Kaley Cuoco's new pet brand wanted to put out a landing page that kept users engaged and delighted.
During my time at COMBO NYC, I was part of the team that worked with a new pet company collaborating with Kaley Cuoco. Our job was to create their brand and a new landing page for their soft launch. They ended up naming the company "Oh Norman," after Kaley's dog.
We decided on creating a quiz to intake feedback from users about what they wanted to see from the new brand. The quiz was custom developed so that everything flowed naturally with the design and branding in place. All results would funnel into a CMS which would also have an aggregated results view for the client's team to keep up with.
Highlights
Loading animation
Used Rapier physics engine to create floating letters that always returns
Highlights - Quiz Screens
What products are you most excited about?
What's most important you when choosing products?
What do you love most about your pets?
Upload a photo of your pet
What do you worry about most when it comes to your pet?
What state do you live in?
End screen
Dashboard showing aggregated results
Main Challenge
In general, server monitoring and scaling was a challenge. Our CMS API was taking a hit from all of the image uploading and quiz submissions it was receiving. All was fine in the beginning until Kaley made an instagram post about the site and we received an enormous amount of traffic. To offset the load as much as possible, we made sure to cache the site as a static page using NextJS and keep requests to the API to a minimum. On the server end, we deployed via Digital Ocean App Platform and made sure to scale when memory was exceeding warning thresholds. Although we did face a small crash in the beginning, we acted quick to put the site back up and running afterwards.
Development Specs
- NextJS for front end
- NextJS routes for server side
- Strapi CMS for submissions and content
- AWS cloudfront and s3 (CDN and storage)
- PostgresSQL