In this module, you will be developing a wireframe prototype design using the balsamiq software to visualize your project. Prototypes are draft designs that are an important prerequisite to beginning the complete design.

In this module, you will be creating wireframe prototypes of your design for each included and extended page of the design, as well as user steps or tasks to describe to the user how to navigate the system. You will need to explain each design option including drop down menu, settings menus, and other “hidden” options that the user can access.

This module will culminate with multiple wireframe designs as well as a detailed step by step explanation for the user to navigate your system.

Assignments

Questions?

Please use the Discussion Forum to ask you classmates for additional suggestions as you are drafting your research questions. You can feel free to email me and I will strive to respond within 48 hours. I am also available for a phone call or zoom meeting upon request.

Prototypes are important for UI/UX development and to elicit user feedback and develop user-centric designs. A Wireframe prototype is a digital mockup of your design, developed prior to creating the final design, in order to gather user feedback. Prototyping provides the opportunity for design flexibility and iteration, in order to respond to user needs.

A useful tool for developing digital prototypes is the Balsamiq software, which is a web tool that lets a designer create a mockup by simply dragging and dropping common interface elements into a layout. Additionally, it lets you provide as much detail as is necessary for your users to visualize your design prototype.

Digital prototypes and mockups have been implemented in a variety of disciplines including environmental education, emergency response, and others.

For example, the geospatial prototype design below outlines an environmental education app, which provides an excerpt of information that will be available in the final design. Notice the prototype shows each of the included and extended pages that the user will potentially be exposed to when interacting with the design.

First, the design begins with the user interview (which you developed and designed in module 2), and then includes the user registration page (figure a), the user login page (figure b), the list of environmental topics (figure c), and the extended environmental page (figure d). Notice that the design incorporates UI/UX features into the prototype to make it aesthetically appealing for the user.

Figure 1: An environmental education design prototype that shows an effective prototype design for gathering user feedback. Screen capture acquired by Brandi Gaertner.

Source: Andrade-Arenas et al 2024 Figure 3 “Mobile APP (a) environmental topics and (b) definition of environment."

References:

Simply incorporating the prototypes is not enough, you also need to explain to your user how to navigate the system. You can do this one of two ways:

1. Cognitive Walkthrough: You can provide a set of tasks for your user(s) to complete, including different tasks for each persona/scenario. The user needs to have enough detail to efficiently navigate the system, and “tasks” to conduct once they’ve navigated the design to the proposed tasks.
2. User Steps: You can provide specific step by step explanations for your users to navigate the prototype, providing specific details for included an extended prototypes.

A cognitive walkthrough places a user from each persona in a simulated environment where they need to navigate the design through a human-computer interaction (HCI) process. The ability of the users to effectively navigate the system and complete “tasks” provides valuable feedback on system usability and navigability.

Cognitive Walkthrough example: In the design below describing the process for creating a Canadian Open Government Data Web App, a prototype and a user task system was developed to evaluate the usability of the system.

Figure 2: The prototype design for the Canadian Open Government Data Web App. Screen capture acquired by Brandi Gaertner.

Source: Mitchel and Stobert Figure 9: “The redesigned parent page of open.canada.ca. Banner image by Ottawa Tourism."

Figure 3: The prototype design for the Canadian Open Government Data Web App. Screen capture acquired by Brandi Gaertner.

Source: Mitchel and Stobert Figure 11 “The redesigned narrowed search result page, with organized content cards for additional linked content.”

References:

The reading assignments this week provide an exemplar examples of how to develop design prototypes and a cognitive walkthroughs. Read the attached articles and develop your own design prototypes and cognitive walkthroughs of your design.

Relevant to your project work, a wireframe diagram can be used to communicate, explain, and prototype the basic functionality and requirements, as well as the layout of your product. At the core, wireframes are stories about the future that help to define the functional requirements. User interface wireframes used as prototypes can be coupled with some descriptions to form the body of functional requirements. Functional requirements describe what software does, whereas non-functional requirements capture the quality and constraints of the software, such as performance or security. Functional requirements are gathered through interviews with users and can be written in documents that are difficult to review. Wireframes are an alternate approach to documenting and prototyping functional requirements.