Design a mockup for a chat system

Status: Closed
Prize: $140
Entries Received: 6
Winner: hemchander94

Winner

Contest Brief

We have a complex chat programme that needs a redesign.

The program is used by coaches when coaching clients. There is a coaches interface and a client interface. Both need redesign (see the attached images). The function of the system is to present the coach with a process using built in questions which he/she can use/modify to build up a dialogue with the client(s). At the conclusion of each stage the coach has to summarize the stage. Therefore there are two main functions within the system. 1) Chatting and 2) Summarizing

1)The chat system
In the coaches screen there is a central panel where the coaches question set is loaded. Each question set is made up of a number of stages with sub sections in each stage. The full questions can be seen in the right hand panel when the relevant sub section is clicked in the central panel. The sub sections appear as a concertina when the relevant stage is clicked. The coach can ask a question by clicking on the 'ask' button which sends the question to the input panel on the bottom left. The coach can then modify the question, or not, and send it to the chat panel by clicking the 'send' button.

On the client's screen they see the question appear in the chat window and reply by typing in the input panel and clicking on 'send'.

2) Summarizing
As the dialogue builds up there comes a point where each stage is ready to be summarized. The coach can then select the relevant stage from the tabs at the bottom right. They click the pencil icon on the right to make it editable. They then copy or type the summary into that stage tab and click 'save'. The summary then appears on the tab. On the client side it appears under the relevant stage on the right on the screen.

You can see a video of the system in action at https://www.youtube.com/watch?v=h4UMbfGVGiw

At the top of the chat pane there are icons which represent the people in the session. There are usually 2 but could be up to 10. They change shape when the person is typing. Above the send button on the coach interface there is a gear wheel which allows the coach to 1) email the summaries to each person. 2) Mark the session as closed 3) Print the log.

Principles for the redesign

We are looking for a redesign that is more intuitive about how the system operates but still can be seen on one screen. A look that is clean and modern and uses color and design to make the whole interface more friendly. Each stage of the process from seeing the questions, choosing them, editing them, pasting to the chat and summarizing should be as obvious and clear as possible.

The way chats are shown on iphone phones would be an example of what we are looking for. But we need more than the chat pane redesigned. The whole process needs to be taken into account and be consistent.

The colors I want used are the blue, orange (shades) black (not much black) and red you can see in the attached document - course information sheet. Please remember the participants can choose a range of colors for their text so it is easier to see each person's contribution.

The final delivery would be a series of psd or image files showing how the entire process would operate from loading the question set to sending the email summaries.

This is the first time I have used freelancer so I don't know if you are allowed to ask questions but am happy to provide answers if the system allows.

Recommended Skills

Winner

Post a Contest Like This

Employer Feedback

“Really professional approach with a good understanding of user interface. Will use again for other projects”

BobGriffiths01, United Kingdom.

Public Clarification Board

hemchander94
- 10 years ago
Kindly check entry #7 . Let me know your thoughts about the design ;)
- 10 years ago
AmarKasapovic
- 10 years ago
This is a web/PC platform chat system or?
Do you need Mobile mockup or just this?
- 10 years ago
View 3 more messages
1. Contest Holder
  - 10 years ago
  HI Amar, I don't know if you are going to submit an entry but I would be interested to see what you can come up with.
  - 10 years ago
2. AmarKasapovic
  - 10 years ago
  I will, sorry, had some other jobs to finish.
  - 10 years ago
rlanto003
- 10 years ago
Please check and rate #6 . Thank you
- 10 years ago
Contest Holder
- 10 years ago
Important. Please remember for the coaches side for each stage there are sub sections which have to be shown before the questions are displayed. The number of stages and subsections is not fixed. There can be 2 - 9 stages and 2 - 15 subsections. So any design has to be adaptable to those numbers.
- 10 years ago
1. Contest Holder
  - 10 years ago
  This is why we used the concettina arrangement in the center panel because the sub sections for each stage did not take up space when they was not being used. See the video for how it operates.
  - 10 years ago
Contest Holder
- 10 years ago
Hi Thanks to everyone who has submitted. I realize it is early days but don't forget I am also looking for a new and more intuitive method of the coach seeing the questions and sending them to the client. The entries so far are copying the existing layout of the screen. It may be that there is no better method but I hoped there would be. The sequences of coaching is that the coach has to review the question set, chose which question to send, possibly edit it and then send to the client. And then there has to be a place to see the summaries. Thanks Bob
- 10 years ago
shakilaiub10
- 10 years ago
plz upload high regulations images..
- 10 years ago
1. Contest Holder
  - 10 years ago
  sure will do so shortly
  - 10 years ago
2. Contest Holder
  - 10 years ago
  I have uploaded some clearer images of the coaches and client's screen. Please let me know if it gives what you need. Bob
  - 10 years ago
jharrisamadeus
- 10 years ago
Hi, I don't think all your images uploaded?
- 10 years ago
1. Contest Holder
  - 10 years ago
  I hope you can see them now. Please let me know if you cannot.
  - 10 years ago
Mayursinh007
- 10 years ago
Hi you need the psd only? right..?
- 10 years ago
1. Contest Holder
  - 10 years ago
  The final delivery would be a series of psd or image files showing how the entire process would operate from loading the question set to sending the email summaries.
  - 10 years ago
omwebdeveloper
- 10 years ago
#sealed. Final delivery will be PSD?
- 10 years ago
1. Contest Holder
  - 10 years ago
  The final delivery would be a series of psd or image files showing how the entire process would operate from loading the question set to sending the email summaries.
  - 10 years ago
Contest Holder
- 10 years ago
If you could not find the image file previously they should be there now
- 10 years ago
Contest Holder
- 10 years ago
The final delivery would be a series of psd or image files showing how the entire process would operate from loading the question set to sending the email summaries.
- 10 years ago