Also known as the design proposal or design solution, the conceptual prototype is a visually accurate representation of the proposed features in a conceptual interface. This research focuses its application on smartphone devices due to their intimacy and proximity to a user to reclaiming them for personal self-regulation rather than distractions. This conceptual prototype is then utilized in the design evaluation stage to present a visual representation of proposing features for participants for evaluation.
The following early prototype has not been included as part of the research. It is being showcased here to demonstrate different early-stage experimentation on the concept, using mediums such as paper prototyping and Notion.
Prototype: Notion Weekly Tracking Template Concept
The creation and presentation of visual prototype of the design concept is the foundation of the evaluative research. To prepare the prototype, first a system task flow diagram is created to visualize the actions of the user. The flow chart showcases the user as they navigate between sections of the app, commonly known in the practicing industry as app screens (also referred to as “page”, similar to a webpage).
These screen definitions are then visualized onto the interface design software Figma to include interface elements as a realistic proposal of what could be a functional mobile interface. Then, the appropriate screens are linked logically from one screen to another based on the logical connection of interactions.
The outcome is an interactive visual prototype, with the ability to tap or “click” on certain defined areas of the image to animate from one screen image to another. This allows for a highly believable interactive visual prototype without the need to program any functional code. This allows for users to accurately evaluate an interactive feature through demonstration of that feature in action.
The following is a non-functional visual prototype, which means that the app has not been coded and has only been prototyped in a way to visually appear like it is a functional prototype. The prototype links images from one “screen” to another based on a clickable region of the image, creating the illusion that the application is functional. All data is mocked up and embedded in the image itself.
https://www.youtube.com/watch?v=tjogC1zOTFw