This deliverable is a Lightweight Prototype. Motivate its design based on research you performed to develop your proposal and analysis of initial user data. To design your visual program and lightweight prototype, gather preliminary user data, expand your scenarios, and engage in creative synthesis. Use evidence (background, data) to create an experience concept, conceptual models, visuals, and interaction. Manifest support for the user tasks.
Using techniques such as ethnography, grounded theory, contextual inquiry, coherence method, and participatory design (all described in PRS), begin to gather and analyze data from members of your target user group.
Develop understanding of user tasks / activities and how these result in needs and requirements. In the context of your concept/problem. discover their relevant practices, habits, and tendencies, as well as their needs and desires. Transcribe observations and interviews. Using the constant comparative method, form codes. Create a 2-page analysis of your findings. Clearly describe your data gathering and analysis methodology.
Incorporate the most relevant results of the data gathering into your design.
Develop specific scenarios [PRS 10.6.1], each of which tells a specific story of how a particular fictional user will use your interactive system to accomplish a particular task. Let us know how important design attributes and features, including information design, visual design, and interaction design, will come into play. Use the scenario to illustrate and explain what will happen, and how it works.
Each scenario tells a specific story of how a particular user will use your interactive system to accomplish her task. Let us know how important design attributes and features, including information design, visual design, and interaction design, will come into play. Use the scenario to illustrate and explain what will happen, and how it will work. It must show how your system will provide an experience that contributes to investigation of your primary research question.
Make each scenario as specific and detailed as possible! Do not present generalizations, like that the player clicks one of 4 buttons. One scenario does not express everything that is possible. Instead, it depicts a specific user experience.
experience design concept
Decide which user task(s) you will support. Using writing, describe your concept for the user experience. Articulate a design model and how you will convey it to the user, through the system.
Explain which features you are planning to implement, and why. Also specify features that you are choosing to not address in this phase. Address important details. Use vocabulary from the readings, regarding design and information, to articulate key ideas. You can build on successful prior designs. You must also develop new ideas that extend or transform prior work. Don't put all of this text in a single block. Instead, separate it into chunks. Use spatial positioning and other graphical techniques, like arrows, to connect aspects of your experience design with their manifestations in you visual program, your scenarios, and your Proposal.
visual program and interaction: Design a visual program, with interaction, to communicate your conceptualized experience and mental models. The visual program, at a micro level, must convey significant relationships among semantic facets and other features in your information design.
According to Meggs, a visual program is a set of visual modules, which together create unifying cohesion in the composition of a design, as a whole. Each module is a basic unit of visual design, which can be combined and repeated. The modules that makeup a visual program include a grid structure, consistent type sizes and styles, and a color plan.
Convey your visual program using wireframes and mockups.
Wireframes are widely used in visual design to represent the layout and arrangement of content for a page or module. The wireframes show where content and affordances will be placed, without specifying details such as color or content. For this deliverable, use principles of graphic space, as manifested in your visual program, to design your wireframes. Create each of these using a vector-based graphics editor or directly in a spatial assemblage tool.
If you Assemble elements using a Google Doc or Slides, export SVGs directly into a spatial assemblage tool. Make sure to label and explain wireframes, with captions, in the doc, to contextualize them. You can also make the sitemap, either as a whole, or as components, in the vector graphics editor.
Through this deliverable, develop your design of the look and feel of web pages and interactive components, in detail. Design a color scheme. Make typography precise. Indicate affordances. Create foreground / background relationships. Through all these differences that make a difference, develop layering and separation.
Mockups are a more fleshed out form of lightweight prototype. Create mockups for each presentation page, making your wireframes more specific. Each presentation page mock-up should fully include an example instance of real content. It should include all visual elements. Create these mockups using a pixel-based graphics editor. Output as 24-bit color png, and drag into your lightweight prototype document. Position each mock-up, in the document, in relationship to its corresponding wireframe.
Connect your visual and information design by specifying any forms through which the user will input data.
Use multiple versions of screens and components within them, elaborated with labels, lines, arrows and other glyphs, to show how state may change dynamically in response to user interaction.
Create storyboards based on the user tasks described in the scenarios. Use spatial layout and sketching to visually connect elements from your proposal, wireframes, mockups, and anything else you need. Depict stages of interaction and game play.
The storyboard is a schematic that illustrates how the elements of your interaction design, including affordances, feedback, information visualization, narrative, and navigation will be connected together to support your scenario(s), in specific, and the users' tasks and activities, in general. A storyboard is a sequence of sketches with clear transition logics.
Associate labels and stories associated with each sketch and transition. As a comic strip is a graphic novel, so a storyboard is a graphic flowchart. Storyboard details are found in the references below.
In your Google Doc, in conjunction with visual references to other components in your information composition, make clear what has been revised and why. In this, the Doc + Composition will function as an integrated, connected holistic presentation of your design ideas.
Submit the URL to your whole for this lightweight prototype deliverable using the project deliverables form.
Engage in stages of iterative design. Revise the scenarios you developed in your proposal refinement to illustrate iterative design of intended user experiences. Incorporate what you learn by fleshing out the lightweight prototype to more clearly understand how users will engage with your interactive system. Repeat this process several times.
references