Create a highly interactive Figma prototype.

Make sure that the main tasks can be fully

experienced, and also that the breadth of your application is at least explorable, even if not all
functionality is deeply prototyped.
There are a wide variety of examples in the Figma Community. Any use of community content
must comply with course policy - must be documented and must not accomplish a significant
amount of the assignment development. You should explore the community for ideas and
supporting resources. For example:

 Material 3 Design Kit

- https://www.figma.com/community/file/1035203688168086460Links to an external
site.
 Figma Tutorials - Smart Animate Prototyping
- https://www.figma.com/community/file/860226607737731905Links to an external
site.

The Application
You are being asked to design an interface prototype for an online dating / matchmaking site.
The target is for a mobile size screen.
You will need to prototype several main tasks. This must include:

1. Basic Search - This task enables a user to enter match preferences, such as age range,
hobbies, etc., saving (with confirmation) this set of preferences, running the search
and seeing a basic list of potential matches.
2. Detail Review - This task enables a user to review potential matches. It shows the
detail of a potential match (profile picture, details, text about them - what looking for,
etc.) for initial review and rating (yes, no, maybe - similar to swipe left/right). This
should allow easy navigation through detail view on a set of potential matches.
3. Communication - This task enables a user to communicate with potential matches
within the platform. This should include sending text messages, as well as video
messages.
4. Additional Task of Your Choice - for example, you might choose:
o Get to Know You Activities - provide quizzes or games that potential
matches can play to get to know one another
o Dashboard - provides analytics on a user's interactions with other potential
matches (how many messages, recency of messages, who is on now, how
many searches included the active user / how many favorited the active
user, etc.

For this assignment, you will create a Figma interactive prototype for the application.
Figma Prototype
For this project, you will create a highly interactive and prototype for your dating site that
demonstrates the main aspects of user interaction with it. The tasks must demonstrate the use of
at least the following Figma aspects:

 Use of Components (common templates)

 Use of content overflow scrolling
 Fixed position Floating Action Button
 High-Fidelity Visual Design elements
 High Level of Interaction Design through hotspot connections
 Appropriate animations with hotspot connections to support context and navigation
understanding (not just instant)

Part 1: Prototype Development

Decide on tasks, and the specific details that you will prototype as part of the tasks.
Coordinate on the information design of the site. What are the consistent parts of the layout?
How would the user navigate between tasks? This is particularly important for consistency as
each team member works on prototyping for an individual task.
For each application task:

 Sketchbook Sketched Wireframes: Create a set of 2-3 hand-sketched wireframes that

represent main aspects of user interaction for the task. The different wireframes
should represent fairly different layouts for different aspects of the task (e.g., text
message view and vide message view) or changes that result based on interactions
(e.g., search view to results view). It should be clear from the sketched wireframes
what the interactive components in the prototype will be.
 Prototype Part for the Task: Based on the sketched wireframes for the task, create a
working part of an overall prototype for the task.
o This will need to have consistency with prototype parts from other team
members
o There need to be several (3+) distinct interactive elements for the task that
a user can interact with

Part 3: User Study Feedback

For this part of the project, you will conduct a user study evaluation using the completed
prototype.

 Your group should have the same # of test subjects as you do team members.
 The process follows the same general steps that you used for the previous self-
walkthroughs / walkthrough with others
 This study uses a prototype that can be shared with the user and interacted with
directly, so there is not a wizarding
 Prepare the prototype, study questions, and task prompts (SUE 6.1, 6.2)
 o As a reminder, in the self-walkthrough, you were asked to write down a
prompt - a 2-3 sentence goal that a user could accomplish for each task in
your prototype.
 Ask the user to think aloud (SUE 6.3)
 Give the prompt for each task
 Do not take actions for the user, or tell them what to do. If they are stuck, you can
give them some general guidance or clarification on how to proceed, but avoid telling
them exactly what to do.
 Take notes on thoughts, questions, confusion, or feedback that your user may have

For the report, include

 Description of the prompts you used for each task

 Detail the # of users participating in the study
 Identify common points of feedback across the users
 Include a summary of feedback, including bullet points about thoughts, questions,
and lessons learned from your user about your prototype interface design.

Part 3: Report
Your project development (sketchbook wireframe sketching, and prototype) must be
accompanied by a project writeup. The writeup sections should address all tasks together for the
whole project. They are intended to be collaborative, including critique and reflection. They
should make reference to the different tasks, but are not written individually as part of each task.
This writeup should include specific consolidated sections for each of the following:

 Refined application description. Describe choices that you have made about the
application (e.g., theme, your selected fourth task, etc.)
 Interactive Element Types Used - briefly note the types of interactive elements
present for each task (should be 3+ different types per task)
 Design Patterns Discussion: which design patterns did you use and why? Refer to
design patterns we have already discussed or others in the book that we haven't yet
discussed if appropriate.
 Inspirations Discussion: (this could include screenshots). Which other system designs
inspired your designs, or which information did you draw upon?
 A Content-Fidelity Matrix with one checkmark per row to show what fidelity you
were aiming for. You can do one C-F matrix for the whole project, or one for each
task set of wireframes if you feel that you were aiming for different fidelities with
each set.
 User study details and summary of main points / lessons learned from the feedback.
 Self-Critique: for each task set of wireframes, what works and what might yet need
improvement? Refer to your own project description, design goals and how well your
prototypes meet them.

Part 4: Submission
Submit your completed, integrated prototype. This should be one integrated Figma project that
is coordinated to allow navigation and consistency between all of the tasks.

 As part of the submission

o Make sure that sharing is set for sharing the prototype link.
o Export your Prototype in 2 different formats for submission
 As Figma Project - this saves the project in a Figma-specific
data format (.fig). (Figma > File > Save local copy...)
 As a PDF Document - (Figma > File > Export frames to
PDF ...). This exports all frames in a page, not everything in
the project, so check the export content to see if you may need
to export additional pages.
o For the submission, include

1. The URL Link to your Figma file in a comment for the file
submission - verify sharing is set by checking with private /
incognito mode in browser.
2. Figma Project File (project5.fig)
3. Exported PDF of Figma Project (project5-figma-
prototype.pdf)

Also as part of the submission, include a single PDF report document for your team prototype
project that includes clearly identified sections for:

 project5-report.pdf
 Cover page - including team member names
 Introduction - application description and tasks
 Separate sections, one for each application task, including:
o Team member lead
o Brief introduction to the task
o Wireframe sketching for that task
o Documentation of how the user interaction goes throughout the task - for
each step:
 Brief description
 Showing the interaction (e.g., user clicking on dropdown list to
expand, expanded dropdown list and making a selection,
collapsed dropdown list with selection shown).
 Summary and Discussion on User Study feedback
 Summary and Discussion Sections for interactive elements, design patterns,
inspirations, content-fidelity, and self-critique.

PreviousNext