hackforla / hackforla/HomeUniteUs

Design: Update "Profile Overview" Wireframes to High Fidelity

Open
#906 0 comments 0 reactions 1 assignee Claimed by @michaelsgruen View on GitHub
Complexity: Medium Milestone: missing p-Feature: Application Guest p-Feature: Application Host Project: Missing Role: Design size: 2pt
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 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 accommodate
- [ ] Apply components to every aspect of the design
- [ ] Show all states of all components with different states such as the navigational buttons
- [ ] Indicate the non-linear nature of the Profile Overview page
- [ ] 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 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
---

### 📋 Deliverables
*What specific design artifacts are expected?*
- [ ] Guest Profile Overview
- [ ] Host Profile Overview
- [ ] All states of components with various states, and an indication that the Profile Overview supports a non-linear application flow

### ⚠️ 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.
- [ ] 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: Add link to Figma and Screenshots
- [ ] Design review and approval completed
- [ ] Designer and Product: Review with Engineering for questions
- [ ] 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.