THE CHALLENGE

Click2.ai is an AI-driven tool for enhancing engagement across multiple social media platforms like LinkedIn, Twitter, and Facebook. It utilizes generative AI to create personalized, impactful comments and tailored interactions, helping users move beyond generic responses to foster meaningful digital connections.

The client found it challenging to track how users are interacting with Click2.ai. They were particularly focused on understanding how users were engaging with the tool—what their priorities were, what actions they took first (e.g., auto-generated vs. custom options), and how intuitively they navigated core features. While settings adjustments are important, their main goal is to gain a comprehensive view of how users interact with the primary features to achieve their goals, so we can make their experience smoother and more effective.

My Approach

My objective as a Lead Product Designer was to create a solution that empowers users by making configuration panel simple and accessible. In other words, I wanted Click2.ai to feel effortless for users, delivering real value in a way that aligns with their goals.

This project is designed to empower job seekers and business owners to start meaningful conversations using cutting-edge predictive artificial intelligence. My approach emphasizes a clean and adaptable design that allows users to focus on delivering transformative AI-driven tools while ensuring a seamless experience. For me, it is critical to deliver a product that combines robust functionality with sleek aesthetics, creating the perfect foundation for crafting AI solutions that optimize audience targeting, enhance campaign performance, and increase user engagement.

User Interviews

A total of five (5) interviews were conducted to understand the participants'

• Professional background and personal needs

• Current use of AI

• Challenges they face when using AI

• Use of AI in content creation

• Personalization of AI settings

Sketches

Affinity Map

Click the image below to see the complete affinity map findings:

From the user interviews, my team and I developed an affinity map that highlighted key themes among interviewees:

• "I tailor my communication tone to the situation"

• "I use AI tools for editing, not full content creation"

• "I use LinkedIn for professional visibility"

• "I face challenges with resume tailoring"

• "I see AI as helpful but limited"

• "I don't rely on social media for job searching"

• "I would like better job search tool customization"

Persona

Heuristic Evaluation & Audit

Click [here] or the image below to read the full evaluation:

Top 3 Heuristics in Need of Attention Across All Flows:

Error Prevention and Recovery:

• Lack of autosave or save confirmation mechanisms caused significant usability challenges (e.g., lost data on refresh).

• Error messages were either unclear or entirely missing, leaving users unaware of what went wrong or how to recover.

Visibility of System Status:

• Progress indicators were either absent or insufficient during critical user interactions.

• Users were left uncertain about system activity or whether their inputs were being processed.

Consistency and Standards:

• Inconsistent iconography and ambiguous menu naming conventions created cognitive load.

• Buttons lacked clear affordances to distinguish selected from unselected states.

Navigation and Feedback:

• Poorly designed navigation, especially in the Chrome Settings flow, with nested menus and missing “next” buttons, made task completion cumbersome.

• Inadequate feedback when actions were completed or during long processing times led to confusion and frustration.

Diary Study

Participants reported significant technical problems:

• Loading issues: Nicole experienced repeated failures with the tool not loading or responding, even after refreshing.

• Blank screens: Madeline encountered blank screens when trying to use tailoring features.

• Weird formatting: Dan highlighted issues with AI-generated posts, describing them as unprofessional and unusable.

Perceived Value vs. Execution:

• Unclear purpose: Matthew mentioned using Click2.ai reluctantly, perceiving LinkedIn content creation as a "game" he didn’t want to play but felt forced to engage in.

• Unprofessional output: Dan's example of an AI-generated response to networking was riddled with incoherent text, making it unsuitable for professional use.

High Friction in User Experience:

• Participants had to modify AI outputs heavily, undermining the time-saving promise.

• Customization options were insufficient or difficult to access due to functional failures.

Limited Success in Achieving Goals:

• Networking and engagement metrics showed no significant improvement.

• No participant reported meaningful connections or job leads stemming from the tool’s use.

Identifying Unique Challenges

The current version of the Chrome Extension caused users to become overwhelmed with the amount of information presented to them. Navigation was not intuitive or clear. For example, there was a section about Predesigned Characters (e.g., Friendly Alex, Curious Casey). However, the question became:

How does a friendly person sound like? or a curious or reliable person?

A better way to communicate to users how the generated text would sound was needed. A convoluted user interface with unclear explanations would turn people away from using the product, so the layout had to be revamped.

A MoSCoW analysis was conducted with three (3) How Might We statements:

Problem Statement

“Sophie needs a clear, efficient way to create authentic LinkedIn content that fits each situation. Confusing onboarding and rigid AI tools slow her down, making it harder to reflect her personal style. She values customization, intuitive features, and tools that simplify tasks like tailoring resumes and engaging with her network without adding complexity.”

Resolving Complex Problems

Building out this prototype was challenging due to the level of detail required to make the experience as seamless as possible while maintaining its core functionality. The hardest part was developing the Predesigned Characters (PC) card system and Sample Text Generator. In my research, I hadn't seen anyone develop such functionality before, so the pressure was on to create a feature that was intuitive to use. Even though my sketches showed the card layout in rows, I concluded that the best use of space would be to wrap the cards in a carousel. As each PC changed, the sample text reflecting the tone, writing style, and dialect needed to change simultaneously. Through teamwork, my team and I were able to get this feature developed.

The next challenge was creating multiple button options, but users could only select one. I realized the interaction complexity of selecting one would be immense, especially on such a tight deadline. So, I decided to use radio buttons as a solution since that would communicate to users they could only have one option.

By incorporating intuitive navigation and well-organized layouts, I wanted to present intricate data and AI-driven solutions in a way that is accessible to both technical and non-technical users. This focus on clarity and usability ensured that my redesign would resonate with a broad audience.

Detailed Pages and Features

• Home: A bold and engaging introduction to your platform, showcasing customizable features, crisp typography, iOS components with interactive elements, and sleek visuals.

• Features: Innovative Predesigned Character carousel that includes a Sample Text Generator, presented in a clear and user-friendly format highlighting the power of the predictive tool.

• Configuration Panel: A space for setting up dialects, tone, writing style, and more, making content management effortless.

• Tooltips: A simple yet effective method for helping new and returning users select the best option for their goal, fostering ease of use.

• Profile Switching: Flexible profile switching options to customize between job seeker and business owner settings, with resources or custom content tailored to users’ needs.

User-Centric Design

At its core, this redesign is built with the user in mind. This refreshed user-centric design ensures that users can navigate the extension effortlessly, whether they are job seekers, small business owners, or enterprise-level marketers. From the Quick Settings page that highlights key features to the Professional Settings that offer valuable customization, I aimed to design and deliver a seamless and engaging experience at every touchpoint.

Task Flow

Click the image below to read the entire task flow.

Accessibility and Optimization

Click2.ai is fully A11y optimized, ensuring the platform is accessible to all users, including those with disabilities. Features like keyboard navigation, screen reader compatibility, and high-contrast options were implemented to make the redesign inclusive and user-friendly. The redesign also includes performance optimizations to ensure fast load times and high search engine rankings, helping the client attract and retain users in a competitive landscape.

High-fidelity (Hi-Fi) Wireframes

Click the image below to open HiFi Prototype:

CONCLUSION

Click2.ai is more than just a social media AI template; it’s a comprehensive tool designed to elevate your online presence regardless of the platform. With my focus on modern design, user-centric functionality, and intuitive navigation, this project with Click2.ai allowed me to expand my leadership, UX research, and UI design skills, leading to a solution that drove meaningful results. The heuristic evaluation gave the team critical direction to inform an exciting and sleek UI refresh design that met the client's needs. As such, the user flow for the system was streamlined and made more efficient.