Core 1: Interaction

Iterate & Refine

Based on class feedback, refine the work you've done so far within the Information Architecture and Wireframing & Prototyping units. Remember, the process is iterative!

Complete the Week 10 FigJam Module

• Brainstorm a list of names for your product.
• Come up with a list of at least 20 brand attributes. Choose your top 5. You can also include 5 attributes that your brand is not.
• Do visual research. List at least 5 sources that you used. Try to refrain from using sources like Pinterest or Dribble. Feel free to use any resources listed on the class site.
• Based on your visual research, develop three distinct mood boards that represent a different visual direction. Name each direction and list any related brand attributes. Feel free to use Figma for this if it's easier.

Iterate & Refine

Based on class feedback, refine the work you've done so far within the Information Architecture and Wireframing & Prototyping units. Remember, the process is iterative!

Complete the Week 9 FigJam Module

• Plan for your user testing. Draft an introductory script to onboard your participants.
• Test your prototype with at least three participants using the think aloud method. The purpose of this is to observe users and see what they struggle with so you can improve your design.
• Analyze the results after you've conducted all the testing. Revise your Figma wireframes based on your insights.

Assignment 2 Presentation

Turn all of your work for Information Architecture and Wireframing & Prototyping into a presentation. You will have 5 minutes to present your work, so think about pacing and what you want to say. Pretend that your classmates and I are team members, executives, web developers, or any other project stakeholders. How will you present your work succinctly yet clearly so the project team understands?

Iterate & Refine

Continue to develop and refine any and all of the work you've done so far. Remember, the process is iterative!

Complete the Week 8 FigJam Module

• If applicable, think about where and when your product will be used the most to decide if you want to use desktop or mobile dimensions. For desktop, use the 1440px-wide dimensions. For mobile, use the iPhone 13 mini.
• Choose one of your navigation sketches and further develop them into wireframes. Get them to a block fidelity, but start to bring in some sample content. Focus solely on blocking out content and establishing clear information hierarchy.
• Think about your homepage: what do your users want to see or do first? This should be your first screen of your wireframes.
• Turn your wireframes into a clickable prototype. It does not need to be animated, but it does need to be clickable based on the user flow you've chosen.

Watch These Figma Tutorials

Reference the below Figma videos for additional support as you develop your wireframes. For more advanced prototyping techniques, I encourage you to do some self-learning. Figma's YouTube account has some great tutorials.

• What's Figma? →
• Figma for Beginners: Explore ideas →
• Figma for Beginners: Create designs →
• Figma for Beginners: Build prototypes →

Iterate & Refine

Continue to develop and refine any and all of the work you've done so far. Remember, the process is iterative!

Complete the Week 7 FigJam Module

• Create a site map.
• Audit some competitors' navigation.
• Sketch 2-3 navigation ideas for one of your user flows. Each sketch should illustrate the same flow.

Watch These Figma Tutorials

So far, we've been using FigJam. Next week, we will start to use Figma. Watch the below tutorials (and feel free to practice using Figma) to prepare yourself:

• What's Figma? →
• Figma for Beginners: Explore ideas →
• Figma for Beginners: Create designs →
• Figma for Beginners: Build prototypes →

Iterate & Refine

Continue to develop and refine any and all of the work you've done so far. Remember, the process is iterative!

Complete the Week 6 FigJam Module

• Brainstorm a list of content.
• Perform a card sorting exercise with a total of three users.

Iterate & Refine

Continue to develop and refine your personas and user journey maps. A reminder that next week’s homework will be turning these deliverables into a presentable format.

Complete the Week 5 FigJam Module

• Develop two user flows, one for each persona.
• Brainstorm features and prioritize them according to the matrix in the FigJam. Determine your MVP and features for future versions of your product.

Assignment 1 Presentation

Turn all of your work for Product Concept & Research into a presentation. You will have 5 minutes to present your work, so think about pacing and what you want to say. Pretend that your classmates and I are team members, executives, web developers, or any other project stakeholders. How will you present your work succinctly yet clearly so the project team understands?

Iterate & Refine

Continue to develop and refine your personas and user journey maps. A reminder that next week’s homework will be turning these deliverables into a presentable format.

Complete the Week 4 FigJam Module

• Perform a competitive analysis. Identify at least three competitors and analyze their features. Spend time actually using your competitor’s product, as if you were one of their users.
• Write a HMW statement for each of the themes you identified in your affinity map.

Iterate & Refine

Continue to refine your product concept and interview plan/questions based on class feedback.

Complete the Week 3 FigJam Module

• Complete all six of your user interviews. Take any high-level notes and map out steps of tasks where necessary.
• Create an affinity map: note at least three key insights from each interview and group them into common themes.
• Based on your affinity maps, develop the first draft of at least two personas.
• Based on your persona drafts, develop the first draft of at least two user journey maps.

Set Up Your FigJam Space

Duplicate the FigJam Whiteboard Space. so you have your own workspace. Make sure you're in the shared class project folder. Right-click on the thumbnail of the [TEMPLATE] Core 1: Interaction Whiteboard Space thumbnail and click "Duplicate". Right click on your duplicated file and click "Rename." Rename the file so it has your name in it.

If you're new to FigJam and need an overview of the document UI, I recommend watching this FigJam Tutorial →.

Refine Your Concept

Based on class feedback, continue to flesh out your product concept. Collect any additional secondary sources as necessary. Update the Week 1 section in the FigJam Whiteboard Space accordingly. Treat this section as a scratchpad as you refine your concept.

Complete the Week 2 FigJam Module

• Develop a research question.
• Identify ideal participants and consider recruiting strategies.
• Draft key interview questions.
• Interview 2-3 participants this week. Collect notes and map out their steps of tasks as necessary.

Product Concept Proposal

Develop a concept for a web-based product that serves a social good. Be ready to present your proposal to the class.

Your presentation should include:

• An explanation of your topic and concept
• Basic data (qualitative and/or quantitative) on your topic

Create a Figma→ Account

Figma is a cloud-based, collaborative design tool that we'll be using to synthesize, wireframe, design, and prototype our project. Please sign up for a free educational Figma account using your New School email address.

Exercise 1: HTML Wiki

Part A: Practice your knowledge! Replicate a Wikipedia excerpt (doesn't have to be the whole page) using HTML elements. Try using HTML elements that reflect the text hierarchy of the wiki.

Part B: Using only one HTML element, replicate the very same Wikipedia excerpt from Part A. Think about how you're using the element, and how it affects the design.

Project 0: Class Website

Get the structure of your class website going. Design it using only HTML elements.

Submit a Website: Raw HTML

Suggested Viewing: The Basics of HTML by Laurel Schwulst→.

This is optional, but I promise it's a calming/informative watch that breaks down how HTML works nicely.