MethodsWireframing
What
A simple visual representation of a product or service interface.
Why
To prioritize substance and relationships over decoration as you begin defining the solution. Wireframing also gives designers a great opportunity to start asking developers early questions about feasibility and structure.
Templates
- App Wireframing (Miro)
- Website Wireframing (Miro)
- USWDS Design Files (Sketch)
How to do it
- Build preliminary blueprints that show structure, placement, and hierarchy for your product. Steer clear of font choices, color, or other elements that would distract both the researcher and the reviewer. Lightweight designs are conceptually easier to reconfigure. A few helpful tools for building wireframes are OmniGraffle and Balsamiq, which purposefully keep the wireframe looking like rough sketches.
- Use this opportunity to start listing what UX/UI patterns you will need.
- Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?
- Use the wireframes to get the team’s feedback on feasibility and structure.
Considerations for use in government
No PRA implications. No information is collected from members of the public.