[FE] Design of the WebApp

[thogebati]

Task

The WebApp's UI should follow a chatbot approach. Thus, messages from the system and input of the user should be displayed in speech bubbles.

When a user first visits the webapp, the following message should appear:

"Hallo! bitte schildere Dein Anliegen, damit ich Dein Ticket erstellen kann."

The user should then be able to either provide input via text or voice, clicking on a microphone icon. See here for an example of the starting screen (left screen): https://www.uplabs.com/posts/chatbot-ui-design

User story

1. As a user that submits a ticket via email
2. I want / need a user-friendly and intuitive interface
3. So that I enjoy using the webapp and can submit tickets efficiently

Acceptance criteria

• [ ] UI resembles a messenger / chatbot style
• [ ] The UI is not too ugly
• [ ] Users can submit input via text or voice message

Definition of done (DoD)

• Work products are uploaded to the Github repository and merged to the main branch
• If necessary, the bill of materials section of the planning documents is updated
• Code/feature passes suited tests
• Code is peer-reviewed
• Help documentation (README) is updated
• Fits into our architecture, where possible

DoD general criteria

• Feature has been fully implemented
• Feature has been merged into the mainline
• All acceptance criteria were met
• Product owner approved features
• All tests are passing
• Developers agreed to release

[thogebati]

To maybe add, that it also looks good on a mobile browser

[AnnaH3003]

Ideally, this is what it should look like: