hackforla / hackforla/HomeUniteUs
Design: Update "Profile Intake Application" Wireframes to High Fidelity
- Dominant language
- Python
- Stars
- 45
- Forks
- 22
- Avg merge
- 15d 1h
- Merged PRs (30d)
- 1
Description
### 🧩 Overview
This issue is for updating the Guest and Host "Profile Intake Application" to high fidelity using our design system components.
### 🧠 Context / Background
_Why are we doing this?_
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
Apply a level of polish to the application/forms/input screens (everything but the overview and profile review screens) part of the intake profile, to make it more friendly and usable.
### ✅ Success Criteria (Design-Specific)
*Validates that the design work itself is complete and meets quality standards (completed by PM) *
- [ ] Identify any elements of the wireframe that can't be accommodated by the design system
- [ ] Apply design system components to every element in the "Profile Review" screen, include all states of interaction
- [ ] Meets accessibility standards (WCAG 2.1 AA)
- [ ] Can be handed off to Engineering with clear assets and specs
### 🔁 Feedback Loops & Collaboration
- [ ] Design kickoff meeting scheduled
- [ ] Begin wireframes or discovery
- **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
---
### 📋 Deliverables
*What specific design artifacts are expected?*
- [ ] Profile Review for Guest
- [ ] Profile Review for Host
- [ ] All interactions / states shown
### 🔗 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.
- [ ] 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
- 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
### 🚀 Handoff Requirements
*What needs to be completed before this moves to engineering?*
- [ ] Designer and Product: Review with Engineering for questions
- [ ] Designer: Add link to Figma and Screenshots to a comment in the linked User Story
- [ ] Design review and approval completed
- [ ] Engineering handoff issue created
- [ ] All design assets uploaded and documented
---
### 📎 Resources & References
- Existing Research: [Link]
- Brand Guidelines / Design System: [Link]
- Previous or Related Designs: [Link]
Contributor guide
Assessment
This issue has not been assessed yet.