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


4 weeks
Solo project


Front end coding
Paper prototyping

xperience Design



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.



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

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



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.