INF2191 A2: Interaction Design

In this assignment, you will begin your individual UI design project, plan the user experience, interaction, and structural user interface design, and prepare to evaluate your work in A3.

I.   Requirements, scenarios, & tasks

Project brief

Pick one of the provided project briefs and paste it into your Figma starter file

You may change the project brief as you see fit, provided the brief remains logically consistent

Please highlight any changes or adjustments you've made

Scenario

What story / to-be scenario will be a convincing and empathetic demonstration of your design's key benefits?

Characters: create a mini proto-persona for each user in the scenario with relevant quotes / details

Mini: Name, photo, 3 quotes / values / pain points, 3 details / facts

Proto: based on your assumptions of your target audience, not on user data

Plot: what need do they start with, what's hard about it, what do they do, plot twists, where do they end up

World: realistic context, conscious of the experience, plausible outcomes, not too happy, not too bleak

Task definition

Your project will showcase two key tasks your users would need to accomplish within your scenario.

For each task:

Starting state: Convey the situation at the start of the task and the need / motivation to do it

Flow diagram: Design the sequence of 6-10 user actions the user takes and identify the system displays / feedback needed to complete the task, expressed as a task flow diagram.

Plot twist: include a slight complication, hiccup, or obstacle to overcome as part of the task. This may require branching, dead ends, or alternate paths. Consider plot twists that differentiate and highlight your design's strengths.

Objects:

Briefly list the objects your system model / database would be keeping track of, and the major properties each object would have to store. (See W04)

II.   Screens and design system

Sequential storyboard

You will express each task as a sequential storyboard in Figma.

Screen size & breakpoints

Decide on the one reference / default / best form. factor for each task:

Mobile (~420 px width x ~800 px height)

Tablet portrait (~800 px width x ~1200 px height)

Desktop / tablet landscape (~1200 px width x ~800 px height)

Make one screen in your design (from either task) responsive:

Make sure it's a busy / complicated one (e.g., home screen, dashboard, etc.)

Copy it to the "Responsive design" section

Apply three screen size modes to that screen frame so a designer can switch between them:

Mobile (~420 px width x ~800 px height)

Tablet portrait (~800 px width x ~1200 px height)

Desktop / tablet landscape (~1200 px width x ~800 px height)

Check that the screen frame. reflows correctly at each breakpoint.

No need to prototype every screen at every level

Storyboard

Expect each task to include the 6-10 screens / steps from its task flow

Give each screen a unique number, title (matching frame name), and a short caption

Visually indicate and annotate the actions a user takes to advance between screens

Standards & fidelity (A2)

Accurate semantics: navigation, UI labels, and icon meaning

Realistic content: clear, accurate, varied length to test your layout

Accurate text size and typography scale

Accurate screen and element size

Consistent spacings

Accessible colours, graphics, touch sizes, and text

Aesthetic colours, typefaces, or images NOT required for A2

Design system

Add Components as necessary to support efficient screen design and document briefly

Determine layout approach, grids, and spacing (use Variables) and document briefly

口 Text hierarchy and type scale (use Variables and Styles) and document briefly

Define foreground and background colours (use Variables) and document briefly

III.   Prototype, testing, iteration

Structural prototype

Your sequential storyboard should be runnable as an interactive prototype:

Navigate each task from start to finish

Overlays & scrolling where needed

Include local interactions (e.g., switch toggles, checkout totals, etc.) if appropriate

Content updates accurately from screen to screen and in-place if necessary

口 No extra screens for state changes that could be done in-place

Usability testing plan

Briefly describe how you plan to evaluate your interface before you submit A3 in April. You don't have to report on any evaluation results in A2, just the plan.

Include the following in your evaluation plan:

Participants / inclusion criteria: usability testing should involve potential users as participants.

Avoid usability testing with UXD students

Intro / ethics

Submit script. for quick verbal informed consent

Submit script. for brief introduction you will give each participant

5-second test?

Unscripted observation + think-aloud?

Scripted usability test?

Submit the task prompt you will give each participant in a scripted test

Submit your expectations / baseline criteria for success (e.g., completion time)

Follow-up questions?

Submit interview questions

What to submit

Work in one Figma file called "INF2191 Design Project [First name] [Last name]" with the following pages in this order:

● Requirements & Tasks: design brief, scenarios, user / task flow, any ideation work

● A2 Screens (Wireframe): containing your sequential storyboard from A2

● Components: create and document components, component sets, and variants

● Design System: document layout, colour, type

● Evaluation: contains usability testing plan only: script, target audience, etc.

Submit the following:

●    Make a COPY of your Design Project Figma file & rename it to "INF2191 A2 [First name][Last name]".

● Set this file's permissions to "Anyone with the link can Edit" (!)

● Submit a PDF export of every page in the Figma file.

●    DO NOT CHANGE THIS FILE ONCE SUBMITTED. You may keep working in the Design Project file.

Design Brief #1: Pitch In - Organize events together

Overview

PitchIn is a platform. for close-knit communities to plan, organize, and manage events with transparency and decentralized authority. The platform helps users manage tasks, track resources, assign responsibilities, and ensures that everyone has a clear and equitable role in the process, fostering a sense of ownership and shared purpose.

Differentiation

Large events typically use a hierarchical organization structure for task assignment with rigidly defined roles and responsibilities often assigned to paid event planning staff. In contrast, events too small to need hired professionals, but large enough to require planning, typically pressure a few members of the community to assume the burden of organizing, problem-solving, and managing the efforts and opinions of the others without the required authority or support.

PitchIn is an online platform. that helps small communities with no presumed leaders plan events by spreading responsibilities and accountability among all participants. Whether it's assigning roles, contributing ideas, managing supplies, or planning the schedule, every member can flexibly and equitably contribute opinions, decisions, initiative, and effort to the best of their capacities. This decentralized approach ensures that all participants feel invested in the success of the event, and that the work of organizing it is distributed fairly.

Audience

Primary audience: Members of a small, established collaborative community of 10-50 people such as an amateur sports team, performance troupe, or professional society who would like to self-organize an occasion such as a retreat, a hackathon, a celebratory meal, or travel for a competition while distributing costs, responsibility, and power among community members.

Secondary audiences: Families or friend groups of 5-20 people with strong social ties organizing slightly smaller occasions such as a family reunion, vacation, holiday meal, celebration, or camping trip.

Sample tasks

Pain points / opportunities

●    How do we share responsibility without something falling through the cracks?

●    I hate telling people what to do, but I can't do it all myself!

●    I'm so glad I get to do this with everyone; let's make it amazing!

●    Did we get everyone's preferences for dinner?

●    I brought my 900$ karaoke machine, and I'm not sure who's got it.

● Who's been pulling their weight, and who's been coasting along?

Design Brief #2: OurJourneyMan

Overview

OurJourneyMan is a platform. that connects clients with artisans to commission them for expensive custom projects. Clients can negotiate fairly, follow the process transparently, and learn about the artisan's craft.

Differentiation

Buyers on typical handmade platforms have no connection to the sellers, choosing items based on price, description, and turnaround time, so sellers compete for business with easy, inexpensive, ready-to-ship items. In contrast, OurJourneyMan is for clients ready to invest in the quality and meaning of a timeless object (e.g., an heirloom cabinet, a sculpture, a suit of armour, a piece of jewellery) or creative work (e.g., a symphony). Artisans can showcase advanced skills, earn a stable income, and share their progress, skill, and passion for the craft. OurJourneyMan cultivates mutual trust: cost, timelines, and progress are transparent, negotiations are equitable, decisions are collaborative, and the object is made more significant by the detailed story of its creation.

Audience

Primary clients are people with a stable income or the resources set aside to commission a meaningful, high-quality, expertly crafted object. Both the object and the artistry of making it have personal significance to them, so even though they are unable to execute the project themselves, they want to support an artisan in making it authentically, and they want the story of its making to accompany it. Primary artisans are established professionals who earn their living from their craft full-time. They are capable of exemplary creativity and artistry, but they often have to compromise on the quality or difficulty of their work to attract clients. In a world indifferent to their skills, they seek clients who value them, and the chance to create without compromising on quality.

Secondary clients include people commissioning the artisan to teach them the craft rather than make an object,  architects or decorators who commission pieces on behalf of their own clients,and people who want to experience the object's story alongside the client (e.g., visitors to the client's home, recipients of the object as a gift, the client's own customers). Secondary artisans include artisans with specialized skills helping an artisan complete a project (e.g., a blacksmith forging arrow tips for a bowyer), and artisans doing commissions while in training.

Sample tasks

Pain points / opportunities

●    I don't mind paying a premium, as long as I can see where the money is going.

●    People always get sticker shock when they see my rates. I have to eat, too!

●    My grandfather used to make canoes, but he passed away before he could teach me.

●    I want to make sure "Bob the Blacksmith" is not a front for underpaid labourers or a factory

● Sharing this process with someone who cares has been amazing!

●    Oh no! This is going to take longer than I thought, and cost more. How do I tell the client?

●    I want to pitch a change that will make this better …

Design Brief #3: GeoSpark

Overview

GeoSpark is a location-aware platform. that displays short pieces of content called sparks when a user is within a certain radius of a specific location (geofencing). It lets users take location-based notes, set location-based reminders, or browse sparks left by other users to, e.g., point out points of interest in a new city, leave a note for a friend, or participate in an alternate reality game. Sparks may also be used by civic officials to issue warnings.

Sparks degrade over time, but are strengthened by positive user interactions as a form of decentralized validation.

Differentiation

Typical mapping applications use location tagging for persistent, official, centralized content: objects are stable and verified, visitor opinion is confined to ratings and reviews, and users have limited ability to collect, annotate, or share points of interest. In contrast, GeoSpark enables organic, decentralized, informal, intangible tagging so users can leave themselves or each other location-triggered notes, alerts, tips, and opinions. In addition, spark persistence, radius, and visibility are customizable by their creators, while users in the world can set which sparks  they would like to see, and which they would like to interrupt / notify them if they get close. Notably, GeoSpark has no centralized authority, recommendation algorithm, or verification tools, relying instead on a decentralized system of peer moderation, privacy settings, and community reputation (akin to Reddit's karma) that affects how many sparks a user can post, for how long, and for whom. These tools are intended to limit the reach of malicious users.

Audience

Primary audience: GeoSpark has a general capability that appeals to a range of possible primary audiences. Users may use GeoSpark on their own to persistently annotate their everyday environment, or to set timely reminders to complete nearby errands. They may use it to solicit recommendations (from their past selves, friends, broader social communities, or complete strangers) for exploring a city they are visiting or their own.

They may view sparks ahead of a planned outing, browse nearby ones while in an adventurous mood, or have a local spark pushed to them as a notification. Leaving a spark may have an informational, affective, or playful purpose, and its author may want it to be one-time-use, short-lived or long-lived, private, communal, or public.

Anti-audience: GeoSpark is explicitly not for advertising, spam, dangerous, deceptive, or offensive content.

Sample tasks

Pain points / opportunities

●    I wonder what's fun to do around here.

●    Oh, this is an icy road warning. It's July.

● What did my friends like the last time they were in Barcelona?

●    Right! I meant to pick up a pipe wrench, and my phone went off near the hardware store.

●    Free sponsored energy drinks down this alley? No thanks; muted and reported.