Diadem App
Are you a big fan of nerdy franchises, books, and have an uncontrollable jewelry obsession like me? If so, Diadem holds many unique gems that await you! Diadem is a jewelry browsing app full of unique jewelry inspired by both popular and niche franchises of your favorite books, movies, shows, and more. Users have the ability to browse through a catalogue of iconic jewelry and directly contact a jeweler to collaborate on custom, individualized designs that best fit their styles and capture their visions into an elegant, one-of-a-kind gem. 
Loading Screens
Upon opening app, a colorful animation will occur where the gem in the front of the diadem sparkles. Users will hear a sparkling sound effect as this happens. After the sparkle animation occurs, the "iadem" portion of the word will slide left until just the larger, abbreviated "D" appears on a solid, black background, as shown on the right most screen. The "D" will then fade out, leading the users to the sign in screen. 
Making An Account
Once the loading animation has completed, the user will be taken to a screen where they can create their own account, developing a "codename" and password associated with their email of choice.
Interests
After creating an account, the user will then be asked to choose what franchises they are most interested in. By choosing these, the app will be able to guide the user, based on preference, to the jewelry products that are most popular in that category. This selection will also allow them to explore more options within their chosen categories of interest. This will help narrow down the user's feed to what they are specifically interested in. 
Recommendations
Once the user has selected all of the franchises they like, they will be taken to this screen, which shows a list of recommended jewelry pieces that are most popular from each franchise they have chosen. Users will have the option to explore more from each category if desired while also showing them the top sellers from each category. 
Favoriting Items and Viewing Your Favorites 
When scrolling through suggested and searched items, users have the ability to like their favorite items to save them by clicking on the heart icon located at the top right of each product photo. A message will appear at the bottom, notifying them that it has been saved to their favorites. 

To view favorites, users may click on the drop down menu located in the top right corner of the phone screen. Once users have navigated to the favorites screen, they are able to scroll as they please and search for their favorited products by name, company, etc.  To filter through favorites, users will click the drop down "filter" menu, which will slide out from the right side of the screen making a swinging sword sound effect. Dozens of categories will then appear for the user to select through based on what they are looking for. Once applied, the app will automatically filter the items.
Viewing Products 
As the user explores the many jewelry options, this screen demonstrates what it will look like to click on an actual product and view its information. The screen will show multiple photos of the products, the name of the product and its seller, the price, description, reviews, etc. All the need-to-know information is there!
Adding to Cart
Once the user clicks "add to satchel," a fun animation will appear to let them know they have successfully added it into their cart. Sparkles will fall from the top of the screen, fading into the success message, which gives them the option to view their satchel contents. If they choose to view their shopping cart, they will then be take to a page displaying the products in the cart, quantity, and total cost after tax. 
Contact a Jeweler
When the user selects the option to contact a jeweler from the drop down menu, they will be taken to a page that displays a list of registered jewelers on the app. Each profile will display the jeweler's name, rating, location, and number of sales made in total. Users have the ability click on the contact button or favorite them for later. Users may also click on a jeweler's name to view their official profile. If they choose to hit the contact button, the user will be taken directly to a messaging page. Users have the ability to send photos and written messages with the jeweler, but no video or voice recording content is permitted. 
Drop Down Menu
The drop down hamburger menu feature allows users to view their shopping carts, favorited items, jeweler contacts, and profile settings. When the user clicks on the hamburger menu, a swinging sword sound will play as it drops for the user to choose from their options.
Interactive Poster
Using Adobe Illustrator, After Effects, and the Artivive app, this interactive poster recreates one of the most iconic scenes in film history. With original illustrations, this poster displays thousands of individually animated frames, many being individually hand drawn, recreating Luke and Vader's duel in Cloud City. This poster is for the old Star Wars fans to the new ones just discovering this iconic film series. 
Seven Delectable Sins Website 
You're sitting in grandma's kitchen and the smell of freshly baked cookies floods the room. As you take a bite, the warmth and softness of the cookie melts in your mouth, leaving you wanting more. Yea... that's what we do here at Seven Delectable Sins bakery. From macarons to made-to-order cakes, Seven Delectable Sins has the fresh taste and home comforts that your taste buds desire. 

What to check out our website? Visit us at https://bakery-katelyn.webflow.io
History of Violin Making Website
This website explores the experimentation with a variety of web animations and effects that aid in the visual storytelling of the history of violin making. In this site, I created a custom animation in After Effects that includes different illustrated pieces of the violin that come together. As you scroll horizontally, this animation will work on scroll either direction. Another After Effects animation is included toward the bottom of the site, which displays the violin parts in a moving blue print.

Want to check out the site? Visit https://history-violin.webflow.io
Back to Top