UX/UI, Web Design, Brand Design, Animation Spooky Mommy is Scary Mommy’s signature Halloween hub and a highly-anticipated immersive, annual experience that draws thousands of page views as a go‑to resource for decor inspiration, costume ideas, trick‑or‑treating tips, and all things spooky for Scary Mommy readers. As a designer at Bustle Digital Group, I led the end‑to‑end UI/UX system and visual identity for the Spooky Mommy editorial package. I collaborated closely with Scary Mommy’s editorial team to map out user flows, wireframes, and interactive design patterns, ensuring seamless navigation and engagement across the site. I also assisted in photo and art direction alongside the Scary Mommy art & photo departments and NYC‑based photographer Gregory Reid to bring the visual style to life in vibrant still-life photography throughout the hub.
Phase 1:
Discover & Define
As a designer for this package, it was important that I align with the editorial team on what they hoped to convey in this digital experience through their work and what they hoped Scary Mommy readers gain from this annual issue. In order to do so, I conducted interviews with editors and writers about their content plan for Spooky Mommy.
The main goals for this package were:
01.To provide readers with a central hub for practical and abstract resources for Halloween
02.
Convey editorial content in Scary Mommy’s uniquely playful, clever, and thoughtful tone
03.
Publish an interactive experience that was exciting to both readers and potential sponsors alike
04.Raise excitement for spooky season among Scary Mommy readers by easing any stress they may be feeling
After gathering these insights, I collaborated closely with the art direction and photo team to establish the creative goals for this project. We focused on our key users: Scary Mommy readers. From the team’s past research, we knew that the Scary mommy reader: 01.
Seeks content that celebrates motherhood, but is authentic and honest.
02.
Seeks resources to share with her mom network
03.Is probably millenial or gen X
04.In the know and engaged on social media
05.Loves a good laugh and nostalgia, but is unafraid to broach more serious topics
Phase 2:
Design
After having aligned with the editorial team and defining our knowledge about Scary Mommy users, it was time to move into the design phase. We received content plans from the editorial team, and began to plan the style, design system, and user flow of this interactive experience.
Once the user flow was established, we began to create wireframes to map out how we would create an optimal experience for readers using Scary Mommy’s internal CMS. We learned from our flow, that in order to achieve our happy path of driving engagement towards multiple internal articles on the hub page, we needed to find a way to sustain interest for users.
The key to this was visual diversity – it was essential to avoid monotony in this package. Animation was key in this mission. We sought to not only integrate animations throughout the articles in this issue, but also on the hub it self, to create a spookily delightful experience for readers.
Since we knew our users responded positively to nostalgia and humor, we opted for a kitschy and vintage aesthetic for the hub. We selected bespoke elements such as typefaces, colors, and retro-looking stickers to compliment the overarching Scary Mommy brand aesthetic. This design system was applied throughout the art work and photography on this hub, so that everything had a cohesive visual voice.
As we began to implement the wireframes and journey maps we had designed for this hub, we ran into some issues pertaining to sizing of the teasers for each individual article art. Since the article art needed to fit the Scary Mommy CMS size requirements for their individual page headers, the teasers didn’t look consistent on the hub. As a solve, we created bespoke frames and teaser treatments for each piece, so that their sizing was consistent and integrated seamlessly into our larger grid system.
In addition to dynamic animations, art, and photography on the page, we also wanted to feature an interactive element on the page to maintain reader curiosity and interest: flipcards. With the editorial team, we worked to create delicious trick or treat flip cards that featured custom photography by Gregory Reid. The front side of the card featured a vibrant photo of a treat. We invited users to guess the slogan for each treat, and on hover (tap on mobile and tablet), the answer would be revealed on the card: a fun game readers could play with their friends and family.