NN/g Newsletter Redesign
While working at Nielsen Norman Group, I worked on redesigning the newsletter used to share articles, announcements, and course information with subscribers. The newsletter contains a large amount of content in every issue, so clarity and hierarchy are important for helping readers quickly understand what is new and where to click.
While working at Nielsen Norman Group, I worked on redesigning the newsletter used to share articles, announcements, and course information with subscribers. The newsletter contains a large amount of content in every issue, so clarity and hierarchy are important for helping readers quickly understand what is new and where to click.
Role:
Designer
Focus:
Layout, hierarchy, visual design
Tools
Figma, Illustrator, MailChimp
Problem
Problem
The previous newsletter layout contained valuable information, but the structure made it difficult to scan quickly.
The previous newsletter layout contained valuable information, but the structure made it difficult to scan quickly.
Articles, announcements, and promotions were grouped in ways that were not always clear, which made it harder for readers to find the most important content.
Articles, announcements, and promotions were grouped in ways that were not always clear, which made it harder for readers to find the most important content.
Design Goals
Design Goals
The design needs to work within existing email constraints while still feeling more organized and modern.
The design needs to work within existing email constraints while still feeling more organized and modern.
Make content easier to scan
Highlight important updates
Improve readability
Maintain NN/g’s established visual style
Make content easier to scan
Highlight important updates
Improve readability
Maintain NN/g’s established visual style
Research & References
Research & References
Competitor Analysis
Competitor Analysis
To understand how dense newsletters can remain readable, I reviewed examples provided by my team from other publications and explored different layout patterns. These references helped identify ways to show more content without making the design feel overwhelming.
To understand how dense newsletters can remain readable, I reviewed examples provided by my team from other publications and explored different layout patterns. These references helped identify ways to show more content without making the design feel overwhelming.
Branded designs
Branded designs
The Skimm and The Washington Post have eye-catching branded headers, which allow their newsletters to stand out from other emails.
The Skimm and The Washington Post have eye-catching branded headers, which allow their newsletters to stand out from other emails.
Takeaways at a glance
Takeaways at a glance
The Washington Post for example breaks down each piece of content, allowing users to have a takeaway
with each.
The Washington Post for example breaks down each piece of content, allowing users to have a takeaway
with each.
Showcasing other offerings
Showcasing other offerings
IDEO gives events and other offerings calls to action and prominence, ensuring they are noticed and engaged with.
IDEO gives events and other offerings calls to action and prominence, ensuring they are noticed and engaged with.
Problem Statment
Problem Statment
How might we redesign the NN/g newsletter to better inform subscribers of offerings and events while keeping the layout easy to scan?
How might we redesign the NN/g newsletter to better inform subscribers of offerings and events while keeping the layout easy to scan?
Design Process
Design Process
Interpreting Existing Direction
Interpreting Existing Direction
The redesign needed to stay aligned with existing brand guidelines and content structure. Early drafted sketches by my team explored ways to improve layout while keeping the overall format familiar.
The redesign needed to stay aligned with existing brand guidelines and content structure. Early drafted sketches by my team explored ways to improve layout while keeping the overall format familiar.
Concerns with the original layout:
Descriptions too long
Not enough content visible
Articles felt disconnected
Hierarchy unclear
Descriptions too long
Not enough content visible
Articles felt disconnected
Hierarchy unclear
Testing Different Layouts
Testing Different Layouts
Multiple layout variations were created to compare different levels of density and spacing.
This allowed the team to evaluate which version felt easiest to scan and which showed the most useful information.
Multiple layout variations were created to compare different levels of density and spacing.
This allowed the team to evaluate which version felt easiest to scan and which showed the most useful information.
Testing
Subscribers value more content over descriptions.
Subscribers value more content over descriptions.
Two layout versions were tested with users to understand which format made it easier to find content. Users preferred layouts that showed more information at once, as long as the hierarchy remained clear.
Two layout versions were tested with users to understand which format made it easier to find content. Users preferred layouts that showed more information at once, as long as the hierarchy remained clear.
Readers do not read the entire newsletter.
Readers do not read the entire newsletter.
Rather, they scan quickly and decide what to open. Design should support scanning behaviour rather than long reading.
Rather, they scan quickly and decide what to open. Design should sketches rather than long reading.
Considerations
Considerations
Keep descriptions short
Show more content above the fold
Improve grouping
Reduce unnecessary text
Keep descriptions short
Show more content above the fold
Improve grouping
Reduce unnecessary text
Refinement
Refinement
The layout was refined to balance clarity and content density. Copy was shortened, hierarchy was simplified, and spacing was adjusted to make the newsletter easier to scan.
The final layout presents more content without increasing overall length. Courses, articles, and events are grouped more clearly, allowing readers to quickly understand what is available and decide where to engage.
The team decided to move foward with "New Iteration".
The layout was refined to balance clarity and content density. Copy was shortened, hierarchy was simplified, and spacing was adjusted to make the newsletter easier to scan.
The final layout presents more content without increasing overall length. Courses, articles, and events are grouped more clearly, allowing readers to quickly understand what is available and decide where to engage.
The team decided to move foward with "New Iteration".
Final Design
Expanded content variety
Newsletter provides new articles, videos, announcements, upcoming UX training courses, and quick UX tips
Employee Directory
Employee
Benefits
Employee Directory
Staff Benefits
Effective Ideation Techniques for UX Design
Interaction
UX Tip of the Week
Effective Card Sorting Labels
Use synonyms for recurring keywords on card labels in your card sorting study. This encourages your users to group cards conceptually rather than by similar keywords. Read more
Instant value at a glance
Descriptions highlight the content's relevance and value. While providing actionable takeaways.
By Sara Paul • 6 Minute Read
The face behind the work
Bigger emphasis on the author behind the work.
Emphasis on offerings
Bring attention to paid offerings by adding calls to action with quick links to learn more.
UX Tip of the Week
Effective Card Sorting Labels
Use synonyms for recurring keywords on card labels in your card sorting study. This encourages your users to group cards conceptually rather than by similar keywords. Read more
Instant value at a glance
Descriptions highlight the content's relevance and value. While providing actionable takeaways.
Expanded content variety
Newsletter provides new articles, videos, announcements, upcoming UX training courses, and quick UX tips — all in one place! Proving that NN/g is more then free articles.
Employee Directory
Employee
Benefits
Employee Directory
Staff Benefits
The face behind the work
Bigger emphasis on the author behind the work.
By Sara Paul • 6 Minute Read
Emphasis on offerings
Bring attention to paid offerings by adding calls to action with quick links to learn more.
Reflection
Designing for scanning behavior is critical in content-heavy layouts.
Designing for scanning behavior is critical in content-heavy layouts.
User testing confirmed that readers prefer clear grouping and visible content over long descriptions.
Working on this project reinforced the importance of iteration and validation when working with real content constraints.
By testing multiple layouts and refining the hierarchy, the final design better supports how readers actually use the newsletter.
User testing confirmed that readers prefer clear grouping and visible content over long descriptions.
Working on this project reinforced the importance of iteration and validation when working with real content constraints.
By testing multiple layouts and refining the hierarchy, the final design better supports how readers actually use the newsletter.
Final Design
Instant value at a glance
Descriptions highlight the content's relevance and value. While providing actionable takeaways.
Expanded Content
Newsletter provides new articles, videos, announcements, upcoming UX training courses, and quick UX tips — all in one place! Proving that NN/g is more then free articles.
The face behind
the work
Bigger emphasis on the author behind the work.
Emphasis on offerings
Bring attention to paid offerings by adding calls to action with quick links to learn more.
