# Wireframes

Make wireframes and/or voice command flow

Within this stage we create a testable design based on a thorough understadning of users’ expectations and ''to-be'' user journey. Sketching, wireframes and/or voice command flow will help you ensure your service reflects your users’ needs. It is a reprsentation of a realistic form and functional service.&#x20;

<figure><img src="/files/x4LSXr2VrhrQcIjIfc7W" alt=""><figcaption><p>GovStack design patterns</p></figcaption></figure>

Wireframes and/or voice command flow enable direct examination of a design concept’s viability with users. It is helpful for gaining feedback on users’ intentions and various design elements and observing users' interaction with the product.&#x20;

The following are the wireframes developed for the Extended Producer Responsibility service in Rwan

{% tabs %}
{% tab title="Activities / Resources" %}

* Create a preliminary version of the service using [wireframes and/or voice command flow](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow). A good wireframe and/or voice command flow requires:
  * Using [UX/UI guidelines](https://govstack.gitbook.io/specification/v/govstack-specification-main/govstack-ui-ux-guidelines) build preliminary Lo-Fi [wireframes and/or voice command flow ](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow)that show structure, placement, and hierarchy for your service. &#x20;
  * Steering clear of font choices, color, or other elements that would distract both the researcher and the reviewer. Lightweight designs are conceptually easier to reconfigure. Use this opportunity to start listing what UX/UI patterns you will need.&#x20;
  * Reviewing [wireframes and/or voice command flows](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow) according to the specific 'To-be' user journey to ensure users accomplish their goals and their needs are met.&#x20;
  * Using the [wireframes and/or voice command flow](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow) to get the team’s feedback on feasibility and structure.&#x20;
  * Using [wireframes and/or voice command flow](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow) as a way of safely trying out more radical ideas.   &#x20;
* Refer to [UX/Ui guidelines](https://govstack.gitbook.io/sandbox/follow-methodology/best-practice-example-design-of-the-sandbox-building-permit-use-case) and [wireframing kit](https://www.figma.com/design/CfwFievYmLdgcDNKEwhvYd/Sandbox%2FConstruction-Permit%2FGitBook?node-id=0-1\&t=tamB6SCyu5rTqzci-0) prepared by GovStack.
* Give the [wireframes and/or voice command flow ](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow)to the user (Citizen/public servant/business) and public official user to observe their interactions without instruction. Ask users to perform a specific task.&#x20;
* Ask clarifying questions about why they do what they do. Let the user’s behavior guide the questions you ask. It can be helpful to have them narrate their thought process as they go along. &#x20;
* Iterate! Wireframes and/or voice command flow should be quick and painless to create, and even more quick and painless to discard.&#x20;
* Get service owner approval to proceed with the functional prototype &#x20;
  {% endtab %}

{% tab title="Responsabilities" %}
Who does what:

* [Service designers](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/digital-team-composition/user-profiles-taxonomy.md#service-designer)/ Design lead – Lead the activities within the 'Activities' Tab.
* [User needs researchers](broken://spaces/zlgZ7XvqYnhGTNjlQo19) – Prepare & apply user interviews, and facilitate wireframe validation workshops with focus groups.&#x20;
* [Legal policy officer](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/digital-team-composition/user-profiles-taxonomy.md#legal-policy-officer)– Clarify regulations that apply to the service.
* [UX/UI Designers](broken://spaces/zlgZ7XvqYnhGTNjlQo19) - Prepare the wireframes and iterate them as per user feedback.
* [Product/Tech experts](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/digital-team-composition/user-profiles-taxonomy.md#back-end-developers) - Participate in the iteration session with users to see the reaction to the wireframes.
  {% endtab %}

{% tab title="Deliverables" %}

* [Wireframes and/or voice command flow](/implementation-playbook/1.0.1/strategy-and-management/strengthen-transformation-capabilities/capacity-building/artefacts-rework-in-progress.md#wireframes-and-or-voice-command-flow) &#x20;
* Apply the country's [digital service design standards](broken://pages/7gbA07tzgsZKUrjiv32M#digital-service-design-standard). These include standards for:
  * [Service information sheet](broken://pages/7gbA07tzgsZKUrjiv32M#information-service-sheets)
  * [Downloadable forms](broken://pages/7gbA07tzgsZKUrjiv32M#downloadable-forms)
  * [Web forms](broken://pages/7gbA07tzgsZKUrjiv32M#web-forms)
  * [Electronic documents](broken://pages/7gbA07tzgsZKUrjiv32M#electronic-documents)
  * [Notifications](broken://pages/7gbA07tzgsZKUrjiv32M#notifications)
  * [Performance analytics](broken://pages/7gbA07tzgsZKUrjiv32M#performance-analytics)
  * [Citizen satisfaction survey](broken://pages/7gbA07tzgsZKUrjiv32M#citizen-satisfaction-survey)
  * [Accessibility ](broken://pages/7gbA07tzgsZKUrjiv32M#accessibility)
    {% endtab %}
    {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://specs.govstack.global/implementation-playbook/1.0.1/annex/wireframes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
