Design a mockup for a chat system
- Status: Closed
- Prize: $140
- Entries Received: 6
- Winner: hemchander94
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'.
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 [login to view URL]
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.
“Really professional approach with a good understanding of user interface. Will use again for other projects”
BobGriffiths01, United Kingdom.