Create project detail page (existing design)

[uxforgood]

Scenario

User can navigate to a place that provides more in-depth detail about a specific individual project (existing design) in a test environment.

Acceptance Criteria

• User can navigate to a place where they can read detailed information about a specific project
• User can learn about:
  • the goal of the project
  • the phase it's in and overall timeline
  • who submitted and worked on it
  • the outcome of the project (if any)
  • where to learn more

Tasks

• Design how user gets to project detail page @npage123
• Write project 1 @maomeara63
• Design project detail page using existing 10x branding @npage123
• Build detail page

Definition of Done

Product Owner

• Acceptance criteria is met

UX

• Content and design are reviewed to ensure they meet persona needs
• Business test scenarios to meet all acceptance criteria are
• Usability is validated on desktop and mobile devices
• Wiki / documentation is updated (if applicable)

Engineering

• Automated test scripts are written
• New screens are added to pa11y scripts
• Site can be navigated with keyboard and macOS voiceover https://www.apple.com/voiceover/info/guide/_1124.html
• READMEs, other appropriate docs, JSDocs and swagger/APIs are fully updated
• UI is touch optimized and responsive
• Module dependencies are up-to-date and are at the latest resolvable version (npm update)
• Code is refactored for clarity and to remove any known technical debt
• Deployed to the stage environment

[npage123]

@willcahoe @uxforgood @maomeara63 @kimschulke @plummer-flex @sstatz
Good morning all! Here's the project detail page mockup. Please take a look and provide any feedback. Fairly basic content layout to match that of the existing website. Different subsections are divided by a dark horizontal rule. Thinner and lighter horizontal rules for bullet point like information. I'm wondering if some of the learn more links need more user friendly verbiage? Just a thought.

[npage123]

Good afternoon @willcahoe and Nico! Here's the updated project detail page mockup (below numbered feedback list) per feedback received from standup this morning. Please take a look and provide any feedback by end of day if possible with it being the end of the sprint. Feedback received this morning included:

1. Sentence case for headings
2. Fix bullet list - add check marks
3. Remove lines between goals and next section
4. Move team to bottom
5. Why this matters - apply card treatment - grey box with color border
6. Fix header sizes to match current
7. Match top header to project summary box format where name of project is in gold/yellow color

CC: @uxforgood @maomeara63 @kimschulke @plummer-flex @sstatz

[plummer-flex]

Under "At a glance", the Phase info doesn't match our content structure. We have a Phase (1,2,3,4) and a Status (In Progress, Done, Graduated). Maybe something like [phase] - [status]? Ex: "Phase 3 - Graduated".

Also does it make sense to move the At a Glance info higher on the page? Like a TL;DR?

[uxforgood]

@plummer-flex love that idea! @npage123 let's try moving the at a glance under Overview section. And the content is FPO right now, but we should make sure that the Phase language matches what we're using on the portfolio page.

[npage123]

Sounds good @uxforgood. Here's a version with the 'At a glance' moved up.!

CC: @plummer-flex

Project Detail Page.jpg

[kimschulke]

Test Cases

User clicks on project portfolio box from Our Projects page

• On click color box displays around project portfolio box
• On release of click, color box changes color

User views project detail page

• Project title appears at top in red/orange font

• Project goal appears in bold black text

• Project type appears under goal

User views content in the following order (all sections separated by a line):

• Overview

• Our goal including How we did it, Where we are today and Why this matters

• Next steps with bulleted check marks

• Team

• Learn more