LANDING
PAGE
LANDING PAGE
duration
2 weeks
Project Type
Personal Project
my role
UX & UI Design
duration
1 week
Project Type
Personal Project
my role
UX & UI Design
OVERVIEW
OVERVIEW
ConvoSquare is a conceptual communication platform designed to bridge the gap between social networking and professional collaboration. My role was to design a high-impact landing page that effectively communicates this dual utility to potential users. The primary objective was to establish a strong brand presence through a modern visual identity, ensuring the website felt energetic and inviting while convincing visitors to sign up for a product that promises to streamline their digital conversations.
ConvoSquare is a conceptual communication platform designed to bridge the gap between social networking and professional collaboration. My role was to design a high-impact landing page that effectively communicates this dual utility to potential users. The primary objective was to establish a strong brand presence through a modern visual identity, ensuring the website felt energetic and inviting while convincing visitors to sign up for a product that promises to streamline their digital conversations.
CONCEPT & STRATEGY
CONCEPT & STRATEGY
Marketing a new communication tool is a unique challenge in a market saturated with distinct work apps like Slack and social apps like Discord. The landing page needed to visually persuade the user that ConvoSquare fits perfectly in the middle, versatile enough for a team meeting, yet casual enough for a group chat with friends.
Marketing a new communication tool is a unique challenge in a market saturated with distinct work apps like Slack and social apps like Discord. The landing page needed to visually persuade the user that ConvoSquare fits perfectly in the middle, versatile enough for a team meeting, yet casual enough for a group chat with friends.
To achieve this, an immersive dark mode strategy was adopted. By moving away from the stark white interfaces typical of corporate tools, the dark theme signals modernity and allows key visual elements specifically the green accents and product mockups to pop. This approach focuses the user's attention strictly on the value proposition and drives conversion through visuals rather than dense text.
To achieve this, an immersive dark mode strategy was adopted. By moving away from the stark white interfaces typical of corporate tools, the dark theme signals modernity and allows key visual elements specifically the green accents and product mockups to pop. This approach focuses the user's attention strictly on the value proposition and drives conversion through visuals rather than dense text.
VISUAL IDENTITY
VISUAL IDENTITY
The visual language of ConvoSquare was crafted to feel sleek and futuristic. I selected a Charcoal and Deep Slate to create a premium dark-mode environment that reduces eye strain, accented by Green to direct attention to calls-to-action and key features. For typography, Poppins was chosen for headings to provide a friendly, geometric geometry that feels approachable, while Roboto was selected for body text to ensure maximum legibility and clean structure across all devices.
The visual language of ConvoSquare was crafted to feel sleek and futuristic. I selected a Charcoal and Deep Slate to create a premium dark-mode environment that reduces eye strain, accented by Green to direct attention to calls-to-action and key features. For typography, Poppins was chosen for headings to provide a friendly, geometric geometry that feels approachable, while Roboto was selected for body text to ensure maximum legibility and clean structure across all devices.
VISUAL WALKTHROUGH
VISUAL
WALKTHROUGH
1. HERO SECTION
1. HERO SECTION
The Hero section was designed to capture attention immediately using a dynamic, layered composition. By overlapping the bold headline with circular user avatars and active chat bubbles, the design visually mimics the energy of a live conversation. This layout instantly establishes the platform's social nature the moment the page loads without requiring the user to read a paragraph.
The Hero section was designed to capture attention immediately using a dynamic, layered composition. By overlapping the bold headline with circular user avatars and active chat bubbles, the design visually mimics the energy of a live conversation. This layout instantly establishes the platform's social nature the moment the page loads without requiring the user to read a paragraph.
2. PRODUCT SECTION
2. PRODUCT SECTION
To bridge the gap between abstract marketing and actual utility, this section features a stylized dashboard mockup. Instead of using generic icons, a high-fidelity representation of the app’s interface was designed. This visualization serves a dual purpose: it adds depth and texture to the dark background while proving to the potential user that the tool is robust, modern, and ready for real-time interaction.
To bridge the gap between abstract marketing and actual utility, this section features a stylized dashboard mockup. Instead of using generic icons, a high-fidelity representation of the app’s interface was designed. This visualization serves a dual purpose: it adds depth and texture to the dark background while proving to the potential user that the tool is robust, modern, and ready for real-time interaction.
3. TARGET AUDIENCE SECTION
3. TARGET AUDIENCE SECTION
This section pivots the narrative to address a specific audience: professional teams. The design broadens the potential user base. This section utilizes clean grid layouts and feature checklists to communicate reliability and structure, reassuring business users that while the platform looks fun, it is powerful enough to handle serious collaboration.
This section pivots the narrative to address a specific audience: professional teams. The design broadens the potential user base. This section utilizes clean grid layouts and feature checklists to communicate reliability and structure, reassuring business users that while the platform looks fun, it is powerful enough to handle serious collaboration.
RESPONSIVENESS
RESPONSIVENESS
ConvoSquare was designed to be fully responsive, ensuring the immersive dark-mode aesthetic translates seamlessly to smaller screens.
ConvoSquare was designed to be fully responsive, ensuring the immersive dark-mode aesthetic translates seamlessly to smaller screens.
CONCLUSION & LEARNINGS
CONCLUSION
& LEARNINGS
The ConvoSquare project was an exercise in using pure visual design to create product value. It demonstrated that for conceptual or early-stage products, the brand identity is the product. By moving away from standard corporate aesthetics and embracing a bold, dark-mode identity. This project reinforced my understanding of how color psychology, typography, and layout can be leveraged not just to make things look good, but to persuade and convert users effectively.
The ConvoSquare project was an exercise in using pure visual design to create product value. It demonstrated that for conceptual or early-stage products, the brand identity is the product. By moving away from standard corporate aesthetics and embracing a bold, dark-mode identity. This project reinforced my understanding of how color psychology, typography, and layout can be leveraged not just to make things look good, but to persuade and convert users effectively.
Table Of Contents