I designed a website to tech aspiring UX designers at CMU
how to create and test their own paper prototypes.
Front end coding
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.
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
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.