Starting Soon Case study
I chose this project to expand with a website because the style and assets used to create the animation felt too cute to not use! I also felt it would be fun to create the merchandise and episodes for the podcast!
Website Planning
- Header Content
- About
- Episodes
- Merch
- Contacts
- Footer Content
- About
- Episodes
- Merch
- Contacts
- Streaming Platforms (Spotify, apple music, etc)
- Banner: This week: Creepin’ it real! Hell House LLC !
- Hero
- Hide and Shriek
- Look on the fright side!
- Podcast loading screen animation
- About
- Hide and Shriek is a podcast for horror fans that want to uncover every mystery that the genre has to offer. Through perilous research, the team behind Hide and Shriek finds all of the hidden scares for you!
- New Episodes every Friday!
- Look out for announcements that announce the movie of the next week’s episode, so you can watch it and follow along during the episode.
- Hide and Shriek is a podcast for horror fans that want to uncover every mystery that the genre has to offer. Through perilous research, the team behind Hide and Shriek finds all of the hidden scares for you!
- Episodes
- Heading: Jump into some eerie-sistible episodes!
- Cards with episodes
- Cover Photo
- Title
- Length
- Button: Listen Now!
- Merch
- Heading: Merch that’s to DIE for!
- Cards with merch items
- Shirt
- Dark brown, light pink
- Hoodie
- Dark red, medium pink
- Sticker pack
- Shirt
- Call to action: Find more!
- Who: Thank you for tuning in! Hide and Shriek was started by a mom and daughter duo who love watching horror movies together. While one of them was intently watching the movie and researching the plot, the other one missed half of the scares every time (We won’t say who )!
- What: Hide and Shriek is a podcast for horror fans that want to uncover every mystery that the genre has to offer. Through perilous research, the team behind Hide and Shriek finds all of the hidden scares for you!
- Search, filters
- Cards with merch items
- Shirt
- Dark brown, light pink
- Price, Size
- Hoodie
- Dark red, medium pink
- Price, Size
- Sticker pack
- Price, Size
- Airpods Case
- Price, Size
- Keychain
- Price, Size
- Phone Case
- Price, Phone
- Tote Bag
- Dark Red, light pink
- Price
- Shirt
- Episodes Content
- Post 1 – Episode 1 Content
- Howl you doing?
- Welcome to Hide and Shriek! Meet the hosts and learn more about the podcast!
- 30.15
- Howl you doing?
- Post 2 – Episode 2 Content
- Witch way to the fun?
- The Blaire Witch Project is a classic found footage film that follows three people who go into the woods to explore the ghosts that live there. Or is it? Learn about the sinister theories about the true meaning of the movie and the hidden details you might not have noticed.
- 1.20.04
- Witch way to the fun?
- Post 3 – Episode 3 Content
- Handle with scare
- Anabelle is a terrifying horror movie that takes place in the Conjuring Universe. This movie is based on a true story with the real-life doll being based on a Raggedy Anne Doll. While in her own movies Annabelle is creepy, did you she is in other movies completely unrelated to the horror genre? Learn more about Anabelle’s hidden appearances.
- 1.12.20
- Handle with scare
- Post 4 - Episode 4 Content
- Who ghost there?
- Paranormal activity is a found footage horror film that follows a couple who is experiencing strange happenings in their house. With the different camera angles, it’s hard to catch all of the ghosts’ movements throughout the movie. Explore the hidden details that you might have missed during your first watch.
- 1.02.06
- Who ghost there?
Valerie
Wireframes
I figured that since I had the image assets prepared already, that it would help to add them to the wireframes. The layout for the homepage was meant to follow a logical narrative; introduction, episodes, merchandise, and a thank you to those viewing my website! I also wanted to keep repeated shapes throughout the entire website, such as the oval mirror shape.
Desktop Prototype
The prototypes for the desktop versions utilized the same textures from the original video, as well as they were all linked together. The most challenging part to linking the website was the store, since there are several variations of some products, but it was important to showcase them. One important element of the prototype design was how the colors would be applied across each page. I wanted to use the darker colors as the background in order to emphasize the eerie vibe of the podcast. I used gradients to transition from the about section to the episode section, so that I could use some of the mid-toned colors. The initial design incorporated zig zag layouts in different elements, such as the episodes. Overall, I was satisfied with the overall layout and design across the pages!
Mobile Prototype
The prototypes for the mobile versions followed single column layouts with some alternating alignments. The use of elements are similar to the desktop prototype design.
Post Prototypes
The post prototypes focused on the episodes and showed the description, the episode cover, and the audio file for the episode. I wanted to showcase the episode covers in larger scale, since they aren't as apparent in the thumbnail sizes across the other pages. I thought the designs were cute and cool, so I made sure they were the most visible piece of the post. I also opted to make the background of the posts the lighter pink color to add some contrast from the other pages. I understood that the pages looked very similar, since they all featured the wallpaper background, so I felt it was necessary to make the posts stand out! The mobile and desktop versions don't differ from one another too much, since the post was already in a single column format. One design choice I wasn't completely sold on was the way the episode titles sometimes went into two lines, so I decided to look into changing it.
Design Process
The final website ended up being seven pages, since I added a cart page and a checkout page in order to make the shop semi-functional! It was cool getting to use plug-ins to build specific parts of my website, as well as using the widgets for purposes that they weren’t intended for! Overall, WordPress was a challenge to figure out, but once I got the hang of it, it wasn’t so bad!
