Challenger Manager's Dashboard (Phoenix)

[r-bartlett-gsa]

Note: This work needs to be deployed to challenge portal eval dev environment (challenge_gov repo > eval main branch)

User Story

As an user with a challenge manager role, in order to know the full scope of site features available for my role, I would like a dashboard-like page that lists role-specific features.

Acceptance Criteria:

• User with assigned challenge manager role can navigate to the following Challenge.gov features via a dashboard page on the Phoenix app:
  • Challenges
    • Takes the user to the Phoenix app where the user can manage challenges (existing feature)
  • Evaluation Forms
    • Takes the user to the Rails app where the user can create and manager evaluation forms, Evaluation forms list Challenge_platform#60
    • Temp link on eval dev: https://challenge-dev.app.cloud.gov/evaluation_forms
  • Submissions & Evaluations
    • Takes the user to the Rails app where the user can manage submissions and evaluation process, Submissions List View for Challenge Managers Challenge_platform#59
    • Temp link on eval dev: https://challenge-dev.app.cloud.gov/manage_submissions
  • Message center
    • Takes the user to the Phoenix app, where the user can access the existing Message Center section
  • Analytics
    • Takes the user to the Phoenix app, where the user can access the existing Analytics section
  • Resources
    • Takes the user to the user guides content on challenge.gov website

Development tasks:

• Task 1
• Task 2

Definition of Done

Doing (dev team)

• Code complete
• Code is organized appropriately
• Any known trade offs are documented in the associated GH issue
• Code is documented, modules, shared functions, etc.
  - [ ] Automated testing has been added or updated in response to changes in this PR
• The feature is smoke tested to confirm it meets requirements
  - [ ] Database changes have been peer reviewed for index changes and performance bottlenecks
• PR that changes or adds UI
  • include a screenshot of the WAVE report for the altered pages
  • Confirm changes were validated for mobile responsiveness
• PR approved / Peer reviewed
• Security scans passed
• Automate accessibility tests passed
• Build process and deployment is automated and repeatable
  - [ ] Feature toggles if appropriate
• Deploy to staging
• Move card to testing column in the board

---

Staging

• Usability testing: mobile and desktop (Tracy or Marni)
• Accessibility tested (Marni)
  • Keyboard navigation
  • Focus confirmed
  • Color contrast compliance
  • Screen reader testing
• Cross browser testing - UI rendering is performant on below listed devices/browsers (Tracy or Marni)
  • Windows/Chrome
  • Windows/Edge
  • Mac/Chrome
  • Mac/Safari
  • iOS/Safari
• AC review (Renata)
• Deploy to production (production-like environment for eval capability) (dev team)
• Move to production column in the board

---

Production

• User and security documentation has been reviewed for necessary updates (Renata/Tracy/Dev team)
• PO / PM approved (Jarah or Renata)
• AC is met and it works as expected (Jarah or Renata)
• Move to done column in the board (Jarah or Renata)

[r-bartlett-gsa]

[r-bartlett-gsa]

@stepchud Since this work was not started yet, should we move it to O&M team?

[jairoanaya]

@r-bartlett-gsa please address the following design validation in order to continue: https://docs.google.com/document/d/1oQvEK4wbFyvwNHswglthWheYlk2fdRrJryaudtk6068/edit?usp=drive_link

[r-bartlett-gsa]

@jairoanaya To answer your questions:

• Please use the designs provided in the comment above
• Yes, the side nav needs to be removed
• The links to Submissions & Evaluations and Evaluation Forms are provided in the acceptance criteria

[jairoanaya]

@r-bartlett-gsa to confirm:

The Submissions & Evaluation and Evaluation Forms links should be available to Admins also.
The internal header should be with H1 instead of H2 as shown in the images below to follow eval design pattern.
The util menu should be updated as well even if not listed in the acceptance criteria but shown in previous images.

[r-bartlett-gsa]

@jairoanaya Please see my answers below:

The Submissions & Evaluation and Evaluation Forms links should be available to Admins also.

No, not at this time. While the design will change for Amin users, the dashboard options should not.

The internal header should be with H1 instead of H2 as shown in the images below to follow eval design pattern.

Yes, the header should be H1, and it should say "Dashboard".

The util menu should be updated as well even if not listed in the acceptance criteria but shown in previous images.

Yes, per our convo in #1364, the utility menu should reflect the dashboard options: #1364 (comment)

[jairoanaya]

Evidence of deployment:
WAVE Rerport

Feature implemented:
Desktop

Challenge manager

Non challenge manager

Responsive

Notice util nav is updated.
Feedback discussed on this card has been implemented.

Pending PR Acceptance and staging validation to close card.

[jairoanaya]

Work done:

• Code understanding from challenge_platform
• Code was adapted from challenge_platform
• Team feedback document created on Google - https://docs.google.com/document/d/1oQvEK4wbFyvwNHswglthWheYlk2fdRrJryaudtk6068/edit?usp=drive_link
• Team feedback received for implementation
• Feature implementation on dashboard, util nav and removing side nav.
• CSS update
• Testing in Desktop and Responsive
• Deploying into staging https://challenge-portal-eval-dev.app.cloud.gov/
• Completing card Acceptance Criteria and required evidence of development
• Feature ready for testing on staging

[r-bartlett-gsa]

@jairoanaya Below is my feedback:

• For challenge manager role:
  • Remove dashboard page subtitle text "Engage with the features below to manage your workflows"
  • Change "Challenge management" to "Challenges", and remove "Create a new challenge"
  • Change Challenges card subtitle to "Create and manage your challenges."
  • Change "Help" to "Resources" and the subtitle to "Learn how to make the most of Challenge.gov and find support."
  • Add "Resources" to utility nav
  • Design screenshots for reference: Challenger Manager's Dashboard (Phoenix) #1388 (comment)
• For all user roles:
  • Mobile utility nav: add line break between icons and titles
  • Now that side nav is removed, either reduce the page width (as on rails app) or add side margins
    

[jairoanaya]

@r-bartlett-gsa I acknowledge the feedback. I expect to submit this feedback for PR on Monday 11/4 the latest.

[jairoanaya]

Feedback submitted for PR. Expecting PR acceptance.

[jairoanaya]

I confirm the latest updates is deployed on https://challenge-portal-eval-dev.app.cloud.gov/ and working as expected
You can see the PR here #1463

[r-bartlett-gsa]

Thank you @jairoanaya! Looks great.

[mhotch24]

@r-bartlett-gsa

Usability Findings:

• Upper case 'Center' in 'Message center' card
• Upper case 'Toolkit' in "Agency toolkit' card.

Feature A11y finding:

• Cards: Screenreader is blending card title right into supportive text. Try code semantically and put them in wrapping block level tags. Possibly wrap each line in a p or div tag, and then the screen reader will separate them properly.

General A11y finding:

• Skip to Main Content is not fully setup acrossRails and Eval-dev due to body content area not having appropriate ID: id="main-content".
• 'Find a Challenge' voices 'Active Challenges'. It needs to say 'Find a Challenge'.

[r-bartlett-gsa]

@jairoanaya Please address the following accessibility issue:

Screenreader is blending card title right into supportive text. Try code semantically and put them in wrapping block level tags. Possibly wrap each line in a p or div tag, and then the screen reader will separate them properly.

[jairoanaya]

@r-bartlett-gsa @mhotch24 the following feedback has been implemented and deployed to https://challenge-portal-eval-dev.app.cloud.gov/

• Upper case 'Center' in 'Message center' card
• Upper case 'Toolkit' in "Agency toolkit' card.
• Screenreader is blending has been resolved.

Important: Voice over have been resolved on #1362 , id="main-content" I believe is not necessary, current behavior is consistent with eval. Please double check.