theSkimm
/
Product Design
/
Web
/
UI
Newsletter Signup Flow
Spread awareness and increase newsletter subscription
THE TEAM & PROJECT LENGTH /
Lead Designer 👋, Senior Product Manager, Senior Front-End Engineer, and Creative Designer. 2 weeks.
BACKGROUND /
Prior to this project, theSkimm—known for its Daily Skimm—had other newsletters that specialized in money, wellness, and lifestyle. However, the number of subscribers per vertical was significantly lower than of the Daily Skimm.
Business goal /
increase in newsletter sign-ups by 30% per vertical
USER assumptions /
Promotion for each of the newsletters has ultimately led to a fragmented user journey causing few subscriptions.
If there was a page destination that showcased all of the newsletters, there would be more subscribers for each of the verticals.
COURSE OF ACTION (PRE-DESIGN) /
User journey mapping
Competitive analysis
Creative design collaboration
user journey /
theSkimm's main website lacked a central hub to showcase its diverse newsletter offerings available for subscription.
On theskimm.com, the only way to sign-up for the different newsletters is through each “vertical” landing page:
/news: Daily Skimm signup
/money: Skimm Money newsletter signup
/wellness: Skimm Well newsletter signup
/parenting: Skimm Parenting newsletter signup
Additionally, growth campaigns had also promoted sign-up through individual campaigns, rather than providing the opportunity for users to subscribe to other verticals.
competitive analysis /
Given the quick timeline, I relied heavily on existing subscription pages and pull UI features that theSkimm can replicate, i.e. selectable cards with newsletter info, meta data, cadence, and a preview link; an anchored bar with an email field; and a confirmation message.
branding & delightful interaction /
theSkimm had an extensive illustration library that I truly believed could be utilized to bring out theSkimm's personality — particularly the mail icons which could be used as a counter.
tactics /
Subscription page & all interactions
Navigation menu item
anchoreD bar & counter /
At first, the creative designer and I planned to use the illustrations as a counter. However, as more newsletters were scheduled to launch, this approach became unsustainable. We decided to switch to a simpler counter that was easier to implement and maintain.
confirmation page /
From conducting user interviews for the SkimmU seminar events, I learned how important the confirmation page is. At this page, I pushed for a transition screen that would confirms their subscription, as well as when to expect the issue.
Then to promote recirculation, I also suggested showing articles at the bottom so the user can explore more from theSkimm.
primary nav
Since the ultimate goal was to drive traffic to this page, it made the most sense to promote it on the navigation bar.
user testing / primary nav
The real challenge was crafting concise button language that clearly communicated 'free newsletter subscription' while fitting on mobile. To solve this, I conducted a quick test to gauge users' reactions to four options. The winning choice was 'mail icon + Subscribe.'
The test was invaluable, especially since there were internal debates about whether the icon was necessary. User feedback confirmed that the icon effectively conveyed the message of a free email signup.
results & final thoughts /
