Screen Recording at Observe.ai
Led the design of 4 enhancements for Observe.ai's “Screen Recorder” feature for its deployment in August 2023. Cleared UI design debt, and created an interactive guided tour of the feature on the platform for users.
Duration: April to August 2023
Role: Product Designer (Iterative Design, Hand-off to engineering team.)
Team: Designer, Product Manager, Front-end and Backend engineers, Testing Engineers, Engineering Manager
Duration: April to August 2023
Role: Product Designer (Iterative Design, Hand-off to engineering team.)
Team: Designer, Product Manager, Front-end and Backend engineers, Testing Engineers, Engineering Manager
Blog post for Screen Recording, launching for general availability from a beta phase.
Post by the Product Manager for launch of Screen Recording
🧐What is the Screen Recorder Application?
Screen Recording is a feature that helps our customers by providing visibility into their Call Center Agent's workflows by capturing their computer screens during and after a call. This can help our customers improve their Agent's performance, and drive better business outcomes.
👀Some context...
This application was previously in the beta phase, & we had some insights and feedback from customers. The product had more than 650K Screen Recordings attached to calls from 500+ Agents.
🤹♀️My contributions:
Designing 4 feature additions in Screen Recording in around 5 months.
1. Improving the navigating experience of Screen Recording Videos.
2. Enhancing the status viewing interface for managers.
3. Redesigning UI for communication interface to Agents.
4. Configuration to add URLs and Titles for Automatic redaction of sensitive information.
Along with this, I also created an interactive tour for onboarding users to the feature.
Screen Recording is a feature that helps our customers by providing visibility into their Call Center Agent's workflows by capturing their computer screens during and after a call. This can help our customers improve their Agent's performance, and drive better business outcomes.
👀Some context...
This application was previously in the beta phase, & we had some insights and feedback from customers. The product had more than 650K Screen Recordings attached to calls from 500+ Agents.
🤹♀️My contributions:
Designing 4 feature additions in Screen Recording in around 5 months.
1. Improving the navigating experience of Screen Recording Videos.
2. Enhancing the status viewing interface for managers.
3. Redesigning UI for communication interface to Agents.
4. Configuration to add URLs and Titles for Automatic redaction of sensitive information.
Along with this, I also created an interactive tour for onboarding users to the feature.
Navigating Screen Recordings
A screen recording for a call can be anywhere between a few minutes, to over an hour. I re-designed the Seek bar of the video window to make it easier for Managers to navigate to certain sections such as sensitive information (redacted), call end, after-call work, an error state; and skip ahead of this portion if needed.
The design was made according to the design system's guidelines. The colors, opacity, and patterns of these sections on the seek bar were made to accommodate possible future additions of visually depicting annotations, bookmarks, and "moments" such as Negative customer sentiment on the same seek bar.
A screen recording for a call can be anywhere between a few minutes, to over an hour. I re-designed the Seek bar of the video window to make it easier for Managers to navigate to certain sections such as sensitive information (redacted), call end, after-call work, an error state; and skip ahead of this portion if needed.
The design was made according to the design system's guidelines. The colors, opacity, and patterns of these sections on the seek bar were made to accommodate possible future additions of visually depicting annotations, bookmarks, and "moments" such as Negative customer sentiment on the same seek bar.
Manager side: Managers can see their Agent's Screen Recordings along with Call audio, transcript and Evaluation form.
Communication to Agents
Cleared Design debt of inconsistent UI of communication message windows to Agents about the recording/ not recording states, session expiries, login-logout states, software updates etc.
Initiated drawing out a flow chart for the different complex ways a Login and Logout can happen, to surface gaps in relaying the right information to the Agent and avoid missing recordings.
Created a message-window template with guidelines that can be used for any future communications, and help reduce design and front-end engineering load.
Cleared Design debt of inconsistent UI of communication message windows to Agents about the recording/ not recording states, session expiries, login-logout states, software updates etc.
Initiated drawing out a flow chart for the different complex ways a Login and Logout can happen, to surface gaps in relaying the right information to the Agent and avoid missing recordings.
Created a message-window template with guidelines that can be used for any future communications, and help reduce design and front-end engineering load.
Agent's side: Agents need to be signed in at all times for screen recording to happen.
⚠️More details cannot be disclosed on a public platform, due to NDA Policy. ⚠️
Some process highlights
✨Worked with PM to understand our end users (Admin, Agent, Quality Analyst) and their workflows. Built clarity on use cases and designed the right user-centric solutions.
✨Independently collaborated with the diverse SR Team of front-end, back-end, testing engineers, and managers. Optimized designs after considering feedback from the perspective of each stakeholder.
✨Lead design reviews, and hand-off meetings to deliver high fidelity prototypes.