Jones for Quitters
Year: 2025
Role: UI freelance designer for Mango Co/SFL Creative Co
Type: Brand design, web design
Toolkit: Figma, Adobe CC
Timeline: 2‑week sprint
Devices: Desktop + Mobile
Background: Jones for Quitters helps millions of people quit nicotine through approachable education and nicotine replacement therapy (NRT) products. Their journal plays a crucial role in building trust and guiding readers toward next steps. However, analytics showed high readership but low engagement. Users finished articles without clicking to explore products or download the app.
Task: Encourage blog readers to move from awareness to action by improving the visibility, timing, and clarity of calls-to-action (CTAs) within long-form content — without disrupting the article’s editorial flow.
Solution: I redesigned the blog template to introduce strategically placed CTAs that align with user intent. A mid-scroll banner (“Join over 22M quitters”) provides an inviting entry point for engagement, while a new end-of-article CTA (“More heart. Less harm.”) creates a natural transition to product pages. Adjusted spacing, hierarchy, and visual rhythm to enhance readability and conversion without compromising tone or trust.
My contribution:
UX and visual redesign of blog article template (desktop + mobile)
Figma wireframes and high-fidelity mockups
Developer handoff
Blog before redesign01. Before the redesign
The original blog layout featured a single low-contrast CTA at the bottom of lengthy articles. While the content performed well, users often reached the end without seeing or engaging with conversion prompts.
Guiding readers from insight to action
Problem:
Readers were engaging with Jones’ educational content but we wanted them to take action. The single end-of-article CTA was buried below long-form text, causing users to exit without exploring products or downloading the app.
North‑star goal:
Increase engagement and conversion by surfacing relevant CTAs within the reading experience — guiding users toward product pages organically, without breaking editorial flow or trust.
02. Wireframes
02. Design decisions:
Used tone-matching color and typography to help CTAs feel like a natural part of the article rather than ads.
Designed mobile-first CTA variants to preserve hierarchy and engagement across devices.
Added trust signals at the top of the article—author and medical reviewer credits, estimated read time, and clear publication date—to increase transparency and authority for health-related content.
03. Impact:
Increased visibility and engagement with CTAs through improved placement and hierarchy.
Boosted trust and perceived authority by adding author and medical reviewer credits, publication date, and read-time indicators at the top of each article.
Improved reader retention and scroll depth, showing stronger connection between educational content and product exploration.
Created a more cohesive reading experience that balanced health education with actionable next steps.
04. Final blog design
Desktop view
Mobile view with collapsing accordion 05. Reflections
This project reinforced how thoughtful UX adjustments—timing, tone, and trust—can transform passive reading into meaningful engagement. By blending educational content with transparent, well-placed CTAs, Jones now leads readers toward the next step in their quit journey with empathy and clarity.