1 of 12

VCD Unit 2 Outcome 3

Outcome 3

On completion of this unit the student should be able to apply the VCD design process to design an interface for a digital product, environment or service.

Designing Interactive Experiences

What is the role of visual communication in shaping positive and inclusive interactive experiences?

2 of 12

  • Outcome 3
  • On completion of this unit the student should be able to apply the VCD design process to design an interface for a digital product, environment or service.
  • Digital interface:

  • a folio demonstrating the stages of the VCD design process to propose an interface for an interactive digital product, environment or service.

Designing Interactive Experiences

3 of 12

Deconstructing the terminology of this Outcome�Brainstorm – what are interactive experiences?

Task 1

DISCOVER

“Design an interface for a digital product, environment or service”.

THINK: What does this mean?

DO: Brainstorm or list as many ideas as you can for examples or definitions of the key Terms in the Outcome:

Interface?

Digital product?

Digital Environment?

Digital Service?

You can do this alone, in pairs or small groups.

We will discuss your ideas and come up with an agreed definition and examples of each term so we have a common understanding.

4 of 12

Explore the role of visual communications in shaping positive interactive experiences

DISCOVER

“Examine the role of visual communication in shaping positive interactive experiences, and in catering for the diverse needs of users when interacting with devices, systems or services. Explore how interaction designers contribute to larger user-experience (UX) projects.”

DO: Locate at least 10 different examples (images) of interactive experiences, or people using them – place these in your sketchbook (remember to record or copy the website address too)

Annotate each one – describe the purpose of each and describe some considerations a communication designer may have taken into account when designing each experience?

Describe the wider context of each interaction design – whare is it located, who might use it, when would they use it and what else would the user be thinking/feeling/doing?

https://interactiveexperiences.com.au/

Task 2

5 of 12

Putting your Unit 1 & 2 learning together in a design project!

Learning Intentions:

  • Adopt inclusive practices and principles during the design of a user interface for a digital site or device, prioritising accessibility and usability.

  • To synthesise your key understandings from previous outcomes:
  • good design,
  • human-centred research methods,
  • design’s influence and the influences on design
  • the significance of place and time.

  • To use design conventions for visual interfaces of interactive experiences: Wireframes, Typography, Icons & Pictorial Representations, Elements & Principles and Gestalt Principles

  • To use all 4 phases of the DOUBLE DIAMOND design process : DISCOVER, DEFINE, DVELOP & DELIVER

6 of 12

Determine Need

DISCOVER THE PROBLEM

“Engage with the VCD design process to determine an interaction design problem or opportunity.”

Begin by applying human-centred research methods to understand user objectives – you might start with your own mindmap or brainstorm, or discuss in pairs, but always engage the “user” as well.

Observe people – can you see a problem that could be solved by an interactive design?

Create & send out an online survey to determine an interactive design need, give them some choices .

For example some needs you might suggest to the respondents might include:

  • An App that helps teens study better, or get more sleep, or manage stress
  • A touch screen in the city centre that helps visitors locate services or major attractions or disabled friendly bathrooms
  • An interactive map at Salesian that helps students, staff and visitors find their way to classrooms and other places.
  • Also give them the option to suggest something else, give them some agency, because you want to find out what people actually need!

Task 3

7 of 12

Write a Brief

DEFINE – RE-FRAME THE PROBLEM

  1. Analyse your results and determine where the need is greatest.
  2. Synthesise your insights from your research in the form of a brief:

  • Client
  • Audience profile
  • Context
  • Purpose
  • Constraints & Expectations
  • Final presentation formats

Task 4

8 of 12

Inspiration & Ideation

Use divergent thinking strategies and ideation sketching to consider ways to address the defined communication need, and approach the design of your chosen user interface.

1. Gather some inspiration images to start your divergent thinking!

2. Generate wireframes and components for the interface: experiment with typographic conventions, visual grids, icons, symbols, pictorial representations, design elements and principles, and Gestalt principles of visual perception. 

3. Annotate all your design decisions using appropriate terminology to explain and evaluate the strengths and limitations of potential concepts. 

https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

https://www.youtube.com/watch?v=qpH7-KFWZRI

Task 5

9 of 12

Mock Ups & Critique

“Convergent thinking strategies are employed to synthesise ideas, and mock-ups are generated for testing and critique”

1. Using formal or informal critique methods, seek feedback on your concepts – TAG a friend, 2 stars and a wish, online or physical survey.

2. Respond to feedback (put feedback in folio & annotate it)

3. Test & Evaluate your design – is it user friendly?

3. Make refinements to your selected concepts before presenting a resolved interaction design solution. 

Task 6

Ideation Devlopment Mock Up Final Presentation

https://cantunsee.space/ An online game to test the effectiveness of interface design components!

10 of 12

Final Presentations

Present your final concept as a static visual representations of the content and intended interactions and/or experiences.

You are not required to produce functioning prototypes.

You can use manual and/or digital methods, include wire frames with icons, illustrations, photographs and user flow diagram

Task 7

Flow Diagram Basics: https://www.youtube.com/watch?app=desktop&v=cvYhuowazh0

11 of 12

Key Knowledge

  • the collaborative practices of designers working in the fields of user-experience and interaction design

  • aesthetic considerations and conceptions of good design relevant to the design of interactive experiences

  • the diverse needs of users when interacting with devices, systems and services

  • the role of the brief in guiding the development of design solutions

  • applications of the VCD design process relevant to user-experience and interaction design projects

  • human-centred research methods used to identify interaction design problems and understand stakeholders

  • methods, media and materials used to visualise, test and present interaction design solutions

  • appropriate design terminology.

12 of 12

Key Skills

  • identify and research interaction design problems or opportunities

  • document an interaction design need in the form of a brief

  • apply the stages of the VCD design process to resolve an interaction design problem

  • select and use manual and digital methods, media, materials and design elements and principles appropriate for the design of inclusive interactive experiences suitable for diverse user needs

  • present design concepts for critique, and both deliver and respond to feedback

  • annotate design ideas and concepts using appropriate design terminology to explain and evaluate design decisions

  • test and evaluate the usability and suitability of design concepts

  • select suitable static formats for the presentation of a digital interface solution.