ThoughtFilter
Designer for a B2B content marketing SaaS tool.
My Role
Product Designer – Interaction Design, UX Design, Visual Design, User Flows, User Research, and Prototyping
Timeline & Status
Q1 2024 Design Stage
V0 Complete
Team
Aryik Bhattacharya, SE Architect
Ayon Bhattacharya, PM
Carrie Pack, Marketing SME
Jessalyn Jones, Key Customer
Ayon Bhattacharya, PM
Carrie Pack, Marketing SME
Jessalyn Jones, Key Customer
Overview
Freelance copywriters often find themselves producing high volumes of content on uninspiring topics, diverting time from more meaningful projects.
In response to this disconnect, I led the design of Thoughtfilter. This tool streamlines content marketing workflows through advanced AI and optimized content editing techniques.
I executed the design process, from research to the development of final prototypes, and continued to iterate during development. I worked closely with a small crossfunctional team, including a product manager, a software engineer, and key users, to ensure the tool's success.
The Problem
Freelance copywriters aim to create engaging think pieces, but often spend most of their time on repetitive long tail articles about uninspiring topics.
Highlights
Enhanced workflow efficiency and content quality.
This tool not only addresses the critical pain points in content marketing, such as keyword optimization and efficient content reuse but also integrates seamlessly into the daily routines of content creators.
Input Form- This feature includes a form equipped with essential parameters, allowing users to quickly generate keywords and upload relevant research documents. It facilitates a seamless transition to generating your first draft without any friction.
Editing- AI-generated suggestions designed to help you refine your document more efficiently.
Filter History
Quickly locate old files that
need to be reworked
need to be reworked
Search History
Search previous content
by keywords and more
by keywords and more
Project history page– Easily access old content.
Filter and search– This feature includes a search and filter function on the project history page, enhancing usability. It's especially useful for content marketers who frequently need to find and refresh older content.
By designing Thoughtfilter, I increased the speed of content marketers writing a new article by 88% on average. The longer the article, the greater increase in time saved.
Research
An in-depth exploration into the challenges and workflows of content marketers.
In this study, I identified typical workflows and key issues. Direct feedback from users throughout the design process provided valuable insights.
Workflow Insights
• Content Creation: our target users typically utilize a systematic approach starting from research notes, followed by building structured outlines.
• Content Reuse: content marketers are constantly asked to refresh old content to ensure quality and relevance.
• AI Utilization: There is a notable lack of AI tools that effectively integrate keyword optimization without compromising quality.
• Content Reuse: content marketers are constantly asked to refresh old content to ensure quality and relevance.
• AI Utilization: There is a notable lack of AI tools that effectively integrate keyword optimization without compromising quality.
Main Insight
Content marketers, especially freelancers, face immense pressure to deliver a high volume of quality content.
Other Key Challenges
Context Switching: Frequently shifting between different tasks.
SEO and Keyword Optimization: users must increase keyword utilization while avoiding stuffing, and keeping up with Google's algorithm.
Time Management: common tasks such as transforming ideas into polished content and refreshing stale content is time-consuming.
Ideation
Progressing towards a powerful solution through iterative design.
Before diving into the more detailed designs, I started with some quick iterations with hand-drawn ideas, and moved onto low-fidelity wireframes in Figma.
Wireframes
Iterations and Deliverables
Design Files
Utilized Figma and FigJam
to create artifacts
to create artifacts
Engagement
Gathered continuous feedback
from users
from users
Collaborative Development
Planned a series of meetings with
the developer to ensure quality
the developer to ensure quality
Initial Directions
Ready. Set. Brainstorm!
At one point I explored a playful style, containing more saturated colors and sketchy graphics. I left this style behind in favor of a more professional one, so as to avoid distracting design that would impede the use of the tool itself.
Honing a design language– I refined the design language of the application through extensive style iterations, focusing on crafting a warm, inviting, and friendly aesthetic that aligns with our branding discussions.
I finally landed on this color that is reminiscent of antique paper or paper in classic books, which aligns with the sense of warmth and knowledge I wanted to bring to the product.
Testing + Improvements
Revise, Revise, Revise.
To create the optimal product, it's crucial to actively listen to, and prioritize user feedback. Throughout the design process, I made strategic updates based on this input to maximize the product's impact. Below are some key improvements made during these iterations.
Core Navigation
Before: The Navigation was hidden away.
After: I revised the core navigation paradigm to feel more familiar and stable throughout the app.
Project History Page Development
Before: The application had not addressed the common user habit of switching between many different articles. Instead, it put versioning front and center.
After: A project/article list is now front and center on the home screen. Versioning will be handled elsewhere.
Final Design
I was pleased with the goals I'd accomplished.
The final design of the tool successfully addressed the critical challenges highlighted during the research phase, offering tailored solutions that enhance both efficiency and user satisfaction.
Major screens
Comprehensive AI Tool– Thoughtfilter assists with keyword selection.
The AI tool also optimizes content without keyword stuffing, and provides data and recommendations for SEO enhancements.
The AI suggestions speed up editing as well.
I took inspiration from great writing tools like Notion, Ghost, Obsidian, and iA Writer.
Simplified keyword optimization process and document generation all on one screen to minimize context switching and improve efficiency.
The tool fits into users' existing workflow; research notes can be uploaded as input and it's easy to refresh old content.
Project History clearly view past projects, filter, and search for them.
Empty state and welcome page for new users.
Colors
Reflections
The only real mistake is the one from which we learn nothing.
Take-aways
- Collaborative Synergy: Reflecting on the continuous back-and-forth with the development team, I've come to appreciate how vital it is to sync design thinking with technical possibilities from the get-go. This collaboration wasn't just about making things easier; it was crucial in order to bring the design vision to life in a practical, functional way.
- Deep Dives into User Needs: The extensive user interviews deepened my understanding of what content marketers truly need, guiding the tool’s design from the start to better suit their daily challenges. It was a reminder of how pivotal user research and domain knowledge is to crafting solutions that genuinely resonate.
- Evolving with Feedback: The journey from initial concept to final design was filled with pivotal decisions, especially about aesthetics and user interface simplicity. Adapting our approach based on user feedback really highlighted the fluid nature of design, where you start with a design language that evolves, sometimes drastically, to meet real-world needs and preferences.
This is just the tip of the iceberg. Feel free to check out some of my other work!
