Studio design prompts

Your studios each have themed prompts that draw together interaction design, information hierarchy, and visual design. The exact prompt differs by studio. They will appear here as each studio instructor prepares them.

Studio Instructor Prompt
Henriette Cramer (Autonomous things)

Option 1: Personalizing for multiple people Content streaming services like Netflix personalize to you. Can you think about how you’d design one that includes roommates' and household partners’ needs, not just your own individual preferences? Specific scenario with Netflix: your and your room mate are sitting on the couch, you both have an account, but you like very different movies, and you don’t want to argue for three hours about what to watch. Take the current interface, what would you adjust?

​Option 2: Surroundings & transport​ Improve your favorite maps/directions app. You need to get from slightly inconvenient A to B. It’s way too far to walk or just bike. You probably need to combine different services (Maps? Lyft? Uber? Caltrain schedules?). Your directions will get you there confidently and will be with you all the way. Don’t redesign the whole maps (!!), focus on the directions during the transitions between transportation modes.

Bonus, if you feel confident, and only if you are able to constrain your problem:
Option 3: Consumer robots Redesign a consumer robot interface (drone, roomba) Look up the current UI, watch videos and identify potential user complaints and issues. Pick one specific scenario, e.g. I’m in the office, my Roomba gets stuck, and something serious is wrong, how does it alert me, should I be able to steer the Roomba?

And as always, if you have a fabulous idea, go for it! Don’t be afraid to try things out – be sure that you’re able to complete the whole P2 though – so BE SPECIFIC in what you’re solving. Think needs & people, not pixel rearrangement. Pick a scenario, don’t try to design for everything, everyone, everywhere. Don’t be afraid to have the same scenario with another group – that’s actually helpful in seeing in the end what type of perspective they brought.

Bob Ryskamp (Towards invisible interfaces)

Redesign the Snapchat experience to work better while running--that is, literally running down the street holding your phone!

The desired experience supports: 1) taking a picture; 2) choosing and adding one (or more) filters (recommended: the speed filter); and 3) sharing the picture to one of your stories.

You can change or keep anything you like about the existing Snapchat interface to support this; imagine that this app only needs to work well for running, and optimize the interface for that use case.

Julie Stanford (Home is where the heart is)
Find a microwave oven and document the interface and interaction as it currently exists (using sketches/storyboards/etc). Then redesign the experience. Use a phone or a tablet to represent the display.
John Tang (Technology for human-being)

1) look at the Stanford Health Improvement Program web site to critique and re-design.

2) Any fitness, nutrition, contemplative practice (for example http://thnx4.org/) tracking website you currently use and critique and redesign the experience.

You should focus on what you think the ​​important user tasks are when interacting with these sites and tailor the redesign to support those tasks.

Helena Roeber (Leveling the playing field)
Design a mobile site or website based on this InnVision resource document. Think about people's needs and uses for this information, and go beyond recreating a list.
Jenn Marlow (Destinations)

For this activity, we'll ask you to re-design a website that helps people evaluate their hotel options. You can choose one of these two sites:

You should go beyond just changing the layout. Think about adding new ways of showing and interacting with the information, needs specific to tourists in that location, and challenges that people have with the current interaction.

Define your user

First, reflect for a moment on who the user is for your prompt. Who will come to this application, and for what reason? What content will they be looking for? You'll need to make some hard decisions about what is important, and critically, what can be removed or compressed.

Use these insights to guide your interaction decisions for the rest of the assignment. This is not a simple layout exercise.

Write up a brief paragraph summarizing your reflections.

Sketch ten thumbnails

It's time to start brainstorming concepts and designs for your site. 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"x11" 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

Wireframe (Sketch)

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 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.

If you need to convey multiple states of the application — for example, a second page or an interactive widget — do so 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

Wireframe (HTML)

Sketch isn't very interactive, so we'll pop over to HTML. Choose one of your three mocks to pursue further. Translate your mock into code using HTML and CSS, as well as minimal Javascript if necessary. The goal is to make an interactive (largely unstyled) wireframe that a user could click through to explore the general layout and interaction. Focus mostly on the details of the interaction, and less on the details of the content.

We advise you to use Twitter Bootstrap and the grid techniques from in class to implement the HTML mock. Bootstrap should come pre-baked with most HTML components you'd need. No server software should be necessary at this point.

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

Here is the same example project shown above, but implemented in HTML using off-the-shelf components with a little refinement:

Courtesy of Julie Stanford and Sliced Bread Design

Examples

Here are some good submissions from this quarter:

Submit

Pull everything together into the Project 2 Part I submission. That means one PDF that includes:

  • Your one-paragraph user summary
  • Your ten thumbnail sketches
  • Your three Sketch mocks
  • Your one HTML mock (screenshots)
  • A link to a live version of your HTML mock

Print out your Sketch and HTML mocks (each fullsize on a separate page) and bring them with you to studio for critique.

Grading rubric

Part I is worth five points. You will receive five points for completing the assignment satisfactorily, submitting it, and bringing the materials printed out to class.

However, apart from the points, this assignment will also feed into Part II. So, the course staff will separately give you in-class feedback on the quality of your submission on a check-minus, check, check-plus scale. If you get a check-minus, strongly consider editing Part I before moving on to Part II, since your foundation is shaky. A check is fine but should do some tweaking, and the rare check-plus means that you've exceeded our expectations.