Design Prototype for Knowledge Base Landing Page

[gracekretschmer-metrostar]

User Story or Problem Statement

As a UX designer, I want to create a Figma prototype for the Knowledge Base landing page to test for effectiveness and usability with cms editors.

As an editor, I want to navigate to the Knowledge Base landing page and feel empowered to find any/all of the information I require to continue to complete my editor-based goals.

Assumptions

• KB needs to be redesigned
• KB search functionality needs to be more robust
• KB Accessibility should to be addressed

Description or Additional Context

In the UXR study, it was noted that currently the knowledge base landing page is

• outdated. Minimal iterative work has been done since the release of the MVP.
• uninviting and confusing to navigate. The layout is needs to be rethought to drive engagement for all user levels.

The ticket #8136 will address the assumption "KB search functionality needs to be more robust".

Hypothesis

By redesigning the KB landing page to enhance user experience (UX), we anticipate that editors will engage more effectively with the KB by:

• Facilitating information retrieval: Editors will be able to easily locate the specific information they need to advance further in their tasks.
• Enabling efficient navigating: The redesigned landing page will empower editors to efficiently navigate KB content, enabling them to quickly find the relevant information they are seeking.
• Providing comprehensive support: The updated KB landing page will offer continuous assistance and guidance to editors throughout their entire KB journey, ensuring they feel supported and confident in their actions.

Steps for Implementation

• Create a prototype for the CMS team to review and provide feedback.
• Incorporate the team's feedback into a prototype for CMS PO's approval.

Acceptance Criteria

• As CMS team member, I can understand how the prototype can be translated into a new knowledge base landing page within the Drupal CMS and provide feedback for improvements.
• As a Drupal developer, I want to understand how a path forward on how to update the knowledge base landing page.
• As an editor, I can easily understand the purpose of the landing page within the first few seconds of viewing it.

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• Accelerated Publishing

Tasks

Preview Give feedback

1. Analyze HelpDesk Tickets #18113
   CMS Team Research +2
   
2. Utilize HelpDesk findings by applying the most utilized on landing redesign

[MDomngz]

Notes determined as I dig into Figma files and systems -

• The "CMS veteran experience" is equivalent to "Veteran-Facing"
• The "Editor experience" is equivalent to "Editor-Facing"
• The CMS editor UX/UI is mostly supplied by the Drupal Design System.
• Drupal works to provide a system that is consistently iterated in terms of accessibility, form, and functionality.
• Much of the Drupal CMS system is form-fields and content creation with the Knowledge Base being the only exception. The KB is set up similarly to a wiki with a search option. The template structure of the KB consists of a Landing page and an Article page. This ticket is speaking to the landing page template.
• Mural link used to consolidate and align CMS Design System work amongst the team

[MDomngz]

Pinned research findings - Card Sort Activity Specifically
The card sort activity was conducted to determine how editors think and categorize the KB content. Interviewees were given a set of article titles and asked to group them into what they believed to be logical sets based on their understanding as editors. It's important to note that interviewed editors' CMS understanding varied based on the frequency of their need of use. Some editors require 1x a month and some are on the system every day of the week.

• Grouped items that relate to telling the veteran's story
• The most challenging group is 'after getting started'; unsure how to move forward without proper awareness of content sections
• Grouped VAMC and VC items separately
• Broke out "CMS Functions" into a separate "media stuff" group
• "CMS Functions group relates to things anybody can do in Drupal"
• Broke into two; "CMS Functions" group and "Content" group
• "CMS Functions" should include "add/edit/remove" items
• Cross-listing popular links is supported
• VAMC "I'm a vet center. It's not my page, so I don't care about it." There could be UX value in hiding irrelevant articles for the user groups that they don't apply to. "It would keep them from getting lost"
• VC Landing = "homepage"
• Divide into three large groups: General CMS Knowledge, Local Vet Center Info, and Other Things
• Another request to divide by "General how-to's, VAMC how-to's, and VC how-to's"
  - I want to be able to break the larger, How-to column into smaller categories

[srancour]

I added some comments onto the prototypes

[gracekretschmer-metrostar]

Scope to internal testing with CMS team and related product teams (lead: Amanada K.). Later, reach out to editors, but that will be a bigger lift.

[MDomngz]

Working Prototype link for Knowledge Base Landing
https://www.figma.com/file/KDbDZdukzNBLjObpjtMq2b/CMS-Knowledge-Base?type=design&node-id=1%3A5&mode=design&t=lgnriZKubmfwDDaC-1

• Accessibility has provided feedback (Steve)
• Next steps, meet with Grace to discuss next steps for testing with supporting teams

[EWashb]

@aklausmeier FYSA- the team will reach out to you when they are ready for your review

[anantais]

@MDomngz I confirmed with Edmund that there is a storybook but it would need a LOT of work to complete and we probably will not have capacity for a while. I will take a look at what we currently have for design elements and how we handle them. I should have more info tomorrow regarding the path forward on the dev end.

[MDomngz]

I met on Friday to discuss the design ticket with the developer, Amanda (@anantais)

• She is going to assess and return with an estimate on the lift; we discussed the possibility of going with a simple, single-column layout vs a more complex, tab with an active area layout.
• Considering the limited state of the CMS design system at this point, the work is going to require custom coding. However, we are working with the forward mindset of "build, test, and re-use."
• A consistent amount of the proposed solution reference design work completed by the Facilities team within their editor-facing solutions.

@anantais please provide an estimate for the dev lift, along with your recommendations. Thank you!

[aklausmeier]

@MDomngz Let me know when you're ready to loop me in. I'll make time to review/support you as you need.

[MDomngz]

Thank you, @aklausmeier! I will keep you posted.

[MDomngz]

@MDomngz I confirmed with Edmund that there is a storybook but it would need a LOT of work to complete and we probably will not have capacity for a while. I will take a look at what we currently have for design elements and how we handle them. I should have more info tomorrow regarding the path forward on the dev end.

Apologies, Amanda, I did not notice your comment above. Thank you for the update!

• yes, you are correct (and so is Edmund). The current state of the CMS design system within Storybook is limited. And that's putting it lightly. We will have to custom code most of this page but what we need to understand from you is, what is the estimated time lift for each version? That information will help our team decide which route to take. We need to make quick progress so I lean towards the simple version but I am interested in hearing what you think.
• also, we may be able to 'recycle' some code from what the Facilities team has put in place prior for editor-facing.

[gracekretschmer-metrostar]

To do: schedule a review and sign off with Erika and Amanda C.

[anantais]

Here are some notes that should be added to the dev ticket when it is created.

A quick breakdown of the structure of the current KB:

• CMS Knowledge Base (menu) - /admin/structure/menu/manage/documentation

• Article - /admin/structure/types/manage/documentation_page/fields
  ---References a Products taxonomy
  ---References a Sections taxonomy
  ---Related Articles
• Search Results - view - /admin/structure/views/view/knowledge_base_search_results
• KB Article Administrations -view - /admin/structure/views/view/knowledge_base_article_administration

While Storybook is typically used with decoupled frontend Drupal sites, it can also be used with the Drupal fronted - Twig. The article I found seems to break down some common issues.
Reference: https://medium.com/@askibinski/integrating-storybook-with-drupal-ddabfc6c2f9d

Lullabot also has a useful module for Storybook in Drupal: https://www.lullabot.com/articles/new-storybook-module-drupal

[MDomngz]

KB design update-

• need to work through a few pieces around the design system
• must simplify approach; go with a true MVP to vision (v2)
• what’s the parent-child relationship within the KB database? - 🤖 need to doc
• review current layouts in place for all internal pages
• outline sitemap w/ recommendations - 🤖 need to doc

KB Article Taxonomy

• research and review the current structure - 🤖 need to doc

Platform Release Log

• slack disco w/ Erika; she provided further context around the strategy and confirmed it was not present
• showed interest in getting it integrated, if it makes sense
• need to review the GH tix & provide a recommendation - 🤖 need to doc

[MDomngz]

Prototype Figma Link -
https://www.figma.com/proto/KDbDZdukzNBLjObpjtMq2b/CMS-Knowledge-Base?type=design&node-id=1-5&viewport=-26411%2C-7421%2C1&t=ApBJI1G3XNNubvpN-0&scaling=min-zoom&starting-point-node-id=274%3A1191

preview of the mockup: