Prototype Photos

Task 1

Task 2

Task 3

Briefing

This UI is designed for international students who attend top schools in the United States and are looking to prepare a resume.

Background on International Students

Imagine a freshman at a top U.S. college who sees everyone getting ready for the career fair in September.  He is new to the country and doesn’t understand exactly how recruiting works.  His friends tell him that he needs to talk to recruiters at the career fair, collect business cards and send follow up emails.  Most importantly, he needs a high-quality one-page resume that summarizes his previous experience to future employers.

Building a Resume

He is not sure how to get the resume built, and one friend tells him about IvyPlusResumes.  Here, he can go online, build a resume, make it publicly viewable to recruiters, and print it out.  He opens IvyPlusResumes, creates an account, and begins using the site.  Please relax as you consider the challenges of recruiting for international students.  Feel free to think aloud and ask any questions.

Scenario Tasks

Task 1

In order to write a resume, list all of the necessary details about your past experience.

Task 2

Imagine you are a freshman at Brown from Nagoya, Japan.  You filled out your past experience on the previous page, which you now see on the left half of your screen.  Create and save a resume for the career fair.

Task 3

You saved your resume.  Get ready to go to the career fair.

Observations

We conducted six user tests with our paper prototype during the class sessions.  Two of these students were international (one was a graduate student and the other was an undergrad).  We also ran two additional tests on international students in a dorm.  Below are typed notes and a summary of the feedback we received regarding each task.

Task 1

Notes

• Users generally click on input field and then start typing
• A couple of users use tab to move between input fields
• User sometimes tries click on hint bubbles
• User expected correct examples in hint bubbles
• One user would have preferred separate start and end date input fields
• One user thought “Relevant Coursework” meant include a single class
• One user tried to add a long-form description into “Comment” field
• Bullet points could prompt the user to use short, direct descriptions
• “Address” field might be confusing (is it a mailing, home, or college address?)
• “Comment” field might be confusing, consider changing to “Accomplishment”, “Task”, or “Objective”
• “Add Comment” link sounds like it saves the text typed in the “Comment” field
• Missing a “Save” or “Next” button on first iteration

Summary

A few users chose to click through each text box, while others wanted to tab through the boxes. The users who wanted to tab through the boxes not only wanted to tab through the individual details of one category (e.g. “Education Details”), but also wanted to tab from section to section.  The users did not have trouble filling out information and were helped by the help bubbles on the right side.  Changing the help bubbles to specific examples would have helped some users and we experimented with this on the second iteration.

One person wanted a calendar feature to pick dates.  We added the feature in the second iteration, but people thought it was overly specific.  They wanted to have an option to say “Fall 2011” or something of that nature, which the calendar option would not allow.  Several users wanted to add a phone number and one tried to add multiple email addresses (he searched for an “Add Email” link similar to the “Add Comment” links).

One user had concerns about the biographic information, saying that “Address” (specifying mailing address) was confusing. She did not know whether to put a home or college or other address.

The term “Comment” confused our users and we tried several variations.  We switched to  “Accomplishment” in the second iteration, which was helpful.  Adding specific examples in a help bubble would have been helpful.

Task 2

Notes

• Some users did not realize that the task involves drag and drop from the first sight
• User preferred if the resume was pre-filled with biographic and education details
• User tried to scroll through his information on left side to see everything he had filled in
• User wanted to control the ordering of the draggable elements, and have the ability to reorder them within the resume container
• Use appropriate mouse cues to indicate sortability of items in resume
• User thought that some of the section headers are clickable  
• Most users liked the idea of restricting the resume to one page
• Some users would like to have different templates for resumes
• Users liked to have a clear-to-see large button for saving the new resume
• Users would like to be able to see clearly how “Save” and “Save As” work: show a dialog for doing the saving process

Summary

Users were initially confused by how to move the details from the left side of the page to the resume template on the right.  They generally tried to click on the details to see what happened and when this caused a section to detach, then dragging and dropping was typically obvious.  One user did not understand the drag and drop interface. The one who did not asked for a hint indicating what to do.

Users did not realize that the resume only takes one page worth of material and rejects material after the resume passes the limit.  However, they all agreed that this was a logical way to build the resume.  Users quickly realized how to drag sections off of the resume.

One tester asked us why we did not pre-fill education and biographic information on the resume, since they thought it was always necessary.  In the second iteration, we pre-filled these details and people appreciated it.

Once the resume was crafted, people tried to remove and add things and switch the order of items.  Everyone was okay with the ordering of biographic details followed by educational details, work experience, and leadership details.  No one tried to change the order of the sections.

Task 3

Notes

• Most users immediately click button that says “Print”
• Users like the small resume thumbnail
• Several users click on thumbnail and expect it to expand to full-size preview
• Most users want want to print directly (as opposed to saving a PDF)
• Everyone confused by “Share” button on first iteration
• Consider changing the term “Share” to “Drop” to suggest a resume drop, but this confused one user
• One user wants to share on Twitter, Facebook, or via email
• One user wants to select specific companies to share with
• Consider adding separate “Print” and “Export PDF” buttons
• Consider highlighting “Share” button, in addition to a help bubble, to prompt the user to share resume

Summary

Some users tried to first move between the three tasks by clicking the icons on the top.  They then tested out the icons.  The “Edit” button took users back to the second task, as expected.  

The “Print PDF” button caused problems for some users.  Some students wanted to immediately print the resume and expected this functionality.  In the second iteration, we used two buttons: “Print” and “Export PDF”.

The “Share” button initially confused everyone.  Our intent was that this button would make a specific resume visible to recruiters interested in international students (it switched to an “Unshare” button on-click).  Some wanted a dialog box to pop up to allow them to share with email addresses.  Others asked that it be shared with social networks.  Lastly, everyone wanted to see what companies their resume was being shared with.  In the second iteration, we included a help bubble with additional explanation and changed the wording on the button.

Across Tasks

We have 3 buttons at the top of our screen to indicate which step of the process the student is on.  Surprisingly, not many users clicked these buttons. All users used the “Save and Continue” button when we added it to the first page on the second iteration.

Users liked the help bubbles and wanted them to be consistent throughout the site.  Also, some students asked for examples in addition to hints in the bubbles.

Prototype Iteration

Task 1

• Added “Save and Continue” button on the bottom right corner
• Added a calendar selector for the date fields across the first task

Task 2

• Added a “Save and Continue” button on the bottom right corner
• Removed the “Save” button
• Pre-populated Education and Biographic Information in the resume as users always added these details to the resume
• Limited user input to a one-page resume.  We will consider a pop-up notification indicating that the student is trying to add too much information

Task 3

• Added a help bubble for the “Share” button in since many users were confused on what it exactly does.  This, however, created some limitations for the user as it shares the resume with all companies.  Therefore, we made the “Share” button bring up a dialog box where the user selects which companies they want to share the resume with
• Changed “Print PDF” to separate “Print” and “Export PDF” buttons

Across Tasks

• Changed icons to highlight the student’s current page, giving a sense of progress, as opposed to highlighting the other steps