I designed a website to tech new 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.