Role
Timeline
The Nook Community Panel
Bringing inspiration & community to the consumers of DotDash Meredith’s Home brands through a new community panel website.
Product Design Intern - Home Team
June 2024 - August 2024
Skills
Product design, user research, user experience design, information architecture, user journeying, prototyping, branding, user testing
Tools
Figma, Illustrator, Photoshop, UserZoom
Stakeholders
Home Group & Brand GMs, Sales & Marketing Teams, Site Users
Project Overview
DotDash Meredith’s Home brands are some of the most popular places to consume content about all things home-related. Brands such as Better Homes & Gardens and The Spruce are legacy brands with millions of loyal readers in print and digital mediums. Across seven different brands, readers can find advice from professional designers, landscapers, and even celebrities, on ways to improve their homes, gardens, cleaning, and more based on their preferred aesthetics and lifestyle.
The Nook is a community panel website I conceptualized and designed to serve as a hub for the home brand enthusiasts to connect, share ideas, and engage with like-minded individuals. By facilitating discussion about all things home and lifestyle, The Nook will provide the Home editorial and consumer research teams with valuable insights on their consumers’ preferences that can help guide future editorial and marketing direction. My role as a design intern was leading the design process, from concept to execution, ensuring that the platform is user-friendly and fosters a sense of community among its members.
(This is just a sneak peak! Jump to the final results here)
01 / EMPATHIZE & UNDERSTAND
To start the project, I wanted to get a better understanding as to why the Home and research team stakeholders felt the need to develop a separate community panel website to begin with. These are a few questions I initially set out to answer:
ii. the Home brand lovers
Problem Statement & Goal
03 / The greater purpose
i. Problem Statement
Dotdash Meredith’s Home brands lack a centralized platform where both users and internal teams can derive value. Users needed a dedicated space to connect with a like-minded community and engage with content relevant to their home interests. Meanwhile, the consumer insights and Home editorial teams required a more accurate, real-time method of understanding audience preferences to refine product development and editorial strategies. The existing feedback mechanisms were insufficient, leading to a gap between the brand’s offerings and the evolving needs of their audience.
The key stakeholders internally within the Home team were the consumer insights research team and the editorial team for the Home brands. The key for them is to find a better way to understand their audience— and not just a fraction of it! Finding a way to gain feedback and data from younger, digital-first readers was a must.
Where did these home lovers come from? The ideal Nook users are recruited from an internal list of brand newsletter, brand sites, in book/print ads, & social media subscribers. To qualify for site access, they must engage with at least ONE Home brand biweekly (same as expected frequency of Nook communications).
ii. Goal
My goal is to create a centralized, user-friendly platform that fosters a vibrant community for home enthusiasts while seamlessly gathering accurate consumer insights for Dotdash Meredith’s research and editorial teams. The platform should enable users to engage in meaningful interactions and participate in discussions, while also providing the internal teams with actionable, real-time data on user preferences that were previously unaccounted for. This will bridge the gap between the audience’s evolving needs and the brand’s product and content strategies, enhancing both user satisfaction and data-driven decision making.
Competitive Analysis & Audit
01 / What’s out there?
To understand the purpose for designing the Nook, I wanted to dig into any existing community forms. In other words, why create the Nook if something already existed?
In doing a competitive analysis on four DotDash Meredith community panels that already exist, I found that each panel did not perfect suit the needs of the Home editorial or consumer research teams and also had issues in their navigation bar being misleading or missing information. I kept these in mind as I continued developing my vision for the Nook.
User Persona
02 / Who will use the Nook?
i. the Home editorial & consumer insights research teams
Why do we need the Nook?
02 / IDEATE
User Flow
With the problem clearly identified, I created a user flow to get a clear idea of how the site would be navigated for different tasks. I also included components that I felt each page needed to make for a more efficient design process down the line. You can zoom in and play with my user flow below!
When I started the internship, I wasn't very familiar with the DDM Home brands, whose audiences would become the main users of The Nook. Understanding these users was crucial to designing the platform effectively. To generate ideas for The Nook, I created mood boards and word maps based on the existing brands, focusing on their users' preferences for decor, lifestyle, and more. This approach helped me better understand the kinds of users who would engage with The Nook.
Brand Exploration, Pt. 1
Introducing: Better Homes & Gardens, Martha Stewart, Real Simple, and more!!
With a clearer understanding of each brand’s identity, I set out to shape The Nook’s personality, blending the essence of these brands while adding its own unique touch. To better define what The Nook should represent, I created a word map focused on the emotions associated with the word "nook," highlighting overlaps with the brand identities.
To further develop The Nook’s visual identity, I used key terms from the word maps to create another mood board, exploring color schemes and font pairings that captured the cozy, exclusive, refined, and modern vibe of a nook.
From this inspiration, I created 3 style tiles for stakeholders to choose from (along with my personal recommendations), and from their feedback, refined the branding to one final style:
1st iteration:
2nd iteration:
Final iteration
[ changes made in the 2nd iterations ]
Eliminated option 3, least popular
Option 1- balanced palette to be cooler
Option 2- balanced palette to be warmer
The final branding style guide combines the color palette of Option 2 with the logo style of Option 1. I also included an array of neutrals that complimented the main color palette. All colors follow the DDM guidelines of contrast and accessibility, with the primary green passing 1:7, secondary light green and blue passing 1:3. and the tertiary cream passing 13:1.
When presenting to the stakeholders, I made sure to emphasize the path of brand exploration that led to my design choices. By communicating my thought and work process, I felt that the stakeholders respected my recommendations and valued my input as a designer! Overall, having a detailed and open communication helped each of us understand each other better :).
Brand Exploration, Pt. 2
What is a ‘nook’?
03 / DESIGNING AND PROTOTYPING 🤩
Email Assets
Once I had my style guide finalized, it was time to start putting my ideas to paper (aka putting my ideas to Figma 😉). Alongside my high-fidelty wireframes, I also used Photoshop and Illustrator to create email headers that would be used in recruitment emails for current subscribers!
As I had said earlier, one of my main goals was to instate a comprehensive, organized design systems for the Nook that future community panels could use as a template in the future. The Health Nest and Beauty & Style Collective both did not have well organized or all-inclusive libraries for their design components. Using my user flow as a guide as to what essential components I needed, I created an entire component library from scratch including variable states and prototyped settings (navigation, hovers, etc.) to make designing the Nook easier. I hope that it will also make designing community panels in the future easier too :).
Design Systems
A much needed system…
Buttons & Text
Headers & Footers
Sign In & Homepage
Surveys
Discussion-Related
Text Boxes
Designing with Scalability
With a design system and branding components in place, I wanted to ensure that all of the features I designed were scalable for different screen sizes so the Nook remained accessible to users from many platforms! I ended up using four different screen sizes to ensure my components were both scalable and responsive:
Example of the Surveys page scaled to four screens
I designed the Nook for each of these four sizes as well as a prototyped an interactive version of the site. This prototype would later be used for conducting user testing and ensure that the navigation was intuitive and easy to use. Here are walk throughs of two key user flows— navigating through the site using the navigation bar as well as a deep dive into the community section!
04 / FINAL WALKTHROUGHS
Navigation Bar Walkthrough
The navigation bar an intuitive way to reach every page on the site! When conducting competitive analysis on the other community panel sites, there was heavy inconsistency in how the navigation bar was organized, often leading to pages with too little information or too much unnecessary information. I found that this configuration of the navigation bar made for the easiest use. Overwhelming info about sweepstakes that is shared in emails is no longer in the navigation (unlike the Beauty & Style site) and discussion forms about trending topics and specific brands are now found under the same page (unlike the Health Nest site). Simplifications like these make navigation much less confusing!
Community Exploration
Within the Community page, there are many areas to explore and interact with fellow home-lovers in different forums. Users are able to either browse discussion forms based on their favorite brands or general trending topics. From there, they can create their own discussions or contribute to existing conversations started by other members of the community!
User Testing for Community Navigation
Check out the prototype!
Because the Community page and its subsequent navigation to different discussion topics was the most complex flow in the Nook, I wanted to be sure that users were able to navigate this area of the site. To ensure its usability, I conducted an unmoderated usability test where 12 potential users were tasked with navigating the Community page. My results found that:
On a 1-5 rating scale (1 = hardest to navigate, 5 = easiest), 100% of participants found the community page easy to navigate
11 out of 12 users were able to successfully complete three tasks regarding Community page navigation (one unable to because of a prototype error)
If you want to test out the prototype for yourself, play around with it here! (Disclaimer: Because it is a prototype, not everything is functional. Please use the blue highlights to guide you, and happy prototyping!)
05 / REFLECTIONS & THANKS
Next Steps for the Nook?
The Nook is up and running!! I’m so excited to see users using the Nook and bonding with one another— it truly is the closest experience to ship a product and see it performing well :). Though my time at DotDash Meredith is over, I’m really happy to see that the Nook doing well, and I hope that it can serve as a guide to future DotDash Meredith community panel sites.
Though my time at DotDash Meredith was short, I’m happy to have completed my project within just 8 weeks. Had I had more time, I would have loved to conduct even more in depth testing on the Nook and add more creative flair to the branding elements. However, I’m super happy with how it turned out!
Thank you!!
I wanted to give a big thank you to my manager Amy Sheehan and mentors Tiff Jessup and Aleza Leinwald for providing the best support and feedback during my time at DotDash Meredith! I truly learned so much about what it means to work with people you like and really appreciated their guidance and help. Can’t wait to see what’s next :)
And finally, be sure to check out the Nook & join if you’re a home & lifestyle enthusiast :)
https://www.thenookpanel.com/
