Save the Date Webpage / Cincy Beerfest 

UI, Coding / Interaction Design II (DAAP)

This class assignment was to design and code a save the date webpage for an upcoming event. The design requirements were to display the time and location of the event, as well as to engage the user in a relevant way. I chose Cincy Beerfest, a local beer festival where attendees exchange raffle tickets for beer samples.

P R O C E S S

01 / Storyboards

My design concept was based off the event's main activity: exchanging raffle tickets for beer. My goal was to allow the user to discover the brands of beer served at the event in a more engaging way than just reading a beer list. The ticket stack in the center of the screen would have a clickable affordance, and each time the user clicked a ticket, a new type of bottle cap would appear on the screen.

02 / Coding Process

This project was an introduction to coding in Framer. I started with simple colored shapes to figure out how to code the major interactions. The main coding goals were: (1) Clicking a ticket in the center of the screen would cause randomly selected bottle caps to appear from off screen, and (2) The ticket would be distributed to a random location on the screen after being clicked.

03 / Design Refinement

As I worked on refining the code, I also worked on refining the overall design. I explored the use of stronger typographic elements, and replaced the simple shapes I used in my initial prototype with images I had created in Illustrator. I completed the visual look with a background image to round out the illustrative aesthetic. 

05 / Video Demo & Interactive Prototype

The final Framer prototype was demonstrated in our final in-class critique, and was chosen by my peers as one of the top two examples in the class. I added some final interactive touches such as different hover interactions for each bottle cap, and bottle cap stains appearing if you click on the background.