Skip to content

Design: Update "Profile Overview" Wireframes to High Fidelity #906

@michaelsgruen

Description

@michaelsgruen
Member

🧩 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]

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @michaelsgruen

      Issue actions

        Design: Update "Profile Overview" Wireframes to High Fidelity · Issue #906 · hackforla/HomeUniteUs