Boosting Security and Efficiency with an AI Chatbot and Admin Tool
The company was seeking to improve operational efficiency while maintaining data security through the development of an internal AI chatbot, SpectrumGPT. In collaboration with cross-functional teams, I played a key role in designing the Admin interface, enabling team leaders to request, customize, and manage AI chatbots.
COmpany:
Spectrum (Charter Communications)
Industry:
Telecom & Mass Media
Project name
SpectrumGPT
Timeframe
APR 2024 - JUN 2024
Scope of work:
Stack:
Figma
Lucidchart
Gitlab
COmpany:
Spectrum (Charter Communications)
Industry:
Telecom & Mass Media
Project name
SpectrumGPT
Timeframe
APR 2024 - JUN 2024
Scope of work:
Stack:
Figma
Figma
Lucidchart
Lucidchart
Gitlab
Gitlab
Results and Team Feedback
Results
Team Feedback
Results
Measurable Improvements in Workflow
The launch of SpectrumGPT led to meaningful efficiency gains and strong user satisfaction. By streamlining the press release workflow and providing intuitive tools for content generation and management, the platform delivered clear impact for internal teams.
30%
The Press Release team had a 30% reduction in time spent drafting press releases.
90%
About 90% of users gave positive feedback regarding the ease of use and functionality
Results and Team Feedback
Results
Team Feedback
Results
Measurable Improvements in Workflow
The launch of SpectrumGPT led to meaningful efficiency gains and strong user satisfaction. By streamlining the press release workflow and providing intuitive tools for content generation and management, the platform delivered clear impact for internal teams.
30%
The Press Release team had a 30% reduction in time spent drafting press releases.
90%
About 90% of users gave positive feedback regarding the ease of use and functionality
The company
What is Spectrum?
Spectrum is the consumer brand of Charter Communications, a major American telecommunications and mass media company. Spectrum offers many services, including high-speed internet, cable television, home phone, and mobile services.
The company
What is Spectrum?
Spectrum is the consumer brand of Charter Communications, a major American telecommunications and mass media company. Spectrum offers many services, including high-speed internet, cable television, home phone, and mobile services.
Problem
Solution
Role & Team
Summary
Problem
Let's not expose all our data
AI Chatbots have taken the world by storm. They offer functionality to help businesses drastically improve efficiency and effectiveness. However, there’s a big problem with employees of an enterprise business using ChatGPT, or another third-party chatbot - companies don’t want their secure data to be exposed. That’s why Spectrum is rushing to build their own internal chatbot to empower their stakeholders and improve their bottom line.
Problem
Solution
Role & Team
Summary
Problem
Let's not expose all our data
AI Chatbots have taken the world by storm. They offer functionality to help businesses drastically improve efficiency and effectiveness. However, there’s a big problem with employees of an enterprise business using ChatGPT, or another third-party chatbot - companies don’t want their secure data to be exposed. That’s why Spectrum is rushing to build their own internal chatbot to empower their stakeholders and improve their bottom line.
High-Level Requirements
Setting Up a Chatbot
A key focus area for the product is allowing a product owner or manager to request a custom AI chatbot for their team to be more efficient and effective. This process includes three main steps: Step 1 - Use Case Information: The user creates a use case name, enters their information, and info about their team and the project the use case will help with. The user uploads supporting documentation and selects 1-3 language models to try out. Step 2 - Preview: The user previews the chatbot experience using different LLMs, for example, OpenAI LLM, Linx LLM, and (Fill in LLM name). The user compares the language models. Step 3 - Selection: The user selects the best language model for the use case and submits the chatbot request.
Pattern Study
Checking out ChatGPT and Azure
We analyzed several LLMs to deepen our knowledge on this area. Our efforts were divided into study of end-user chatbot UI, and Administrator tool UI. Leadership emphasized their desire to mimic aspects Microsoft Azure administration software. We modeled our chat preview design closely after the OpenAI screen below.
Pattern Study
Checking out ChatGPT and Azure
We analyzed several LLMs to deepen our knowledge on this area. Our efforts were divided into study of end-user chatbot UI, and Administrator tool UI. Leadership emphasized their desire to mimic aspects Microsoft Azure administration software. We modeled our chat preview design closely after the OpenAI screen below.
Press Releases
IT Specialist
Customer Service
Press Releases
Spectrum's MVP rollout initially targeted press releases as a key use case. Large companies like Spectrum regularly issue press statements concerning new product launches, quarterly earnings, partnerships, and more. Crafting these statements involves repetitive tasks following a specified writing style, formats, and information-sharing formulas. The writing must adhere to proper grammar, spelling, and a corporate tone. Press releases also entail accurately presenting company data and figures, necessitating precise input of large numbers. Due to the somewhat repetitive and formulaic nature of this task, and the demand for precision and proper language, press releases were considered the ideal use case for SpectrumGPT's MVP.
Use Cases
Understanding the Three Key Departments
Leadership identified three use cases which would be our initial focus for teams who could make the best use of a custom chatbot, with the Press Release department being the key focus.
Use Cases
Understanding the Three Key Departments
Leadership identified three use cases which would be our initial focus for teams who could make the best use of a custom chatbot, with the Press Release department being the key focus.
Press Releases
IT Specialist
Customer Service
Press Releases
Spectrum's MVP rollout initially targeted press releases as a key use case. Large companies like Spectrum regularly issue press statements concerning new product launches, quarterly earnings, partnerships, and more. Crafting these statements involves repetitive tasks following a specified writing style, formats, and information-sharing formulas. The writing must adhere to proper grammar, spelling, and a corporate tone. Press releases also entail accurately presenting company data and figures, necessitating precise input of large numbers. Due to the somewhat repetitive and formulaic nature of this task, and the demand for precision and proper language, press releases were considered the ideal use case for SpectrumGPT's MVP.
Personas
Learning About the Three Main Personas
While our main focus for the MVP was to develop a pilot product for the Press Release team (detailed persona below), we also engaged in persona exercises to gain a deep understanding and connect with other important users within the organization. These users included: • Customer Service Representatives: These users need a chatbot to assist with customer inquiries, provide quick responses, and manage common issues. The chatbot must be reliable and user-friendly to increase their efficiency and enhance customer satisfaction. • Software Engineers: These users require a chatbot to proofread code, check data figures, and provide quick access to technical documentation. Accuracy and efficiency are crucial for their tasks, making the chatbot an essential tool for their daily operations. • IT Support Specialists: These users handle a wide range of technical issues and ensure smooth operations. The chatbot helps them quickly access technical documentation, troubleshoot problems, and efficiently manage support tickets. By taking into account these additional personas, we aimed to create a versatile and comprehensive solution that addresses the diverse needs of various departments within Spectrum.
Personas
Learning About the Three Main Personas
While our main focus for the MVP was to develop a pilot product for the Press Release team (detailed persona below), we also engaged in persona exercises to gain a deep understanding and connect with other important users within the organization. These users included: • Customer Service Representatives: These users need a chatbot to assist with customer inquiries, provide quick responses, and manage common issues. The chatbot must be reliable and user-friendly to increase their efficiency and enhance customer satisfaction. • Software Engineers: These users require a chatbot to proofread code, check data figures, and provide quick access to technical documentation. Accuracy and efficiency are crucial for their tasks, making the chatbot an essential tool for their daily operations. • IT Support Specialists: These users handle a wide range of technical issues and ensure smooth operations. The chatbot helps them quickly access technical documentation, troubleshoot problems, and efficiently manage support tickets. By taking into account these additional personas, we aimed to create a versatile and comprehensive solution that addresses the diverse needs of various departments within Spectrum.
Journey Mapping
Deep Dive on the User's Process
Emily Johnson is a seasoned Press Release Manager at Spectrum, responsible for drafting and publishing press releases that adhere to corporate tone and formatting guidelines. With a keen eye for detail and a drive for efficiency, Emily is always on the lookout for tools that can streamline her workflow and ensure accuracy. The journey map above outlines Emily’s experience discovering SpectrumGPT, onboarding, completing the intake process, comparing chat models, and finalizing her request for a custom chatbot to assist her team. In addition to Emily’s journey, we also developed journey maps for Customer Service Representatives and IT Specialists to ensure our solution addresses the diverse needs of various key users within Spectrum.
Journey Mapping
Deep Dive on the User's Process
Emily Johnson is a seasoned Press Release Manager at Spectrum, responsible for drafting and publishing press releases that adhere to corporate tone and formatting guidelines. With a keen eye for detail and a drive for efficiency, Emily is always on the lookout for tools that can streamline her workflow and ensure accuracy. The journey map above outlines Emily’s experience discovering SpectrumGPT, onboarding, completing the intake process, comparing chat models, and finalizing her request for a custom chatbot to assist her team. In addition to Emily’s journey, we also developed journey maps for Customer Service Representatives and IT Specialists to ensure our solution addresses the diverse needs of various key users within Spectrum.
Data Model
Use Case Lifecycle
System Design
Mapping the Architecture Before Building the Experience
Before diving into wireframes and UI, we worked closely with our Data Science and Engineering teams to map out both the technical data architecture and the end-to-end lifecycle of a Use Case, ensuring every design decision was grounded in how the system actually worked.
DATA MODEL
How a Question Becomes an Answer
This diagram shows how a Product Owner uploads documents to the Ingest Server and how the Consumer interacts with the ChatServer. It also displays the inner workings of the Ingest Server with Langchain JS and Embeddings, as well as the dynamics of the embeddings reaching the Vector Database, and the process of the question embedding to semantic search, to Vector DB, to ranked results, LLM API Call at Azure or OpenAI, and finally the answer returning to the user.
System Design
Mapping the Architecture Before Building the Experience
Before diving into wireframes and UI, we worked closely with our Data Science and Engineering teams to map out both the technical data architecture and the end-to-end lifecycle of a Use Case, ensuring every design decision was grounded in how the system actually worked.
Data Model
Use Case Lifecycle
DATA MODEL
How a Question Becomes an Answer
This diagram shows how a Product Owner uploads documents to the Ingest Server and how the Consumer interacts with the ChatServer. It also displays the inner workings of the Ingest Server with Langchain JS and Embeddings, as well as the dynamics of the embeddings reaching the Vector Database, and the process of the question embedding to semantic search, to Vector DB, to ranked results, LLM API Call at Azure or OpenAI, and finally the answer returning to the user.
Collaboration
Gelling with the Data Science Team
For several weeks leading up to engineering kickoff for this project, our scrum team was introduced to a team of Data Scientists, who joined our morning standups and other sprint ceremony meetings. This allowed us to form a working relationships and see things from one another’s perspective.
Wireframes
Sketching Screens for Use Cases
We used low-fidelity sketches to validate concepts with leadership. (Include some details - make up something about feedback from stakeholders about the “Use Cases Index” page on what information would be most critical to see in the data table from each index.)Aligning with Engineering for the MVPTo ensure the MVP met all technical requirements, we held regular sync meetings with the engineering team. These sessions were crucial for aligning on the technical feasibility of our designs and making necessary adjustments based on engineering feedback.
Design
Design
Request Website
Request Website
This page serves as a landing page stating “Welcome to SpectrumGPT” and a button to request a use case. The page also displays example prompts, a preview of the chatbot, info about the available LLMs, Frequently Asked Questions, and a way to reach out with additional questions.
Design Slideshow
End User Experience
This includes the Chatbot interaction, with tabs on the left for chat titles and the chat interface in the center. It also includes a drawer for chat settings.
Chat Settings
This drawer feature allows the user to update settings during a live chat session, including Conversation Name, Writing Style and Tone.
Intake form - Information
The chatbot request intake Form is broken into three steps - Information, Chat Comparison, and Finalize.
Intake - Chat Comparison
This step allows the user to test out different LLMs, and decide which model to use for their team's chatbot.
Use Case Index
This page includes a search and filter, a table of active use cases, and a CTA button for a user to “Request a use case.”
Use Case Overview
After the user clicks on the blue text link from the User Index with the Use Case name, they are directed to the Use Case Overview page.
Global Documents
This tab has a table with documents that may be frequently used for different use cases, along with a search and a way to add a document.
Learn Drawer
The Use Case Overview page features a link for “Learn” which opens a drawer presenting helpful information about whichever tab the user is currently on.
Form Editor
The Form Editor is a page that allows chatbot supervisors to modify the Use Case Input form. The patterns on this UI are reused from
Form Editor
The Form Editor is a page that allows chatbot supervisors to modify the Use Case Input form. The patterns on this UI are reused from
Focus Groups
Recieving feedback
We presented our prototype flows to individual contributors and managers from our key focus departments including: • Press Release • Customer Service • IT Specialists
Design Update
Change Jira Status from Use Case Overview
We recieved feedback that users would love to be able to change the status of the associated Jira ticket directly from the Use Case Overview page. After discussing with the engineering team, we determined that this feature would be technically feasible. The new design uses a tag with a drop menu to change the status.
Design Update
Change Jira Status from Use Case Overview
We recieved feedback that users would love to be able to change the status of the associated Jira ticket directly from the Use Case Overview page. After discussing with the engineering team, we determined that this feature would be technically feasible. The new design uses a tag with a drop menu to change the status.
Usability Testing
Testing Prototype Flows
One-on-one testing sessions with participants were conducted to evaluate user behaviors and prototypes for system improvements. During these sessions, we guided users through various scenarios, observing their interactions with the chatbot and admin tool. This allowed us to identify pain points and gather valuable feedback for refining the user experience. For example, users found the “Use Cases Index” page particularly useful but suggested adding a column for the “Last Updated” date to keep track of recent changes.
Design Updates
Adjustments to Role Assignment
We made several adjustments to the design as a result of feedback:For the Role Assignment tab on the Use Case Overview page, we simplified the experience significantly. Initially, at the request of our engineering director, we had used three sections to add different types of users - End Users, Administrators, and Watchers. The updated design includes a simple two column layout with a search directory on the left and Assigned Users on the right. It maintains the distinction of roles by adding a piece of text under the users name within their profile row.
Design Updates
Adjustments to Role Assignment
We made several adjustments to the design as a result of feedback:For the Role Assignment tab on the Use Case Overview page, we simplified the experience significantly. Initially, at the request of our engineering director, we had used three sections to add different types of users - End Users, Administrators, and Watchers. The updated design includes a simple two column layout with a search directory on the left and Assigned Users on the right. It maintains the distinction of roles by adding a piece of text under the users name within their profile row.
Retrospective
Reflecting on Performance
Reflecting on the project, several successes and areas for improvement stand out. One of the major successes was the seamless collaboration between design, engineering, and research teams, which ensured a well-rounded and user-centric product. The iterative design process, supported by continuous user feedback, was crucial in refining the tool to meet user needs effectively.However, there were challenges as well. Initially, aligning the technical feasibility with our design vision required several rounds of adjustments and compromises. Additionally, ensuring data security while maintaining a user-friendly experience was a delicate balance that required ongoing attention. This project reinforced the importance of cross-functional collaboration and the value of iterative design. It also highlighted the need for thorough user research and testing to create a product that truly meets user needs. In future projects, I will prioritize early and frequent alignment with engineering teams to mitigate technical feasibility issues. I will also advocate for more extensive user testing phases to catch potential usability issues earlier in the design process.
Retrospective
Reflecting on Performance
Reflecting on the project, several successes and areas for improvement stand out. One of the major successes was the seamless collaboration between design, engineering, and research teams, which ensured a well-rounded and user-centric product. The iterative design process, supported by continuous user feedback, was crucial in refining the tool to meet user needs effectively.However, there were challenges as well. Initially, aligning the technical feasibility with our design vision required several rounds of adjustments and compromises. Additionally, ensuring data security while maintaining a user-friendly experience was a delicate balance that required ongoing attention. This project reinforced the importance of cross-functional collaboration and the value of iterative design. It also highlighted the need for thorough user research and testing to create a product that truly meets user needs. In future projects, I will prioritize early and frequent alignment with engineering teams to mitigate technical feasibility issues. I will also advocate for more extensive user testing phases to catch potential usability issues earlier in the design process.
Thanks for stopping by 👋
Feel free to dive into more of my
case studies below.
Thanks for stopping by 👋
Feel free to dive into more of my case studies below.
