• Partially functional prototype or mockup
• The flow and interactivity of your site must be either demonstrated in your prototype or described separately.
• The logic and algorithms for your project’s functionality described in pseudocode.
• Demonstrate the library or API you’ll be using either in your prototype or through a proof of concept example.
• Document the process so far including iterations of your visual design, problems or roadblocks you encountered and how you resolved them (or not).

Design Mockup

Here is what my overall website will look like. The flow and interaction design is described below in the next section.

Flow and Interactivity

I will be using the Cropper.js jQuery library in parallel with a scroll view to guide the user through the different information boxes. When the user mouses over highlighted “hotboxes” on the image, information will appear in the box that is shown to the left of the woman’s head on my mockup. The cropped view of wherever the mouse is on the page will appear in the box above the information blurb.

The header bar, the top and bottom left boxes will remain fixed in their positions as the user scrolls down the page. So more “hotboxes” will appear, but the info boxes will keep their position.

The cropped view will have a static canvas size that the user moves around the screen. As the user scrolls down the page, new “hotboxes” will appear for them to mouse over and get access to more information.

At the bottom of the page there is one last information box with some more explanation of the gender gap in the outdoors, micro-aggressions women experience, as well as some more safety concerns for them.

Logic and Algorithms

My website has a pretty simple algorithm. All it uses Cropper for is to show the zoomed in image of the woman’s body in the top left box, and determine what information to show in the bottom left box.

// user clicks and drags canvas over one of the highlighted boxes
     // cropped view appears in the top left box
     // check to see what the coordinates of the canvas are
         // depending on where the canvas is, edit the innerHTML
            of the bottom left box to show information

Library I’m Using

I decided to use the Cropper.js library, found off of JavaScripting. Unfortunately, I have been struggling to do this successfully. Thankfully the documentation online is very detailed so I should be able to troubleshoot. Some resources I have been looking at are the Cropper github, and a very detailed Cropper demo to implement my own example of Cropper.

The reason I chose this library to augment my interaction was to give the user more of a sense of investigation into the woman pictured on my website, rather than just looking at her.

 Iterations of Visual Design

Building off of my first design iteration, I wanted to have a bigger image for the user to look at. The concept behind that was to draw more attention to the woman athlete on the screen, and humanize her more the the user. So, I moved from a single view page to more of a scroll view. This allowed me to have longer blurbs of information, and give the user more of a guided interaction through all of the informational pieces I want them to read. Some issues I’ve been having are implementing the Cropper library in my own code, which is frustrating.

Below two mockups of the two design iterations can be seen. I also moved to a new photo that I took to avoid any copyright issues.

Like I mentioned before, I am continuously struggling with Cropper but am confident that the online documentation will be enough resources for me to figure it out for my website.