AI Chat application

Prasanna Sridharan

UX Designer
Product Designer
UI Designer
Figma

1. Introduction

1.1. Project Overview
The AI Chat Application aims to provide users with an intelligent conversational agent that assists with various tasks, offers companionship, and enhances user productivity through natural language processing.
1.2. Objectives
To create an intuitive and engaging chat interface.
To personalise user interactions based on preferences and behaviour.
To ensure privacy and security of user data.
To support both text and voice interactions.

2. User Research

2.1. Target Audience
Young professionals seeking productivity tools.
Individuals looking for personal assistants.
Users needing mental health support and companionship.
2.2. User Interviews
Summarise key findings from user interviews:
Common tasks users want to perform.
Pain points with existing chat applications.
Features users find most valuable.

3. Personas

Persona 1: Sarah the Busy Professional
Age: 28
Occupation: Marketing Manager
Goals: Manage her schedule efficiently, set reminders, get quick answers to questions.
Pain Points: Difficulty keeping track of meetings and deadlines, too many apps for different tasks.
Persona 2: John the Tech Enthusiast
Age: 22
Occupation: Student
Goals: Explore new technologies, get personalised recommendations, casual conversation.
Pain Points: Chatbots with limited conversation depth, lack of personalization.

4. Wireframes

User journey: Initiating the chart
Splash screen : User opens the application “Genchat” and sees the splash screen consists of a welcome message and the "Get started” button.
Loader screen: After clicking on the button in the splash screen the user waits for the application to be loaded completely.
Chat landing screen: Here the user sees the suggestive prompts, a text box to start the chat, also a hamburger menu which would consist of accounts and settings(Not covered as a journey). Finally the user would also be able to attach the file and ask any questions.
Chat response screen: After the user has asked the AI to “create a workout plan”. Now the AI would start generating the answer as a response.

5. Visual design and principles

Visual Aesthetics
Colour Scheme: The UI employs a dark background with high-contrast text, providing a modern and sleek appearance. The primary color seems to be a deep purple or indigo, which gives it a sophisticated and calming look. The light text color stands out well against the dark background, ensuring readability.
Typography: The font used is clear and easy to read. There is a good use of hierarchy, with the heading "Create a workout plan" in bold and larger font size, making it immediately noticeable. The body text is well-spaced and organized, making it easy to follow.
Spacing and Layout: The layout is clean and uncluttered. There is ample spacing between the elements, preventing the interface from feeling cramped. The use of bullets and numbering in the workout plan helps in breaking down the information into digestible parts.
Icons and Visual Indicators: The use of a small user icon next to the query adds a personal touch, making it clear that the response is tailored for the user. The subtle gradient or glow around the main response box draws attention to the content without being overwhelming.
UI Principles Covered
Clarity and Readability: The high-contrast text ensures that the information is easy to read. The clear distinction between the headings, subheadings, and body text enhances readability.
Consistency: The UI maintains a consistent color scheme and typography throughout the interface. This consistency helps users understand and predict how the interface will behave, reducing cognitive load.
Hierarchy: There is a clear visual hierarchy in place, with more important elements like headings being larger and bolder. This helps users quickly identify the structure of the information.
Simplicity: The design follows the principle of simplicity by avoiding unnecessary elements and focusing on the core functionality. This makes the interface intuitive and user-friendly.
Feedback: Although not interactive in the image, good UI design principles suggest that such interfaces should provide feedback to users for their actions. For instance, responses to user queries should be prompt and informative.
Accessibility: The high contrast and clear text are important for accessibility, ensuring that the interface is usable by people with visual impairments.

6. Conclusion

Design is an iterative process
Develop high-fidelity prototypes based on the wireframes.
Continue user testing and refine the design based on feedback.
Collaborate with developers to ensure design feasibility and implementation.

Flow link

Application UI check - Mobile screen record

Partner With Prasanna
View Services