UX/UI Design

w3DA CMS

w3 Digital Assistant CMS

 

overview

The w3 Digital Assistant is an automated assistant that users interact with through a chat interface on their employee homepage. Content managers work with SMEs to create content for the w3 Digital Assistant. This process initially involved tracking content and status in large spreadsheets. The goal of this project is to create a tool to manage this content creation process replacing spreadsheets.

My role was the UX designer for the CMS. I worked with a team of UX designers working on other parts of the project, a visual designer and the development team.

Problem

The process for adding content into the w3 Digital Assistant is long and complicated for content managers and SMEs.

 

Background research

I conducted user interviews with our content creation team to understand the current process. From these interviews I:

  • Produced an As-Is scenario

  • Identified pain points

  • Created user needs

 

As-is scenario

 

pain points

  • Planning what content needs to go into the w3DA. What are distinct questions with unique responses?

  • Difficult to input information into excel. Text editing/formatting, and envisioning how responses will look in the assistant.

  • Keeping track of the review process. Multiple people have to approve content (POs, content editors, style editors), while also preserving original information

  • Maintaining development tasks in Jira is time consuming

  • Keeping track of status after an item is initially completed. Knowing which pieces of content have been updated and need to be reviewed

 

user needs

  • As a PO inputting content into w3DA, I need guidance on how to approach planning out w3DA content for my topic area, so I when I enter the CMS, I know exactly what to do

  • As a PO inputting content into w3DA, I need a way to input and edit text so that I can create rich content and preview how it will look for the end user

  • As a PO inputting content into w3DA, I need a way to create and edit content just within my team before submitting it for review, so that reviewers only have to look at content that is ready for them

  • As a PO inputting content into w3DA, I need a way to see how far a long an item is in the review process so I can get a sense of what work still needs to be completed and who needs to work on it

  • As a PO inputting content into w3DA, I need a way for myself, reviewers, and developers to all be able to access the same information at one place as it passes through each step, so content doesn't have to be logged in multiple places

  • As a PO inputting content into w3DA, I need a way to see the most recent updates to an existing item, so I can easily tell which content has changed in an edit

 

competitive analysis

I completed a competitive analysis focusing on similar tools such as

  • Google Dialog Flow

  • Microsoft Azure Bot Builder

  • Amazon Lex

Tools were analyzed for:

  • What language they used (intent, response, etc)

  • Overall navigation and layout

  • Features

 

Design planning

I worked with our development team to understand how the digital assistant worked and what data was needed from users. I used this information and interviews from our content team to begin building a user flow and build low fidelity mockups. 

user flow

Early user flow of CMS featuring extra functionality

The initial user flow focused creating an “intent” and its associated response. It also included a path to disambiguate responses based on information from an end user

low fidelity mockups

Low fidelity mock ups featured a tabs/progress bar layout where users moved through the data entry process viewing only one section at a time

 

Simplify flow

Due to expanding complexity and limited timeframe, we decided to limit our scope to only simple “Q&A” type responses. These flows would include only core functionality of inputting training data and then a single response without extra functionality

User flow example 1
User flow example 3
User flow example 2
User flow example 4
 

high fidelity mockups

Design mockups were created for each flow, and we decided to move into user testing with a side navigation design. This allowed users to switch between topic area in a top level bar and switch between their specific “intents” data/content with the side navigation. Users would also be required to submit their content to be reviewed at the topic level before it could be published.

 

user testing

Our 2 content designers were shown our design prototypes and walked through how they would use the tool to replace their existing content creation process

Methods

  • 2 participants, content designers

  • Conducted 30 minute tests

  • Users were shown prototypes and asked go through the process of creating content for the w3 DA

Key findings

  • Users found the form inputs clear

  • Users were uncertain if filled fields were editable or read only

  • Users understood the key concepts, but recommended new users would require more additional information and definitions for unfamiliar terms

  • The review process for topics was not clear to users. They did not expect to have to do this and were unaware that clicking “submit for review” applied to an entire topic instead of a single intent

  • Users had some difficulty finding items within the side navigation

Design Recommendations

  • Existing intents should be read only with a clear “edit” button

  • Make it more clear which actions affect an entire topic and which are only for intents

  • The hierarchy between topics and intents should be more clearly mirrored in the design

  • Use more pages to simplify the UI and remove clutter in the side navigation

  • Add more contextual information to the design around unfamiliar concepts and processes

 

final designs

The designs were updated based on feedback from user testing and the team. These would be passed to the development team to create a functional, first version of the CMS.

 

Landing dashboard

High fidelity mock up of CMS landing page

The design has a landing dashboard where users can manage topics and access help content to make sure they are prepared to create content.

 

Topic table

High fidelity mockup of CMS topic table

The final design moved the list of intents for a given topic to its own page with a table as some topics could have 10+ intents which could overwhelm a side navigation. We also wanted to be able to more clearly show the status of each intent and relevant data visible on one screen for all the intents in a topic. There are also multiple topic level interactions such as submitting for review, and having a separate page creates a more clear hierarchy between topic and intent in the UI.

 

View intent

High fidelity mockup of view intent page

Clicking on an intent shows its status and associated content.

 

edit intent

High fidelity mockup of edit an intent page

An edit button allows users to clearly see when they are making changes and what information has been saved.

 

next steps

  • This is an initial design with limited functionality with the goal of replacing existing spreadsheets

  • The team will continue to test these designs and begin recruiting a base of pilot users

  • Feedback from new users will drive prioritization and creation of new features will the goal of creating a full CMS experience such as:

    • More robust content review functionality

    • Full version history

    • Content testing with Digital Assistant UI

    • Ability to create more complex types of responses