Web Application

Dashboard Re-Design For an AI Platform

Black and white graphic of stylized letter B with grouped circles forming the letter
Screenshot of Engage AI platform's monitor tab displaying a list of prospects, mostly named Jack Stafford, with LinkedIn icons and basic details on a computer tablet.
Get a design like this!

Introduction

The redesign of the Engage AI platform aimed to modernize and enhance user experience, making it more intuitive and user-friendly. This project involved a complete overhaul of the platform’s design, focusing on modern aesthetics and usability to better meet user needs. The redesign encompassed various components, including the Dashboard, Monitor, Lists, Prospects, and Posts sections, each meticulously crafted to improve functionality and navigation.

Client Name and Industry:
Client: Jason, Owner of Engage AI
Industry: Technology and AI-driven Marketing Solutions

A digital advertisement for Engage AI featuring customer reviews praising its use for automating business processes and generating leads on LinkedIn. The ad highlights over 100,000 users and CRM integration, with a blue background and icons at the bottom.

Market Analysis

Infographic showing the AI in Social Media Market from 2019 to 2029 with market size in USD billion, demonstrating growth from USD 2.10 billion in 2024 to USD 7.25 billion in 2029, and highlighting major players like Google, Microsoft, AWS, Adobe, and Meta.
World map showing regions with high, medium, and low growth rates of artificial intelligence in the social media market, color-coded with dark blue for high, medium blue for medium, and light blue for low, with a source attribution to Mordor Intelligence.

The market for AI-powered tools in social media engagement is rapidly growing, driven by the increasing reliance on platforms like LinkedIn for B2B networking, lead generation, and personal branding. Companies are adopting AI to streamline engagement processes, enhance personalization, and improve productivity.

Key Drivers

  1. Rising Demand for Personalization: AI tools that enable tailored interactions and authentic communication are highly sought after.

  2. Growth of LinkedIn: As the leading B2B platform, LinkedIn's popularity fuels demand for tools designed to optimize user engagement.

  3. Focus on SMBs: Small and medium businesses (SMBs) are adopting cost-effective AI solutions to compete with larger enterprises.

  4. Productivity and Time Efficiency: Professionals are leveraging AI to automate repetitive tasks and focus on strategic goals.

Industry Trends

  • AI Integration in Engagement: Tools that generate AI-driven comments, content, and analytics are gaining traction.

  • Shift to Authentic Communication: Users prioritize genuine, meaningful interactions over generic automation.

  • Global Expansion: Emerging markets show potential for growth as LinkedIn adoption increases worldwide.

Challenges

  • Market Saturation: The industry is becoming competitive, with overlapping features across tools.

  • User Trust in Automation: Overuse of AI risks perceptions of inauthenticity.

Data Privacy Concerns: Compliance with privacy regulations remains critical for tools handling user data.

User Persona

A professional profile of Ethan Morgan, a 42-year-old married founder from Austin, Texas. The profile includes a photo of Ethan, his age, occupation, location, personality traits, a quote about building meaningful relationships, his scenario, goals, frustrations, and tech affinity, with information about his proficiency with platforms like LinkedIn, HubSpot, and CRM.
Profile overview of Priya Kapoor, a 37-year-old married co-founder from Mumbai, India. The image features her photo on the left with details about her personality traits, professional scenario, goals, frustrations, and tech affinity on the right, including quotes and descriptive text.

The User Personas section provides a deep dive into the key user profiles Engage AI is designed to serve. By understanding the motivations, challenges, and goals of these individuals, this section showcases how Engage AI addresses their unique needs and empowers them to achieve success.

Empathy map

A diagram with a central icon representing a person, connected to four sections labeled 'What do they Think?', 'What do they Do?', 'How do they Feel?', and 'What do they Say?'. Each section contains questions and phrases about user insights and actions, with color-coded responses in purple, red, blue, and green.

Problem

Comparison of two project management dashboards for Engage AI application. The top screenshot shows a 'Lists' tab with prospect details including ID, name, and posting days. The bottom screenshot displays a 'Prospects' tab with prospect information, contact dates, engagement counts, and LinkedIn profile links, along with a sidebar featuring options like Dashboard, Monitor, Customize AI, Hashtag, and support links.

The old Engage AI dashboard suffered from significant usability and design issues that hindered user experience. It was not user-friendly, with unintuitive navigation and a cluttered interface that overwhelmed users. Poor readability due to inconsistent fonts, small text sizes, and low contrast further complicated interactions, while the outdated and unattractive UI lacked modern design principles, such as clear visual hierarchy and engaging aesthetics.

Screenshots of a social media management platform called Engage AI, showing the Dashboard with posts, prospects, and post details, and a Settings page for adding voice tones with descriptions for Friendly, Funny, Disagree, and Question.

Solution

Screenshot of LinkedIn outreach or sales automation software dashboard showing a list of prospects, engagement metrics, and LinkedIn profiles, with a sidebar menu on the left for navigation.

In redesigning Engage AI, I collaborated closely with the founder and CEO, Mr. Jason Tan, to truly understand the company's vision and ensure the platform's evolution aligned with its strategic goals. Through multiple calls and interviews, we explored the pain points of the current interface, the core needs of Engage AI users, and the features and design elements necessary to make the tool more efficient and user-centric. These discussions were invaluable, as they provided direct insights from the leadership and reflected their commitment to empowering B2B SMB founders.

As part of the research, I analyzed user feedback and gathered opinions to identify the challenges users faced in their daily workflows. From this process, I noticed a shared desire for a cleaner, more intuitive experience that allowed users to navigate the platform effortlessly while leveraging AI-powered tools to enhance sales pipelines and communication.

A key focus of the redesign was addressing the needs of both “free and premium users”. Inspired by best practices in tools like Canva, we implemented a "crown" icon to mark premium-only features, motivating free users to upgrade. This subtle yet effective design element encourages users to explore the platform's full potential by showcasing what they could access with a premium subscription. This balance between providing value for free users while enticing them to upgrade was critical in aligning with Engage AI's business model.

One of the references I recommended was “Tweethunter”, a popular tool for managing and automating Twitter engagement. Tweethunter's sleek, modern interface and features like automated scheduling, evergreen tweet management, and performance analytics inspired the redesign approach for Engage AI. The layout of Tweethunter, as shown in the provided image, emphasizes clarity, actionable insights, and easy customization—principles I integrated into Engage AI’s new design.

Sitemap

Flowchart with a top box labeled Login/Signup connected to five blue boxes: Dashboard, Monitor, Customize AI, Hashtag, and Integrations. The Monitor box has three sub-items: Lists, Prospects, and Posts. The Customize AI box has two sub-items: Templates and Add template.

Moodboard

Screenshot of a computer screen displaying multiple project management and application dashboards with various menus, lists, and data visualizations.

For this project, the moodboard showcases modern, clean, and professional design examples that align with the goals of the Engage AI platform. It provides inspiration for creating an intuitive user interface that balances functionality with aesthetics. The selected examples emphasize structured layouts, consistent color schemes, and engaging interactive components, all of which guide the redesign to meet the expectations of users.

Wireframes

Screenshot of Engage AI platform dashboard with options for Prospects and Posts, showing a list of targeted prospects for relationship building, with various toggles and data columns.
Screenshot of the Engage AI platform showing the dashboard with options for prospects and posts, and a list of prospect groups with engagement metrics.

The wireframes for the redesigned Engage AI platform were created with a focus on user-centric design, addressing the pain points of the previous interface while introducing a more streamlined and modern approach. It's worth noting that the old sidebar design was incorporated purely for reference during the wireframing process, allowing for consistency in navigation structure while leaving room for aesthetic improvements in the final design.

Screenshot of Engage AI platform dashboard showing menu on the left with options like Dashboard, Monitor, Customize AI, Hashtag, Integrations, Help & Strategy Hub, Contact Us, Feedback, and social media icons. The main section displays tabs for Prospects and Posts, with three post cards showing options for viewing and engaging.

Style Guide

A user interface design with sections for colors, typography, buttons, components, and spacing. The colors section shows primary, black, white, black shades, and stats colors. The typography section features a typography style called Poppins with sample text. The buttons section displays various button styles including default, secondary, main + icon, secondary + icon, and disabled. The components section includes a green card with user information, search bar, and a new insight card. The spacing section explains a soft grid with steps of 4 pixels, illustrating spacing options from 4px to 80px.

The style guide for the Engage AI redesign establishes a modern and cohesive visual identity. 

Colors: include a primary palette of blue, black, and white for clarity, with gray shades for subtle differentiation. State colors like green (success), orange (warning), and red (error) provide intuitive user feedback. 

Typography: uses the Poppins font for its clean, modern feel, with a structured hierarchy for page titles, field text, and placeholders to enhance readability and organization.

Buttons: are designed for clarity, with main, secondary, and icon-based variations. Premium features are highlighted with a crown icon, encouraging upgrades subtly, while inactive buttons clearly indicate unavailable actions.

Components: prioritize usability, with clean layouts for cards and labels, ensuring information is accessible and organized. 

Spacing: follows a 4px grid for alignment and scalability, creating a balanced, polished design.

High-fidelity Design

Free Account

Screenshot of a dashboard from Engage AI showing a list of prospects with names, LinkedIn profiles, list names, and touchpoints made. The left sidebar includes options like Dashboard, Monitor, Customize AI, Hashtag, Integrations, and links for Help, Contact, Feedback, and social media icons.
Screenshot of a digital dashboard called 'Engage AI' showing a monitor page with prospects and posts, featuring profile photos, names, dates, and options to view or engage with posts. The left sidebar has navigation options like Dashboard, Monitor, Customize AI, Hashtag, Integrations, and links for Help & Strategy Hub, Contact Us, Feedback, and social media icons.
Screenshot of a web app interface titled 'Customize AI' with options to add labels and tone for AI responses, featuring blue and white design, a sidebar menu, and a 'Free Plan Limit' notification.

The High-Fidelity Design for the Free Plan Account balances functionality with a streamlined user experience tailored for entry-level users while subtly encouraging upgrades. The design showcases core features like creating and managing lists, prospects, and posts, with clear, intuitive navigation through the sidebar. 

The interface incorporates crown icons, drawing inspiration from platforms like Canva, to identify premium features. This serves as a subtle yet effective nudge for users to explore advanced options by upgrading their accounts. Key restrictions, such as limiting the number of prospects or lists for free users, are transparently communicated, ensuring clarity without hindering usability.

The color scheme and typography maintain consistency, enhancing readability and visual hierarchy. Call-to-action buttons like "Upgrade to Pro" are strategically placed, using prominent colors to attract attention without disrupting the user flow. The layout focuses on simplicity, ensuring new users can easily navigate and interact with the platform while exploring its potential. This design empowers users to engage with the platform's core features while fostering a sense of growth and possibility through premium upgrades.

Premium Account

Screenshot of a web application dashboard titled 'Monitor' showing a list of prospects with their LinkedIn profiles, lists, and the number of touchpoints made, along with user profile picture and navigation menu on the left.
Screenshot of Engage AI dashboard showing monitor section with posts from prospect Jack Stafford, dated March 22, 2024. The dashboard has a blue side menu with options including Dashboard, Monitor, Customize AI, Hashtag, Integrations, Help & Strategy Hub, Contact Us, Feedback, and social media icons. The main area displays prospects' posts with options to view, engage, filter, and sort, along with pagination at the bottom.
Screenshot of an AI customization interface on a web app named Engage AI. The interface features a blue sidebar with menu options, and a main section for customizing AI responses with labeled tone settings for "Friendly" and "Question". There are options to save individual settings or all at once, and a prompt to add templates with a plus sign.

The Premium Plan for Engage AI offers a comprehensive set of features designed to cater to users with advanced needs. This plan is perfect for professionals and businesses aiming to scale their operations and enhance their engagement strategies.

One of the standout features of the Premium Plan is the ability to import leads directly into the platform. This streamlines the process of adding prospects, saving users valuable time and effort. Additionally, premium users can utilize the Check Updates feature to stay informed about the latest activities and changes in their lists, ensuring their strategies remain up-to-date and effective.

Premium users also benefit from the ability to upload more than 10 prospects, removing the limitations faced by free users. This allows businesses to manage larger campaigns and expand their reach. Moreover, the plan provides access to more tones in the Customize AI page, enabling users to personalize AI-generated content to match their brand’s voice and tone with greater precision.

Lastly, the Premium Plan includes the ability to create unlimited lists, offering unparalleled flexibility in organizing and managing prospects. This feature is particularly useful for users handling multiple campaigns or diverse client requirements.

Live Preview

Impacts and Results

The redesign significantly enhanced user engagement and satisfaction. The addition of features like the ability to create unlimited lists, upload more than 10 prospects, and customize tones empowered premium users to make better use of the platform. For free users, the clear distinction of locked premium features, coupled with motivational elements like the crown icon, encouraged upgrades.

Metrics from usability testing revealed that premium sign-ups increased by 25%, and time spent on the platform grew by 40% post-implementation. Users also praised the streamlined process of creating templates with labels, which saved them valuable time and effort. Overall, the design successfully balanced user needs with business goals, driving growth and user retention.

Future Recommendations

Based on user feedback and the current market trends, there are several areas for future improvement. Introducing AI-powered tone suggestions could enhance the tone/template section, allowing users to create more effective templates effortlessly. Additionally, incorporating analytics for both free and premium users would enable them to track the performance of their lists and engagement efforts.

Gamification elements, such as rewarding users for hitting engagement milestones, could further motivate free users and make the platform more interactive. Lastly, considering the growing demand for mobile accessibility, developing a mobile-responsive version or standalone app would greatly benefit the user base and expand the platform's reach. These recommendations aim to keep the platform innovative and user-focused.

“Amine have done a great job in very short period of time. All my preferences and ideas were put together in perfect way and beautiful website.”

Kateryna Sierova - Photographer

Woman taking a mirror selfie in a room with beige drawers and curtains, wearing a green polka dot dress.
A young man with short dark hair smiling in front of a computer monitor, speaking into a blue and black microphone.

“I am thrilled to share my experience working with an outstanding web designer Amine From the moment I engaged their services, I knew I was in capable hands. Their expertise in web design is unparalleled, and I could not be more pleased with the results.”

Sheikh Adiat - SMMA Agency

“Absolute pleasure working with Amine. Great communication, a driven developer and excellent service delivered consistently.”

Joshua Romao - Agency Owner

Green background with large dark green letters 'JR' in the center.
Digital tablet showing Engage AI platform with Prospect monitor, list of prospects including names, LinkedIn icons, profile photos, and contact info; blue sidebar menu with options like Dashboard, Customization AI, Hashtag, Integrations; options for importing leads, checking updates, and creating new prospects.

CONTACT US

CONTACT US

Have a design project in mind? Send me a message, and I’d be thrilled to discuss it with you! I’m excited about new challenges and look forward to connecting!

Get a design like this!