NBCU x Apple News: Poll Redesign
In preparation for our annual business review with NBCU, our team recommended enhancements to their advertising suite, particularly by addressing ad products like the Poll Unit. Following our successful update to the Tap-to-Map units in 2021, we identified the Poll Unit as the next candidate for a refresh due to its fully templatized structure. This initiative aimed to on the front end: modernize the Poll Unit, to increase its appeal and effectiveness within the ad suite, and on the back end: create better structure and organization for designers/clients updating the template with their content. By doing so, we boosted user engagement and made the product more attractive for advertisers. This refreshed approach aligned with our goal to optimize NBCU’s advertising offerings and was a key point in our annual business review.
Client
NBCU Apple News
Role
Design & Production
Software
Celtra CE, Photoshop, Figma
Year
2024
Original
In-Feed state
Expanded state
Redesign
In-Feed state
Expanded state
User Experience
Submission Buttons
All pages now consistently have a button to advance. (Formerly, the Select One questions auto-advanced which was not clear.)
All buttons now have an Inactive and Active state. (Formerly, you can advance the poll all the way through without making any selections leading to incomplete surveys.)
All buttons moved from the right to the left side for visual alignment, but also so users don’t have to unnecessarily move their finger side to side.
Answer Selection
Select One questions now have a radio button design to represent a single choice.
Select All questions now use the checkbox design to represent multiple choice.
Other
Progress bar has been streamlined.
More Info has been converted into underlined text button, now leads to a full page take over using a lightbox design, formerly to pull-up tab.
Expanded state is now full screen to continue in-app feeling within Apple News, formerly pop-up. This also provides much more vertical space between elements, less crowding.
Design
In Feed
Gradient + borderline removed in favor of solid blue color, had hoped to do a slightly brighter blue but found the accessibility rating of it was not suitable
CTA fully rounded with arrow added, made white to differentiate from rest of CTAs in the product
“Matters!” underlined to denote significance of user contribution + encourage voluntary participation
Expanded
Divided page with color blocking to create separate sections for questions and answers, also to enable usage of dark on light text for increased text legibility.
Button opacity lowered 50% when no answer is selected to denote inactive state
Buttons fully rounded
Selection buttons made white with subtle dropshadows
All previous red changed to magenta, more harmonious color with the blue
CE Backend
Content
Changed the template to be able to accommodate the most extreme use case.
Questions: 4 lines of text, vertically centered
Answers: Added a 6th answer option, added a 2nd line to each answer text
Technical
Single Answer Choice: Implemented interaction blockers to prevent users from clicking off of their selections, can only be changed by tapping a different answer. The NEXT blocker is also tied to this function
Multiple Answer Choice: Required a different logic as you must be able to select/deselect the same answer. Applied Complete/Incomplete check answer functions to each question, these are tied to NEXT blockers as well to prevent advancement without selecting an answer.
File Structure
We previously had 2 separate templates for single answer choice and multiple answer choice, both options are now housed on the same page, whichever is not used can be deleted.
