APPROACH
Two tracks were set up.
-
Design a North Star called, Vision 3.0.
-
Research and introduce new features.
The workstream was to plan a step by step journey to achieve the Vision 3.0
Vision 3.0

EXECUTION
PROCESS
Process of introducing new features was,
ITERATIONS
The design team led the product to have a lot of iterations with faster release frequency. This gave more opportunity to better the product and include many steps to make the users comfortable and adapt with the changes.
Mentioned below are the most prominent releases.

v2.2
September 2016
- Opening of panels (accordion menu) to utilize the space.
- Smart Responses roll out.
Aim
To help the agents have personalized responses ready as shortcuts to be sent to visitors. These help the agent's responses sound personal and less mechanical.


v2.1
July 2016
This is the console when I joined [24]7, it was made for a smaller resolutions and plenty of unused screen space because of collapsible panels.
My Role
Research and Conceptualize Smart Responses.


v2.3
![Interaction Tab [September 2016] Copy 36](https://static.wixstatic.com/media/757a95_03548f462c7747d7978e697c11b158c3~mv2_d_2880_2040_s_2.png/v1/fill/w_768,h_543,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Interaction%20Tab%20%5BSeptember%202016%5D%20Copy%2036.png)
v2.3 was a major release with several features.
Agent's metrics
The amount of time the agent has worked, amount of sales/chats they have completed, their AHT, Concurrency, and other such information can be pinned by the agent to the top right of the screen.
Customer Context
The left panel cleaned up to show only relevant information to the agent. Customer's current web journey (pre-chat journey) and history was collated in this customer context.
Asynchronous Messaging
The customers could message the brand through the brand's Facebook page and the chat would get connected to [24]7
UI Refresh
Clean up and overhaul the interface.
v2.4
Chat Bubbles
v2.4 involved cleaning up of the interaction panel with introduction of colored bubbles.
Enhanced Message Composer
The message composed was also enhanced in this version, with strip formatting, selection highlighting and so on.

CRM
The next big feature was to introduce the CRM within the chat console. For this the team conducted working sessions and came out with the following wireframes to pitch them to the top lead. Including CRM reduces switching of tabs and loss of context immensely. It also increases the speed of replies by the agents, thus decreasing ART and AHT, the parameters on which the agent's performance is measured.


CRM within the bottom left panel with customer context. Smart responses and knowledge base combined to the top right.
Chat Carousel moved to left vertical panel, CRM panel within workspace to the right. Repositioning of all panels.




CRM within the bottom left panel with customer context. Smart responses and knowledge base combined to the top right.
Knowledge base on the left panel. CRM's ticketing on the right.




CRM as the top right section with sales info.
Knowledge base moved to bottom right.
Layout number 3 had been chosen out of the option presented above and was detailed out. The right section acts as workspace and would house the CRM.
Vision 3.0

HYGIENE STATES
The following screens are hygiene screens for the console. They illustrate the empty or unavailable or loading state. Click them to magnify.
The loading screen for smart responses, responses unavailability screen and the empty states.






