Query Management Application

This application looks at any queries a staff member may have and creates a simple process within the application for the user to access help through a self serve or by submitting a query straight to a compliance officer.

Query Management
Application

 

During this project I worked collaboratively with another senior UX designer, working on aspects of the UX, I also created all the UI required for this project.

 

Background

This application required a lot of solution finding, due to technical limitations during the build. The main challenge was using a third-party decision tree inside the existing application, as we faced issues integrating additional functionalities. we also faced challenges with working with a new design team.

Dependencies
- Integration into GECCo
- Integration of third-party CARRIE application working within GECCo.
- CARRIE application has design limitations

 

The Challenge

Staff requirement: To create an application that allows the user to gain basic information about raising a query using a chatbot. If the query is not answered the staff member is able to raise queries to the private side for help. The user should be able to track the query and also send a message to the compliance officer for further clarification is required.

Private Side: The compliance officer is able to assign themselves to a query to answer. The compliance officer is able to respond to queries and attach documents for clarity of reasoning. The compliance officer is able to close a query or the query will automatically close after 30 days of no activity.

The Solution

Vetting issues
The first point of contact is through an instant logic tree to deal with simple questions and the second deal with more complex issues by submitting a for compliance…

The deliverable achieved so far include:
- Chatbot button design
- Responsive raise query side panel
- Ability to view current queries and current status.
- Ability to message and attach the document to send to someone in compliance.

  • My Role

    Design UI and some UX deliverables alongside another UX designer.

    Deliverables:
    - Visual Designs
    - Persona’s
    - Component updates
    - competitor research
    - Analysing User feedback and updating designs accordingly.
    - User flows

  • Technical Stuff

    Agile - Work framework
    JIRA/Confluence - organise tickets
    Sketch - UI/UX design
    DSM - Design Library
    Invision - workshops, Prototypes
    Invision/Axure - User testing

  • Team And Stakeholders

    Stakeholders:
    Head of UX (Client)
    Business owner
    Product owner

    Team:
    x2 Teams of developers
    (1x staff side 1x Private side)
    Product Owner - per staff and private side.
    UX designer
    UX/UI Designer
    User tester

  • Duration

    Staff and Private side 1 yr so far whilst working on other applications alongside this application.

    The application is currently in the refinement stage and is updating UI / UX defects.

Understanding The User’s Pains and Requirements

The application is all about understanding what a user needs are when they are unsure how to complete a disclosure form. As this uncertainty can result in people completing forms incorrectly or not declaring items required.

The Repercussions of this could result in larger fines for organisations and affect individuals’ careers. Below I have tried to define these through persona mapping, user testing and user flows.

Persona Mapping

The query management users are the same users defined during the homepage design. The only main difference is the primary objective in this scenario our around obtaining advice in order to complete the secondary objective to complete any disclosures required.

Submitting A New Query

Once user has used the chat bot to try and obtain the advice required if the user is still unsure they are then given the option to raise a query to an Employee Compliance officer for advice. See the process of submitting a query through staff to an Employee compliance officer.

User flow Of The Journey

In order to create the best solution, it is important to understand the journey from start to finish. By doing this we can under the user's pain points and any opportunities to simplify the journey.

Competitor Research

In order to understand the standard user patterns, users are already familiar with it is important to see what chatbot users are really using for advice and queries.

Reading list:
NN The User Experience of Chatbots - https://www.nngroup.com/articles/chatbots/|
Chatbot 101 - https://medium.com/botsupply/chatbot-101-everything-you-ever-wanted-to-know-about-chatbots-478c0b825dd0

Chatbot Component development…

After looking at competitor research I took inspiration from certain features and styles and started to explore the chatbot icon in its closed state, open state and also promote options.

User feedback

 

When I started designing the Chatbot, not all requirements had been finalised due to this the design has developed over time. As a UI/UX designer, it is always important to listen to your users and get clarity on how to use the space available as more features are added.

Feedback from users:

Please see brief details from user testing:

First round:

Pro’s
- Could of icon in blue make sense because same as the primary buttons. (familiar pattern)
- Don’t like robot icons.

Con’s
- Chatbot needs to be higher up the screen to be clear where located
- Chatbot window is too small to see content within.

Second round:

Pro’s
- Chatbot is covering data have to move to see data. (worked on some screens but not others)
- Animation distracting and requires additional effort to close

Con’s
- Open window for the chatbot is too small to see all content clearly when submitting the form, and requires a lot of scrolling.

Business Feedback and considerations

Business Feedback:
- Wanted animated user chatbot icon - this was dismissed as users found animation distracting even if they were able to close the chatbot this required additional effort to enforce.
- Chatbot at top of the screen - pushed back after the second round of feedback user said cover content on screen also did not match competitor research considerations.
- don’t like to use a robot icon and call the chatbot by its interface name.

Business requirement update:
- Chatbot only needs to be available on the homepage only originally needed to work on all pages.
- Raise a query Functionality in chatbot originally designed was to divert the user to a new screen to raise a query.

Limitations
Had to user styling limitations due to the existing framework of a chatbot used had to be held in a shell in inside the application required developer prod and discussions. Was not clear at the beginning of the project limitation of chatbot.

Design Development

The original chatbot design when open was much smaller than the updated design and the position of the chatbot icon was moved to the centre right-hand side of the screen, based on user feedback however, after the second round of user feedback we considered other use cases. Although the chatbot would be more prominent higher up the screen. In most circumstances, this functionality would not be required. So the icon would impair part of the screen for a tool not being used regularly by users. Competitor research affirmed this consideration at most chatbots were located in the bottom right-hand corner. Based on this most users will be familiar with this pattern.

  • User feedback on chatbot concerns.

    After doing competitor research into chatbots and listening to the user’s feedback I update the design. However, the positioning of the chatbot higher up the screen seemed to cover up a lot of data so did another round of user testing to confirm this opinion as the original testing requested the chatbot move up the screen.

  • Final design

    After considering the user feedback, competitor research, technical limitations and possible pain points. the final design was formed.

    Width of and height of chatbot - thinking behind this design user feedback mentioned the that the form at the end of the form was hard to complete because of size of the window. Also due to limation with the chatbot, we were unable to resize the chatbot considerably and the design needed to live in a shell within the the application. this meant the chat was increased in size to facilitate this.

    Another consideration given was that the user did not require visibility of the rest of the screen to complete the the form or questions allowing adequate space given to facilitated this. The chatbot was also design to be responsive to screen which meant is consider the screen size rewuired.

Final visual designs Broken down

See below the thinking behind the final visual design and the decisions made.

Application From Both Sides…

I have designed both sides of the Query Management system. Considering the terminology, the way the officer and staff member use the application and the different requirements both have.

  • Staff Side

    The staff member only needs to be able to respond to and read queries. An extra click is intentional in order to make the staff member consider if a reply is required or not, as the case is reassigned based on each response, by making this reply functionality also visible the user may treat it like a casual chat and add more response then required.

  • Compliance Side

    The EC officer should be able to reply to any cases assigned to them quickly and easily. The reply area is split on the screen to allow the Compliance officer to read the bulk of the conversation without having to scroll, and attachments are easy to attach. the submit button is added to allow the Compliance officer to review reply before submitting.

Here’s My Design Process Summary…

 

Empathise

The query management users are the same users defined during the homepage design. The only main difference is the primary objective in this scenario our around obtaining advice in order to complete the secondary objective to complete any disclosures required.

Define

What are we trying to achieve?
Staff requirement: To create an application that allows the user to gain basic information about raising a query using a chatbot. If the query is not answered the staff member is able to raise queries to the private side for help. The user should be able to track the query and also send a message to the compliance officer for further clarification is required.

Private Side: The compliance officer is able to assign themselves to a query to answer. The compliance officer is able to respond to queries and attach documents for clarity of reasoning. The compliance officer is able to close a query or the query will automatically close after 30 days of no activity.

Ideas

Various icon concepts were created based on competitor research.
Chat between the staff side and private side was based on the inspiration of emails and WhatsApp. considered the order of other responses the input field and the bubble design. the design was different for EC side and staff due to the different user requirements. Ec side need more detail and the response was more details the staff side required larger easily accessible input find however the staff side is not encouraged to send to man y response due to the user flow of answering queries.

Table and the tabbed system were created to align with other existing applications on the staff side.

 

Prototype

Overview prototypes were developed Invision when discussing navigation and specific interactions were created in Axure.

All UI and UX designs were uploaded onto invision or Confluence as the single source of truth for the developer and other stakeholders.

Technical stuff
AG grid - responsive breakpoints
Components, text styles, Colours - DSM Library.
Font - Ariel
Made in sketch

Testing

Testing was done on the positioning and interaction with the chatbot questionnaire the main mockup was designed in Axure by one of the UX designers and two iterations were explored with different users until a final design was considered.