Page History

This shows the login page. This is fairly standard for login pages, so should work well from a learnability standpoint. It also presents both options for returning users and new users at once, so it is pretty visible. One area that it lacks visibility compared to Design 1 is that it is not as effective at visibly displaying if the user has made an error in entering their name, email, etc. (Design 1 uses red x's and green check marks next to the fields to signify if they have been correctly entered). This could be considered a weakness in error prevention.

After the login page, the user is brought into editing page. The sections that can be included are listed for visibility. Once they are checked, that section expands and allows the user to enter information and media for that heading. These check boxes provide the affordance of either including that section or not. However, they do not really give the affordance of expanding that heading, which is a hindrance for learnability. This kind of functionality would usually be signified by a tree-like structure with arrows pointing down when expanded and to the right when not expanded.

Save and preview buttons are located at the top of the page. The idea is that these will probably be frequently clicked buttons, so placing them in a standard place like the top of the page will help learnability and efficiency.

This shows the same page with some of the headings checked, and thus expanded. They now provide areas to enter information about that topic. This information corresponds to the normal information that companies look for in a resume. This will help with learnability if the user has made several resumes or applied for jobs online before. Areas like education will start out with fields for one school, but the user can easily add another school by clicking the "add another school" link. This has the affordance of an icon with a plus sign to signify the functionality of the link. The work experience section has a link to "add media." This is the feature of our site that makes it unique. This link will expand the interface to add media to a particular project. Overall this page is designed to have very few popups (only when clicking the browse button to upload media does a popup open with the user's local file system). Everything is linear and inline to make it easy for the eye to follow, increasing visibility.

This shows the expanded view for adding media after clicking on the "add media" button. It uses a tab-like interface to distinguish between the different types of media that can be uploaded. This is somewhat similar to the way Facebook uploads media to posts, so users should be somewhat familiar with this interface, increasing learnability. It also includes a new "add media" button underneath so that more than one media can be uploaded.

The bottom image is when the preview button is clicked. This uses a "lightbox" preview so that the user can easily return to the editing page, helping efficiency. This view is primarily about visibility, essentially letting the user see what the resume will look like to potential employers viewing the resume. One distinction from our other designs is that media, whenever possible, is embedded in the resume. For example, instead of having a link that pops up a video or image, it is embedded in the page with the text. This is also meant to help visibility and efficiency at viewing this special media.