Boosting Engagement on Today' Account and Recipe Pages
NBC News
Company
Laiba Sarwar
Team
2024 (2 month)
Duration
Figma
Tools
My Role
Product Designer
Project Overview
Founded in 1940, NBC News is a leader in broadcast journalism, renowned for delivering reliable and timely news coverage to millions of viewers. As a trusted source for in-depth analysis and lifestyle content, NBC News extends its influence through the Today Show, which offers a wide range of cooking and recipe segments.
However, it became evident that enhancing user engagement on Today’s digital platforms was essential, particularly in the areas of recipe accessibility and user account features. In response, I set out to revamp the user experience by boosting engagement on Today’s recipe and account pages.
This initiative included adding detailed recipe information, creating a scannable table of contents for quick jumps to specific recipe sections, and integrating related links under video pages to help users easily discover detailed recipe articles. Additionally, we simplified the account creation and onboarding process, making it more intuitive and user-friendly.
By focusing on user-centric improvements, the redesigned pages now offer a seamless and engaging experience, ensuring that visitors can easily find and enjoy the rich content offered by Today, while also simplifying their interaction with the platform’s account features.
THE PROBLEM
How can we adjust Today' digital platform to cater to its primary audience?
The existing design of Today’s digital recipe pages and account features posed challenges for users in terms of accessing detailed recipe information and navigating the account creation process.
Users struggled with finding specific recipe details quickly and efficiently due to the lack of a scannable table of contents. Additionally, the video pages lacked related links, making it difficult for users to discover more content relevant to their interests.
The majority audience for the Today Show is older users aged 45+ and because of this, an increase in clear scannability and readability is important.
The challenge was redesigning these elements to improve user engagement and accessibility, making navigating and interacting with the content easier.
How can we revise the design to enhance user engagement and accessibility on Today’s recipe and account pages?
Original Today' Food Front (Home Page)
MY PROCESS
To address these challenges, I implemented a three-step process for each redesign task.
1.
I conducted a thorough review of the existing recipe and account pages to identify pain points and areas needing improvement. This step helped pinpoint the issues with content accessibility and navigation that users were facing.
Review of Previous Designs & Branding
3.
After finalizing the designs, I prepared detailed specifications and assets for the development team, ensuring a smooth transition from design to implementation. I remained available to address any questions or adjustments needed during the development phase.
Dev Handoff
2.
Leveraging insights from user feedback and previous designs, I created wireframes to introduce a scannable table of contents, improve the clarity of recipe details, and enhance the account onboarding process. I worked iteratively, incorporating feedback to refine the design and ensure it aligned with user needs and project goals.
Designing & Iterating
CANONICAL VIDEO PAGES
How can we improve user discoverability through providing related links to recipe video pages?
Original Video Recipe Page Template
Context
When users watch the show, they want to be able to see the recipe which they were not able to so we have to explore how to add links to the recipe on the video page.
Project Goals
-
Showcase and provide direct links to recipes that are mentioned in the videos.
-
Add unique details to make the recipes stand out.
-
Include shop links to make it easier for users to be directed to the items mentioned in the video.
FOOD FRONT
In what ways can we better the platform' scannability and differentiate between recipe articles and food news pages?
TABLE OF CONTENTS
How can we improve usability on article pages with more then a few recipes?
ACCOUNT PROMOTIONAL PAGE
How can we drive user engagement through a new promotional page?
Context
It’s not intuitive which articles have recipes as an overview in the Food Front so how can we add details and icons to make it more obvious?
Project Goals
-
Create the current Food Front Template to make it easier for designers and developers to look for.
-
Design a way to distinguish the recipe articles clearly.
ACCOUNT ONBOARDING
What may a Today onboarding process look like?
REFLECTION
What were my main takeaways from this project?
The redesigned Today Show recipe and account pages successfully met the project’s primary goals of improving user engagement and accessibility. The new design not only made it easier for users to find and interact with content but also streamlined the account creation process, leading to a more satisfying user experience.
Recipe Article Page
Context
With articles that reference 5 or more recipes organization and quick links is needed.
Project Goals
For users to better navigate a recipe article, a clear table of contents on top could help them jump to specific recipes especially if it one with a large number of recipes.
Use branded rectangles to number and link to the different recipes.
Design Considerations
Add a clear title and bullet points to show number of recipes in the article.
Final Handoff
Provided a save button to let users come back to the recipe later.
Added underline for each recipe to make it clear the link is clickable unlike before.
Added a scroll within the call out box for articles over 5 recipes.
Lessons Learned:
Sign Up Promotional Overlays
Context
There is no current account page that lists all the features and asks you to sign in, there are just overlays.
Project Goals
Provide users with a clear page that displays the offers and perks they will receive when signing up for a Today account.
Implementing User-Centric Design
This project reinforced the importance of understanding user needs and integrating those insights into the design process to create more effective and engaging digital experiences.
Cross-Functional Collaboration
Collaborating closely with the development team during the handoff phase was crucial to ensuring that the final implementation matched the design vision, highlighting the importance of clear communication and documentation.
Iterative Design Process
Working in an iterative design process allowed for continuous improvement and refinement of the design, ensuring that the final product met both user expectations and project objectives.
Showcase through call out boxes with each recipe’ details and image.
Design Considerations
Switch the layout and add recipe details to provide a better overview.
Final Video Recipe Page With Two Links
Final Handoff
Due to the platform, the recipe details could not be provided under the links.
Calling out the links through ‘Mentioned in This Video’ made it clear and concise.
Stick to the original layout as much as you can to make it easier for developers.
Design Considerations
Include icons for recipe articles only.
Add the recipe details here instead to provide the user with a quick overview on the recipe they might want to check out.
Original Onboarding Template
Context
There is no current account page that lists all the features and asks you to sign in, there are just overlays.
Project Goals
Provide users with a clear page that displays the offers and perks they will receive when signing up for a Today account.
Onboarding Inspiration
Added a checkmark to emphasize multiple selection.
Design Considerations
Having the selected options be bordered can be more visually intuitive.
Final Handoff
Provided a save button to let users come back to the recipe later.
Added underline for each recipe to make it clear the link is clickable unlike before.
Added a scroll within the call out box for articles over 5 recipes.
Adding images to call out each of the features while also having easy log in buttons
Design Considerations
One page layout with the perks listed out with checkmarks to be read easily.
Final Handoff
Created a side-by-side layout for better scannability.
Added images and icons to create a better balance with the text.
-
NBC News has an account page that focuses on personalization through the articles you click on and are interested in.
-
Providing the benefits through clear taglines/copy and icons/images is the generic way to show a promotional page.
-
Competitors use blocks that ask for user email addresses to subscribe to a specific newsletter.
Competitive Analysis Key Takeaways
-
CNN, BBC, New York Times and People all have multiple newsletters that can be subscribed to as well as specific copy and ads for them.
-
After the onboarding of most of the competitors, there is a summary page of benefits and confirmation.
-
Other than interesting topics for CNN, personalization through onboarding has not been explored thoroughly.
