I designed a website to tech new designers at CMU how to create and test their own paper prototypes.

 
 

SCOPE
4 weeks
Solo project

MY ROLES
Designer
Prototyper
User-tester

SKILLS
Front end coding
Paper prototyping
User-testing
Wireframing

TOOLS
xperience Design
HTML/CSS/JS/Animate.js

 

Story

Brand new to the world of HCI, I was apprehensive as I stepped onto the Carnegie Mellon campus. Paper prototyping was the first skill I learned in Pittsburgh, and it was the skill that raised my confidence to the point of knowing I belonged. I know that each year, many MHCI students each year feel a similar insecurity, so I decided to build a website that introduces a really fun skill, using the very skills I’d learned in the program that first semester. The idea is that incoming MHCI students could make a paper prototype over the summer before arriving in Pittsburgh as a fast and fun way of building confidence while learning a critical UX skill.

 

Paper Prototyping

Learning is a form of progressive disclosure - as a student proceeds through any sort of education, they are presented with more material. Given that the final product was to be a crash course incoming students could quickly complete, I wanted to balance the relationship between displaying enough material on each page but ending with a total number of pages that didn’t feel overwhelming.

IMG_2304.jpg
IMG_2308.jpg
IMG_2306.jpg
IMG_2309.jpg
 

MEDIUM-FIDELITY PROTOTYPING

My major focus for the first digital prototype was to focus on finding a scrolling method that would both make sense. I stuck to a left-right navigation style, with a separate page for each step of the process.

Experience Design Clickthrough

Home Screen.png
Choose a topic.png
Why.png
 

Building the site

As I started to play around with left-right navigation styles, I stumbled across parallax scrolling as a way of showing progressive disclosure. Taking each “page” of the tutorial as a “div” of the main page, I instead coded the site using parallax. In doing so, I was able to use this progressive disclosure as a way of telling the story of paper prototyping, as opposed to providing a tutorial.

I tested this new design with MHCI students, and both the visual design and disclosure of information was much more well received for a a couple of reasons:

  • using pictures to separate text segments removes the competition of user attention between text and pictures, while also creating natural break points for the user
  • having all information on one large page stresses recognition over recall - if a user forgets a term, it’s much quicker to scroll up and down a segment or two than to have to navigate between pages
 

FINAL TAKEAWAYS

Although the coded prototype is functional, it is still lacking navigation. My next step would be to add in a navigation bar to help users jump around the site more easily. I'd also like to create a progress bar so that users can keep track of where they are in the process.