- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 21
Description
🧩 Overview
This issue is for updating the Guest and Host "Profile Overview" to high fidelity using our design system components.
🧠 Context / Background
Wireframes have been approved, we're ready to apply our design system.
🎯 Problem Statement
Moving to higher fidelity to apply our design system and improve the look and feel of the intake form.
👤 Target User(s)
Guest/Host
🎯 Goals & Objectives
Applying the design system will help validate our system and will really bring the flow to life.
✅ Success Criteria (Design-Specific)
*Validates that the design work itself is complete and meets quality standards (completed by PM) *
- Identify any wireframe elements that our system can't accommodateApply components to every aspect of the designShow all states of all components with different states such as the navigational buttonsIndicate the non-linear nature of the Profile Overview pageMeets accessibility standards (WCAG 2.1 AA)Can be handed off to Engineering with clear assets and specsTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
🔁 Feedback Loops & Collaboration
- Design kickoff meeting scheduledBegin work
- Review Cycles: [e.g., Weekly syncs, async feedback]
- Designer: Add screenshots of design and link to Figma page in comments
- Iteration 1 - Add to Figma with explanation/comments
- Iteration 2 - Add to Figma with explanation/comments
- Final iteration - Add to Figma with explanation/comments
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
📋 Deliverables
What specific design artifacts are expected?
- Guest Profile OverviewHost Profile OverviewAll states of components with various states, and an indication that the Profile Overview supports a non-linear application flowTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
⚠️ Known Risks or Open Questions
*(completed by PM) identifies uncertainties, potential blockers, or areas needing clarification that could impact the design work or project success. Gives designers a heads-up about potential challenges or decisions that haven't been finalized yet, so they can plan accordingly and flag issues early."
- Are there uncertainties that may affect design direction?
- Anything Engineering or stakeholders should weigh in on early?
🔗 Related Issues
- User Story: [Link]
- Research findings: [Link if applicable]
- Technical constraints: [Link if applicable]
Action Items
- Assign and Prep
- Designer: Review User Story and self-assign
- Designer: Conduct the necessary research (if applicable), clarify any questions
- Designer: Work with PM and Design Lead to clarify any questions about the User Story
- Designer: Designer work with Engineer team Lead to assign the appropriate size & complexity
- Designer/Design Lead: determine if work should be split into multiple issues, if so, create issue(s) and link them in this issue (if applicable) or create as standalone.
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel. - Designer/Design Lead: determine and provide "start and end date" for Product to update.
- Designer: Work with Design Lead to determine appropriate place/page to Draft Design in Figma
- Draft and Review:
- Designer: Draft Design
- Designer: Change Issue Status to "For Review/Feedback Needed"
- Designer: Add Label "Ready for: Design Peer Review"
- Design 1st Level/Peer Review: Review and compare against Acceptance Criteria, provide feedback in comment section below, tag assignee.
- Design 1st Level/Peer Reviewer: Change Issue Status to "Questions/Clarification" and add label "Ready for Dev Team"
- Designer (Assignee): Change Issue Status to "In Progress"
- Designer (Assignee): Review issue comment(s) and resolve accordingly
- Repeat above steps until all Acceptance Criteria are accounted and comments are resolved
- Design 1st Level/Peer Reviewer: Change Issue Status to "For Review/Feedback Needed" and add label "Ready for: Design Lead"
- 2nd final/Design Lead: Review and compare against Acceptance Criteria, provide feedback (if any) in comment section below, add label "Ready for Design Team Member"
- Repeat above steps until all Acceptance Criteria are accounted and comments are resolved
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel. - Let Product know that the design is ready for review
- Designer: Change Issue Status to "For Review/Feedback Needed"
- Designer: Add Label "Ready for: Product....Persona"
- Designer: Tag the PM of the related User Story in a comment below and let them know that a draft is ready for review
- Product: Review Design Screenshots and provide feedback
- Repeat above steps until design is approved
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
🚀 Handoff Requirements
What needs to be completed before this moves to engineering?
- Designer: Add link to Figma and ScreenshotsDesign review and approval completedDesigner and Product: Review with Engineering for questionsEngineering handoff issue createdAll design assets uploaded and documentedTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
📎 Resources & References
- Existing Research: [Link]
- Brand Guidelines / Design System: [Link]
- Previous or Related Designs: [Link]
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Activity
[-]Design: Update Profile Overview Wireframes to High Fidelity[/-][+]Design: Update "Profile Overview" Wireframes to High Fidelity[/+]