Stanford University

Project 4: Interaction Design

Part I

Final team

Form a team of up to four people from your studio. There are no restrictions beyond this—you can work with people from previous teams if you choose.

Prompt

Social Decision Making Bob Baxley

Create an interactive flow that allows a member of a family to:

  1. from a fixed set of the 20 most popular charitable causes, identify one or more causes to which they want to donate
  2. find, filter, evaluate, compare and select one or more charity organizations working on a particular cause
  3. set allocation preferences for distributing funds among the selected charities and identified causes
  4. view how their choices and preferences blend with the overall family allocation accounting for their individual influence/power within the family.

Banishing Bland Buildings Jenn Marlow
  1. Pick a wide use building (like a library, department store, Hoover tower, etc.) on campus or beyond, then
  2. Design an interactive experience for a group of 2 or more people visiting that building that
  3. Allows people to indicate their preferences for one place (or, depending on the building, multiple places) to visit within that building (input can vary from selection of options on a list to more creatively "sensed" ways of providing input on preferences), and
  4. Personalizes their experience in the building you chose in some way (e.g. leading them through the building, recommending items to see or things to do, etc.)

The platform can be on phone, smartwatch, a large public display, etc.

Leveling the playing field Helena Roeber

TBA

Cutting Edge Julie Stanford & Jofish Kaye

Design an experience that allows surgical patients to both receive and provide peer support through one-to-few mentorship and/or some collection of stories & shared knowledge.

Here are some dimensions for you to think about when contemplating your design:

  • Pick one surgery to stay focussed. This will help you come up with more unique design insights.
  • How will users choose whom to pair up with? Do they even need to?
  • Are you facilitating short or long term connections?
  • How are you evaluating the success of a mentorship?
  • Which parts of your experience are public, which private—and why?
Disrupting Echo Chambers John Tang

Pick from among any of the ideas presented in our studio for P3.3 as the starting point for P4. We are continuing to explore how to get users to engage with points of view that they would not usually see. By Tuesday, February 14, 6pm we will post on Piazza any modifications of the ideas needed to make them suitable for a P4 design prompt.

Subvert Prof. Michael Bernstein

As with P3, pick a topic of dialogue in the campus or national environment, and identify a point of view that you feel is under-represented. You may re-use any team's topic, point of view, or design from P3, or generate a new one. Your goal is to design an interactive experience that convinces people of the point of view. Don't just create an informational web site: think about how to engage the user.

Sketch ten thumbnails

It's time to start brainstorming designs. Start sketching. We're looking for you to generate ten different concept thumbnails focusing on the interaction, information hierarchy, and overall layout. Each sketch should be about a quarter-page if you're using an 8.5" by 11" sketchbook. They're intentionally postcard-sized so that you focus on the overall layout rather than detail. If you need multiple different sketches to capture a single idea, that's fine.

Try different user flows through the application, different grid structures, and calling attention to information through negative space. Aim for variety — diversity in your sketches will make it easier to find the design that you like best. Feel free to include color in your sketches if it would help convey your idea, but using grayscale is great too. One piece of advice: don't make it too complex, since you'll be implementing it soon.

Here is an example sketch for a project building a physician newsleter portal:

Courtesy of Julie Stanford and Sliced Bread Design

Three Sketch Wireframes

Pick your top three ideas and create rough mocks for each. These mocks are intended to evolve and instantiate your sketches given realistic constraints in screen size and layout.

If you can get your hands on a Mac, we strongly recommend the trial version of Sketch for OS X. (You can also install it on the cluster computers.) Its large library of templates can give you tons of premade elements (especially helpful for this assignment: the Twitter Bootstrap UI elements) so you don't need to reinvent everything from scratch. An alternative is Adobe Illustrator or Photoshop, available on Stanford cluster machines. Many of the UI template libraries work with these tools as well. However, they have high learning curves. If you are truly stuck, tools such as Figma or Keynote or Powerpoint can work, but be aware that it can be difficult to use them to produce designs that look like they would be realistic web sites rather than slideware. It's fine to use Sketch UI kits for default styles and buttons, since the focus isn't on visual design right now. Likewise, you can use Lorem Ipsum text if you need.

We expect that your wireframes convey a complex enough interaction to need several states of the application — for example, pages or interactive widgets. Most effective projects have at least three major states, and not more than five or six. Convey these states for now through separate screens in the mock.

Here are example Sketch mocks. Note that the visual design language leans in the general direction that will be used, but it uses a lot of pre-canned resources and is not final.

Courtesy of Julie Stanford and Sliced Bread Design

We recommend making sure to get feedback in studio or office hours at this point, before narrowing down to a single design to pursue! We would normally make this a separate milestone with a suggested due date of 2/20, but the President's Day holiday precludes that this year. So, if you want to stay on top of the project, seek out a TA or studio instructor in office hours or the previous class day.

One Marvel Wireframe

Sketch isn't very interactive, so we'll connect it with Marvel. Choose one of your three designs to pursue further. Expand your wireframe so that its main interaction flows are all present and possible to click through in Marvel.

Our critiques in studio will be focused on whether your design is focusing on the right elements of the interaction and information.

User feedback

After your Marvel wireframe is ready, use the techniques you learned in CS 147 to get feedback from users on them. Summarize what you learned, and how you will be iterating based on the feedback. Aim for at least five users (and ten if you want to impress us).

Examples

Here are some good submissions from last year. Note some differences in the assignment: HTML wireframes instead of using Marvel, and the the implementation and user feedback requirements were in other milestones:

Submit and Present

On Canvas

Pull everything together into your submission for P4.I on Canvas. This includes:

  • Your ten thumbnail sketches
  • Your three Sketch wireframe
  • Your one Marvel wireframe (screenshots)
  • A link to a live version of your Marvel wireframe
  • A summary of your user feedback method, results, and plans

In Studio

Print out your Sketch and Marvel wireframes (each fullsize on a separate page) and bring them with you to studio for critique. You will have five minutes to lay out your goal, designs, and user feedback.

Grading rubric

Each milestone is worth five points. You will receive five points for completing the assignment satisfactorily, submitting it, and your whole team bringing your sketches to class for feedback.