Freelance projects

Freelance projects

Chat menu design for your CRM

Interface Design (UI/UX), Web Design — incorrectly specified categories?

45 USD

Project translated automatically. Log in or register, to view the original

Technical task for chat page design (Figma)

1. General information

Goal: to create a modern, convenient, and intuitive interface for the chat page of the CRM system.
Platform: web application desktop.
Tool: the design must be created in Figma using auto-layouts, components, and styles.

2. Page structure

Chat list (left panel, sidebar).
Selected chat window (right panel).
Group creation modal window.
Group information modal window.

3. Design element requirements

3.1. Chat list

The list can have scrolling.
If the list is empty, an svg image with text should be displayed in the middle, indicating that the user currently has no chats.

3.1.1 List header:

Tabs for filtering chats (Internal, Client), with badges showing the number of unread chats.
Search in chats (input with placeholder and search icon).
Button to create a new group.

3.1.2 List item:

Avatar or the first two letters of the first name and last name. Avatar should be round.
Chat name. Consider that if the name is long, it should be truncated.
Last message. If the message is long, it should indicate that there is more text. If it contains files or images, there should be icons for the image or file.
Time of the last message.
Badge with the number of unread messages (if any).
The active chat should be highlighted.
The text of the last message can have bold, italic, link formatting or all at once.

3.2. Chat window

If no chat is selected, an svg image with text should be displayed in the middle, indicating that a chat needs to be selected.

3.2.1 Header:

Avatar of the interlocutor or group. Or the first two letters of the first name and last name or the first letter of the group name. Avatar should be round.
Chat name.
If it is a group, the number of participants should be displayed under the name.
If it is a group, there should be a menu button (three dots) on the right with dropdown actions: Chat Information, Add Participant, Leave.
The menu can have different colors. For example, leave can be made red.

3.2.2 Message area:

Messages are aligned to the left (from the interlocutor) and right (from me).
Messages are grouped by dates (separator "Today", "Yesterday", or date if earlier).
System messages should be displayed ("User joined the chat"). System messages will be displayed in the middle.
If the message is from the interlocutor, the initials and avatar of the sender should be displayed.
If two messages come in a row from one person, the avatar and initials are shown only once with the first message.
Messages can be wide, so they do not stretch too much in height when there is a lot of text. But not to the full width of the block.
If the chat is not scrolled to the very bottom and new messages arrive, a rounded button should appear at the bottom, indicating that there are new messages and the number of new messages.

3.2.2.1 Message:

Can contain text with formatting (bold, italic, link).
Can contain images from 1 to 10. Ensure proper display when the number of images is from 1 to 10.
Can contain other files. In this case, files should be shown in a list. The list item contains the file extension in a colored rounded square on the left. On the right, the file name and under the name, the file size.
Can have a preview for a link (url, title, description, image). It can be without an image.
Can simultaneously contain text with images, files, and a preview.
Contains the date of the message and a status checkbox for read/unread.
When clicking on an image, it should open the image in full screen with the ability to switch between images in this message using arrows.
Contains a dropdown menu with actions (edit, reply, delete, etc.). Menu items can have different colors.
When hovering over a message, a menu button should appear, clicking which shows the menu itself.
The message can be a reply to another message, so the message being replied to should be shown at the top, followed by the content of the message itself.

3.2.3 Footer:

Text input field. Can have a height of several lines. Has a placeholder.
Formatting buttons (bold, italic, link) and a button to attach files should be displayed.
Formatting buttons can be active or inactive.
If link is selected, there should be an option to insert a link.
When formatting is applied, the text in the input should be formatted accordingly (as in Telegram).
If files are selected and they are images — previews should be displayed. If another type of file — a square with the file extension, name, and size.
Ensure proper display of up to 10 previews of images or files (scrolling may be possible).
Files have a cross to remove the file.
If the user replies to a message, this should be visible in the block with the option to cancel.
If the user edits a message, this should be visible in the block with the option to cancel.
Send button (svg icon "paper airplane").
Emoji button.

3.3. Group creation modal window

Field for the group name.
Field for selecting an avatar with the option to preview and remove it immediately.
List of users with search.
Button to create a group.

3.4. Group information modal window

Field for the group name.
Field for selecting an avatar with the option to preview and remove it immediately.
List of users with search.
Users can be removed from the group.
Save button.

Proposals 19 Withdrawn 1

Anhelina Khomych

7 0

Budget: 6000 UAH Deadline: 7 days

Hello!
I have experience in creating platforms with chats, I have a great understanding of how the content structure should look on the screen. I am well-versed in Figma, I work with components, create styles, label elements and layers.
I am interested in your project. On my part, I guarantee quality and effectiveness. I can create a user-friendly interface that will be easy to read and look good at the same time.
I would be happy to discuss the details and terms of the project with you.

Link to my portfolio:
Behance
Dribbble

Sincerely, Angelina!

Olena Tarasova

3 0

Projects 3
Rating -
Rating 642

Budget: 6000 UAH Deadline: 7 days

Hello.
I have 2 years of work experience.
I work quickly and attentively.
I use Figma.
I would be happy to collaborate.
Here is my portfolio Behance Dribbble Freelancehunt
The final price depends on the complexity and volume of the work.

Anatoly Yuhimenko

95 2

Budget: 6000 UAH Deadline: 3 days

Good day!
If you want to create a truly modern and cool design, I am happy to help with this. I have been working in design for over 7 years. I am confident that I can create exactly what you need. I am an expert in UI and UX. I also run my design blog on Instagram, which confirms my expertise.

You can view my work in the portfolio Freelancehunt

Olena Pasynkova

2 0

Projects -
Rating -
Rating 555

Budget: 7000 UAH Deadline: 14 days

Hello, Oleksandr!
I specialize in creating modern and functional interfaces in Figma with a focus on usability, intuitiveness, and interaction logic.

In your project, I see an important task — to make the CRM system chat page not only visually appealing but also one that ensures quick navigation, effective dialogue management, and user comfort with a large number of chats.

I propose:
- The use of auto-layouts, components, and styles for a flexible and scalable design system.
- A well-thought-out sidebar structure (chat list) considering different message statuses, search, and filters.
- A convenient and modern chat window with a focus on interaction speed (sending, attachments, reactions, statuses).
- Concise and clear modal windows for creating and viewing group information.
- A clean and pleasant visual language adapted to the CRM environment, so the design fits harmoniously into your system.

My experience in UI/UX allows me to create designs that consider the needs of the business and end users.
As a result, you will receive a logical, scalable, and modern design that will be easy for developers to implement.

I am ready to discuss the details, show examples of similar work, and calculate the final cost and timelines.

Yuliana Dolhyi

0 0

Projects -
Rating -
Rating 316

Budget: 5000 UAH Deadline: 5 days

Hello!
I am interested in the project. I will create a modern, user-friendly design for your project.
Portfolio:
Behance

Viktoriia Savchenko

22 0

Budget: 6000 UAH Deadline: 12 days

Hello, Oleksandr! I am interested in your project. I have experience in designing chat interfaces. I have a successful track record of following existing design systems.

I developed the design for the CRM system for the company "Golden Age" (https://www.figma.com/design/sJMhE1WqqlIbJnyQtxVzTT/%D0%97%D0%BE%D0%BB%D0%BE%D1%82%D0%B8%D0%B9-%D0%92%D1%96%D0%BA?node-id=2964-73315) https://www.figma.com/design/rXci1fNrbuadBiKmawR6CR/%D0%9B%D0%BE%D0%BC%D0%B1%D0%B0%D1%80%D0%B4?node-id=1042-31352

Rostyslav Tinemark

15 1

Budget: 12345 UAH Deadline: 12 days

I understand that you need an embedded messenger interface. I have done many like this, feel free to contact me..
__
Behance
Dribbble

Yevheniia H.

18 1

Budget: 5000 UAH Deadline: 3 days

Hello, I am ready to fulfill your request according to your specifications above, but the budget is a bit higher, all points will be included in the project as well as the UI-Kit. Please write to me privately to discuss the details.

Lyudmila P.

23 1

Budget: 8000 UAH Deadline: 7 days

Good day, Oleksandr!

I am Lyudmyla, a designer with experience in creating intuitive interfaces. My goal is to develop a modern chat menu design for your CRM. I will ensure usability through clearly structured elements and dynamic adaptation for users. I will use Figma to create components and styles, which will allow for quick implementation of your wishes and achieve high quality. Ready to collaborate!

Andrii Maschenko

2 0

Projects -
Rating -
Rating 950

Budget: 4000 UAH Deadline: 3 days

Good day!
My name is Andriy, I have 8 years of experience in interface development and design. I can create a modern, user-friendly, and intuitive chat page design in Figma for you, taking into account all the requirements from the technical assignment: auto layouts, components, styles, responsiveness, modal windows, chat list, and working with messages.

I have experience in projects for CRM and web applications, so I understand well the logic of chats, groups, messages, and content formatting.

I would be happy to discuss the details and start working.

Iryna Rudyk

43 0

Budget: 6000 UAH Deadline: 12 days

Hello!
I will gladly take on your project.
I will do it stylishly, with quality, and consider all your wishes.
I will illustrate all possible scenarios.
The work includes - desktop design, basic UI kit for the developer, micro-animations for elements (button hovers, inputs, cards, animated ribbons, etc.), adaptation for tablet and mobile. I work with components and auto-layouts, everything in styles. You will receive a clickable prototype, and I will communicate with the developer if needed.

My portfolio
Freelancehunt
Behance

Artur Kohut

24 0

Budget: 20000 UAH Deadline: 5 days

Hello! 👋
I am not a designer who just draws, but rather a designer who DESIGNS products that sell business services.

Please take a look at my portfolio and see my expertise in the UX/UI field:
Freelancehunt

Vasily Zaharevich

27 0

Budget: 22222 UAH Deadline: 22 days

Good time!

Last works!

https://www.cardanmash.com.ua/
http://floridagardendesigns.com/
https://sugacards.com/
https://advilion.com
http://axiomaplus.com.ua/
https://maxinstal.ch/
http://otpad.com.ua/
http://spectrum.net.ua/

Detailed discussion, advice, preferences, evaluation in personal discussions!

Svitlana Listrova

20 0

Budget: 5999 UAH Deadline: 10 days

Hello!

I am ready to collaborate after discussing the details for a more accurate calculation of costs and timelines.

My portfolio:
Dribbble
Behance

Yegor Z.

63 0

Budget: 6000 UAH Deadline: 4 days

Good afternoon, Alexander
I have reviewed the description. The task is clear :)

Bogdan Vlasov

3 0

Budget: 7000 UAH Deadline: 5 days

Hello! I have 5+ years of experience in design.
Get acquainted with the technical specifications.

I am ready to work after clarifying questions.

Portfolio Behance

Vitaly T.

177 0

Budget: 5000 UAH Deadline: 5 days

Hello.
I offer timely and high-quality execution of the task. Always in touch and promptly considering all requests.

My portfolio:
Logo: Behance
Web design: Freelancehunt

Aleksandr Shulga
Dnepr, Ukraine
ТОВ "ГЕЛЕОН ІНВЕСТ"

Projects 22
Rating 5.0
Rating 786

Chat menu design for your CRM

Anhelina Khomych

Olena Tarasova

Anatoly Yuhimenko

Olena Pasynkova

Yuliana Dolhyi

Viktoriia Savchenko

Rostyslav Tinemark

Yevheniia H.

Lyudmila P.

Andrii Maschenko

Iryna Rudyk

Artur Kohut

Vasily Zaharevich

Svitlana Listrova

Yegor Z.

Bogdan Vlasov

Vitaly T.

Proposals concealed

Proposals are currently absent

Proposals concealed

Current freelance projects in the category Interface Design (UI/UX)

Development of UI/UX design for a mobile application and web dashboard

Development of an interactive web service (PWA) for a cultural project

Website design on Goodop

Icons for a SaaS product + possibly some minor improvements to the UI

Development of a party games platform for Smart TV