Design a mockup for a chat system

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

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 [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.

Recommended Skills

Employer Feedback

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

Profile image BobGriffiths01, United Kingdom.

Top entries from this contest

View More Entries

Public Clarification Board

  • hemchander94
    hemchander94
    • 4 years ago

    Kindly check entry #7 . Let me know your thoughts about the design ;)

    • 4 years ago
  • AmarKasapovic
    AmarKasapovic
    • 4 years ago

    This is a web/PC platform chat system or?
    Do you need Mobile mockup or just this?

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 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.

      • 4 years ago
    2. AmarKasapovic
      AmarKasapovic
      • 4 years ago

      I will, sorry, had some other jobs to finish.

      • 4 years ago
  • rlanto003
    rlanto003
    • 4 years ago

    Please check and rate #6 . Thank you

    • 4 years ago
  • BobGriffiths01
    Contest Holder
    • 4 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.

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 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.

      • 4 years ago
  • BobGriffiths01
    Contest Holder
    • 4 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

    • 4 years ago
  • shakilaiub10
    shakilaiub10
    • 4 years ago

    plz upload high regulations images..

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 years ago

      sure will do so shortly

      • 4 years ago
    2. BobGriffiths01
      Contest Holder
      • 4 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

      • 4 years ago
  • jharrisamadeus
    jharrisamadeus
    • 4 years ago

    Hi, I don't think all your images uploaded?

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 years ago

      I hope you can see them now. Please let me know if you cannot.

      • 4 years ago
  • Mayursinh007
    Mayursinh007
    • 4 years ago

    Hi you need the psd only? right..?

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 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.

      • 4 years ago
  • omwebdeveloper
    omwebdeveloper
    • 4 years ago

    #sealed. Final delivery will be PSD?

    • 4 years ago
    1. BobGriffiths01
      Contest Holder
      • 4 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.

      • 4 years ago
  • BobGriffiths01
    Contest Holder
    • 4 years ago

    If you could not find the image file previously they should be there now

    • 4 years ago
  • BobGriffiths01
    Contest Holder
    • 4 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.

    • 4 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!