Search experience

[KatyMawhood]

Epic Checklist

For this ticket to be considered done the following checklists must be complete

UX Strategy

• [x] Complete a UX Canvas for this epic https://www.figma.com/file/bMOWtfKUYhmvRdsqc5fZjG/Design-sprint-framework?node-id=94%3A18

Competitive analysis

• [x] Conduct analysis

• [x] List MVP requirements we want to adapt for our designs

• https://docs.google.com/spreadsheets/d/1oQMCZimkb4DlTFk-H5tYhaEeDB63H6jPqDTWXhfu_PQ/edit?usp=sharing

• https://docs.google.com/spreadsheets/d/1TQuTuGixBCHLZuww8C7YYFutEKl7YeS0SHxgXOsU9gk/edit?usp=sharing

Sketching

• [x] Crazy 8 Sketching workshop for each frame
• [x] Vote for main features from sketches we want to pull into wireframes https://www.figma.com/file/bMOWtfKUYhmvRdsqc5fZjG/Design-sprint-framework?node-id=0%3A1

Wireframes for search experience

Wireframe for search parameters page

• [x] 1st wireframes done
• [x] Design critiqued by UXers
• [ ] Design iterated based on critique
• [ ] Design critiqued by team/stakeholders

Wireframe for results page

• [x] 1st wireframes done
• [x] Design critiqued by UXers
• [ ] Design iterated based on critique
• [ ] Design critiqued by team/stakeholders

Wireframe for detailed results page

• [x] 1st wireframes done
• [x] Design critiqued by UXers
• [ ] Design iterated based on critique
• [ ] Design critiqued by team/stakeholders

UI Design

• [ ] Decide on colours
• [ ] Decide font family and size
• [ ] Review for consistency

Hi-fi designs

• [ ] Hi-fi design of search parameters page
• [ ] Hi-fi design of search results page
• [ ] Hi-fi design of detailed results page

Interactive elements have all states defined.

• [ ] Default
• [ ] Focus (desktop only)
• [ ] Hover/Tap
• [ ] Inactive (if applicable)
• [ ] Loading (if applicable)
• [ ] Error (if applicable)

Interactive design details.

• [ ] Interaction notations written to describe how one screen transitions to the next. If the interactions are complex, an interactive prototype is created in Principle.
• [ ] Highlight interaction hit boxes for each screen
• [ ] Create flow diagram for each device.
• [ ] Create an alignment grid for each screen type.

Review consistency.

• [ ] Padding is consistent across screens and devices.
• [ ] Font sizes are consistent across screens and devices.
• [ ] Text, buttons, and data elements use accessible colors.
• [ ] Check all designs and notes for spelling errors.

Assets are ready for export

• [ ] SVG
• [ ] PDF
• [ ] Icon Font

Figma prototypes created and shared with the development team.

• [ ] Desktop
• [ ] Iphone
• [ ] Ipad

Produce design pack for developer

• [ ] Design spec made
• [ ] Design spec reviewed by developer
• [ ] Design spec handed over to developer

High-level overview incorporating "search", "results", and "detailed results" for mobile and desktop.

[Daniel-silve1ra]

Epic Checklist

UX Strategy

• [x] Complete a UX Canvas for this epic https://www.figma.com/file/bMOWtfKUYhmvRdsqc5fZjG/Design-sprint-framework?node-id=94%3A18

Competitive analysis

• [x] Conduct analysis

• [x] List MVP requirements we want to adapt for our designs

• https://docs.google.com/spreadsheets/d/1oQMCZimkb4DlTFk-H5tYhaEeDB63H6jPqDTWXhfu_PQ/edit?usp=sharing

• https://docs.google.com/spreadsheets/d/1TQuTuGixBCHLZuww8C7YYFutEKl7YeS0SHxgXOsU9gk/edit?usp=sharing

Sketching

• [x] Crazy 8 Sketching workshop for each frame
• [x] Vote for main features from sketches we want to pull into wireframes https://www.figma.com/file/bMOWtfKUYhmvRdsqc5fZjG/Design-sprint-framework?node-id=0%3A1

Wireframe for search parameters page

• [ ] Wireframe done
• [ ] Design critiqued
• [ ] Design iterated based on critique

Wireframe for results page

• [ ] Wireframe done
• [ ] Design critiqued
• [ ] Design iterated based on critique

Wireframe for detailed results page

• [ ] Wireframe done
• [ ] Design critiqued
• [ ] Design iterated based on critique

UI Design

• [ ] Decide on colours
• [ ] Decide font family and size
• [ ] Review for consistency

Interactive elements have all states defined.

• [ ] Default
• [ ] Focus (desktop only)
• [ ] Hover/Tap
• [ ] Inactive (if applicable)
• [ ] Loading (if applicable)
• [ ] Error (if applicable)

Interactive design.

• [ ] Interaction notations written to describe how one screen transitions to the next. If the interactions are complex, an interactive prototype is created in Principle.
• [ ] Highlight interaction hit boxes for each screen
• [ ] Create flow diagram for each device.
• [ ] Create an alignment grid for each screen type.

Review consistency.

• [ ] Padding is consistent across screens and devices.
• [ ] Font sizes are consistent across screens and devices.
• [ ] Text, buttons, and data elements use accessible colors.
• [ ] Check all designs and notes for spelling errors.

Assets are ready for export

• [ ] SVG
• [ ] PDF
• [ ] Icon Font

Figma prototypes created and shared with the development team.

• [ ] Desktop
• [ ] Iphone
• [ ] Ipad

Product design pack for developer

• [ ]

[KatyMawhood]

@Daniel-silve1ra I'm checking over some stories, and I can see a few that we will need to link into these pages.

Detailed results: links / pages

• 130 "Entry Correction page"

• 131 "Add a postem page"

• 132 "Transcribe page"

[PatReynolds]

Anything more to be done on this epic, or can it be closed?

[PatReynolds]

What phase is this now? It has one issue - phase 5+

[PatReynolds]

@Daniel-silve1ra to review on testing environment - making new stories as needed.