GR2 - Designs (ShutterConnect)

Scenario for finding a photographer

Blanco, a 29 year old Mexican investment banker living in North Dakota (zipcode: 58102) is getting married to Oprah on July 4, 2011. He's looking for a wedding photographer and the price limit is 10,000$ for the coverage of the whole day. His friends told him about ShutterConnect and he is using the website for the first time. He would like to get a bunch of prints for his extended family in Mexico City. 3 photographers come up:

1. Kalashnikov (40 miles away, 9000$, 4-star reviews by 20 people)

2. Mobutu (55 miles away, 5000$, 3.5-star reviews by 13 people)

3. Emilio (55.9 miles away, 10000$, 5-star reviews by 42 people)

After checking out their profiles and sample photos, Blanco decides to go with Emilio.

Design 1

When Blanco goes to the ShutterConnect site, he sees a prominent search box that accepts natural language queries like "Photographers for birthday party on dec 31 in boston".The only other actions possible on this page are signing in (via box in top right corner), and signing up (bottom of the page). Since this is Blanco's first time, he just types his query as "Wedding on July 4 in North Dakota" and clicks on the "find photographers" button. He is then presented with a list of photographers who match his query:

The top of the page contains a search box so that he can create a new search if necessary. Below it, in the "information area" we list the number of results found for his query along with filtering options like budget; we also use the information area to display what we parsed from the user's natural language query. Below this information box is a list of profiles of photographers. A profile contains photographer's photo, short bio, ratings and some sample pictures. We also have an "x" button next to each photographer so that Blanco can remove that particular person from his list of search results. Clicking on the short profile takes Blanco to the photographer's profile page containing more details, reviews and sample pictures.

Blanco can also use the "Save Search" feature to save this query to revisit it later; this is because we know from user study that they like to take time to pick photographers for their special occasions.

Analysis of Design 1 for finding a photographer

• Learnability
  • Simple homepage, with few elements
  • Looks like Google page (consistency with popular interfaces)
• Visibility
  • Having search parameters at the top of the results page makes it clear what was searched for.
• Efficiency
  • Search bar at the top of results page makes it efficient to start over
  • Typing whatever you want and letting the system parse makes searching efficient
  • Reviews can be filtered to show ones that are most similar to your case
• Error Prevention/Correction
  • Modifying search criteria is easy
  • Coding up the natural language processing will be difficult.

Design 2

In this design, Blanco is first presented with a login page, where he enters his user name and password. Upon logging in, Blanco is directed to the client's home page, where he can either click on the 'Search for photographer' button, or decide to review a photographer. Blanco clicks on the 'Search for photographer' button, and is then directed to a page where he can enter his desired search parameters. He enters Boston as the location at which he would like to receive the photography services, on the 4th of July starting at 8am. In the budget textbox, he indicates that he is willing to spend between $5,000 and $10,000. He then clicks the 'Search' button to proceed. This directs him to a page where he is requested to confirm his search parameters. If he is not satisfied, he can click the 'Back' button to re-enter his parameters. Blanco is satisfied with his parameters, so he clicks the 'Proceed' button to conduct the search. Blanco now sees the results of his query. His search parameters are at the top of the page, and his results are below. Blanco uses the provided scroll-bar to look at the first few photographers, and decides that he would like to hire Emilio's services.

Analysis of Design 2 for finding a photographer

• Learnability
  • Starting page is a series of forms consisting of textboxes and buttons, which is familiar to Internet users.
  • Wizard Pattern helps guide the user through the stages.
• Visibility
  • Having search parameters at the top of the results page makes it clear what was searched for.
• Efficiency
  • Confirmation page increases time taken to view search results.
• Error Prevention/Correction
  • Confirmation page gives a chance to check search criteria

Design 3

LEFT: At the top, there are 3 main tabs: Find A Photographer, Write A Review, For Photographers. The homepage is the Find A Photographer page. It is a series of questions about the details of the type of photographer sought for the event. It has questions such as the purpose of photography (wedding, fashion, advertisements, ...) and what kinds of outcome is expected (prints, albums, ...), how long the photography session will take, if a 2nd shooter is needed, and the budget for the event. If the user knows the photographer's name, he can just type it at the top and get results without going through the questionnaire. The questionnaire is concluded with a big Find A Photographer button.

MIDDLE: After the initial questionnaire, we see the questionnaire items on the left in a vertical bar. They are always visible and can be changed, with immediate impact on search results. At the top, the number of results is displayed along with options for sorting the data. In the lower right portion of the page, which takes most of the space, photographers' short descriptions, contact information, photos, and summary of reviews can be found.

RIGHT (2 photos, continuation): When you click on a photographer's name or photo, you will go to their detailed profile. There is a big Go Back To Results button. Then, at the top is the contact information and portrait of the photographer. A photographer's own description, sample photos, and pricing details, and reviews can be found after that.

 Analysis of Design 3 for finding a photographer

• Learnability
  • Looks similar to flight/hotel booking websites
  • Presence of tab bar with different actions (e.g. "find photographers", "review photographers") makes it easy for new users to get an idea of what they can do with the site
• Visibility
  • Search criteria is always visible in the sidebar area
  • Highlighted tabs to show the task they're performing
  • Number of results and pages shown to get an idea of how many photographers are available
• Efficiency
  • Dynamically update results
  • Slider to adjust budget range instead of typing numbers
  • Primary and secondary sorting of search results for efficiency
• Error Prevention/Correction 
  • Effects are immediately visible, and actions are easily revertible (e.g. toggle checkbox, select a different option from dropdown)

Scenario for writing a review

On July 5th, Blanco wakes up with a throbbing headache. He checks his email, and finds that the photographer, Emilio, has attached some pics he took at the event. Half excited and half anxious, Blanco opens the attachment, only to find that every picture has red eyes, the Armani logo on his suit is not visible, and his wife's gown magically changed color from white to cream. Furious, Blanco logs into ShutterConnect, to let the world know about the atrocities that have been committed against his person.

Design 1

Design 1 requires Blanco to be on Emilio's profile page to leave a comment; he can do this in multiple ways: use the "saved search" feature to go back, pick Emilio from the list of photographers he has used through ShutterConnect, or by searching for Emilio in the search bar. Emilio's profile page looks like:

Blanco clicks on the "Add Review" button at the header for reviews. Upon clicking, the following form appears in place:

He can now express his displeasure by giving Emilio 1 star and writing snarky things in the review body. To post the review, he clicks on the "Post Review" button, or if he's feeling merciful he can click "Cancel" and not post the review. Posted reviews appear instantly and can be edited or deleted by using the "Edit" link that appear on reviews left by the user.

Analysis of Design 1 for writing a review

• Learnability
  • Not as learnable as just having a form that is always visible on the page
• Visibility
  • Visibility problem: need to be on photographer's page before "add review" button is even visible
• Efficiency
  • Adding review can be done in the same page (doesn't require going to a new page or any additional scrolling)
• Error Prevention/Correction
  • Cancel button to escape "review entering mode"
  • Error correction: there's an "edit" link on the reviews you wrote so you can change/delete them

Design 2

In this design, Blanco is first presented with the login page, where he enters his user name and password, and logs in to ShutterConnect. He is then presented with the client's home page, which has a textbox provided for those users wishing to review a certain photographer. Blanco enters Emilio's name in the textbox, and, upon pressing enter, is directed to a page with some of Emilio's info, and some fields which act as a guide for him to review Emilio's services. On this page is a drop down box for Event Type, under which Blanco enters 'Wedding'. He also enters the date as July 4th 2011, and enters some prose in the textbox labeled as 'Experience' describing the pictures that he received for his wedding. Blanco then gives Emilio a 3/5 rating, and hits the 'Submit' button. Blanco is now directed to a page where he can see the review he entered, and is given a choice of proceeding- a 'Continue' button, updating the review- a button labeled 'Update Review', or deleting the just-entered review altogether- a button labeled 'Delete Review'. Blanco hits the 'Continue' button, and is directed back to the client's home page.

Analysis of Design 2 for Writing a Review

• Learnability
  • Standard form-format with widgets like textboxes and dropdowns
• Visibility
  • "Review photographer" is explicitly mentioned as a task upon login
  • Photographer's info is also shown on the add review page so that users can easily refer to details about the photographer
• Efficiency
  • Internal scrollbar for the review items makes it less efficient to view all reviews
• Error Prevention/Correction
  • Photographer's info shown on add review page to help prevent mishaps

Design 3

LEFT: Write A Review is in the middle of the top tab. Users sign up before writing a review. 
MIDDLE: They search for the name or business name of the photographer and get the short descriptions for results, to make sure they review the right person.

RIGHT: They review by writing a star review, indicating the time of service, and a short description.

Analysis of Design 3

• Learnability
  • Uses standard widgets: dropdowns, textboxes, star ratings (like in itunes)
• Visibility
  • The state of the ratings for each criteria is shown at all times
  • Updating ratings/fields is done in-place so effects of changes are also always visible
• Efficiency
  • The reviews are quite detailed, so adding a review requires more time than some users would like.
• Error Prevention/Correction
  • Disambiguation page for different photographers with same name

Scenario for photographer account registration

Having grown up the son of a lowly sheep farmer and a housewife, Emilio decided to make his own way in the world, and improve upon his parent's station. While in college, he studied the arts, and planned on getting into either fashion design or photography. He met a beautiful American girl who was a promising landscape painter. One thing led to another, and Emilio found himself in North Dakota. Once there, he realized there was a painful shortage of photographers, and that North Dakotans are very ceremonious people. Therefore, he picked photography, and has had a successful career, having taken professional pictures for the past 10 years. In his second year of photography, Emilio was introduced to ShutterConnect by his friend, and decided it would do good to his budding business. People noticed his prowess, and he is now one of the most highly rated photographer on ShutterConnect.

His business is called Emilio Shoot. His phone is 533 444 5343. He typically charges between 8000-12,000$ for whole-day wedding shoots. He also does portraiture and charges 465$ per hour.

Design 1

Emilio uses the "Sign up as photographer" button on the homepage, where he enters information like his business name, phone number and budget. He is then taken to his profile page which will look the same as it does to the clients. Since he has just signed up, the profile contains placeholders where his profile photo, his biography and his portfolio pictures would go. To edit any of these, he clicks on the element (or the "Edit" link that is near the element) to get an in-place editing field:

In the figure, Emilio is editing his "short biography" which also shows up in the search results page. If he's happy with the changes made to the element, he clicks "Save", otherwise he clicks cancel and reverts the page back to the way it was before he clicked "Edit".

The portfolio area has placeholders for his pictures (click to add), and can be dragged around to rearranged.

Analysis of Design 1 for Photographer Account Registration

• Learnability
  • Consistent with popular web2.0 sites like flickr, but might be difficult for a beginner to learn

• Visibility
  • Editable fields appear only when you click on an item. This is less visible than having a textbox always visible.
• Efficiency
  • To element, you click on it (e.g. clicking on photo brings up the upload photo overlay)
  • You can switch tasks (search for photographer) by using the search bar at the top
• Error Prevention/Correction
  • If you make a mistake, just click on the element and change it.

Design 2

In this design, Emilio is first presented with the canonical login page upon first accessing the site. Not having an account, Emilio clicks the 'Create Account' link, and is directed to a page where he is asked to provide some personal information- his name, email, desired user name and physical address. Last but not least, Emilio is asked if he would like to sign up as a photographer or a regular user. He hits the 'Sign up as photographer' button. Emilio is then asked to upload any sample photos he might have. He has a few, so he clicks the 'Browse' button, selects some pictures from his desktop in the dialog that pops up, and hits the 'Upload' button to upload the pictures to ShutterConnect. Emilio then provides a link to his personal website in the provided textbox, enters his pricing package in the provided textbox, and decides to upload his profile picture. He then hits the 'Continue' button, and is directed to a page where his profile page is presented to him as it would appear to a regular user. He has the option to update his new profile by hitting the 'Change' button; Emilio is satisfied, so he proceeds by pressing the 'Continue' button.

Analysis of Design 2 for Photographer Account Registration

• Learnability
  • Standard form layout for each step of signup
  • Wizard pattern to guide between one profile editing page to another
• Visibility
  • Visible confirmation via message bar upon creation of profile
• Efficiency
  • Less efficient because process is split into multiple steps
  • Sample photos are added one at a time.
  • Price structure is entered as text so photographers can enter their customized price message.
• Error Prevention/Correction
  • Distinct buttons: "sign up as photographer" and "sign up as user" to prevent users accidentally signing up as photographers

Design 3

LEFT*: *Photographers also need to sign up and/or log in. Because a lot more detail is required, it is unlikely that users will sign up by mistake as a photographer.

RIGHT: The photographer's profile page looks a lot like the profile page of the photographer that the user sees. The difference is that everything is click2text editable for the photographer. The entire pricing set is edited at the same time. Little save-cancel buttons appear for every slot (description, contact info..). Sample photos are populated with placeholders that the photographer will replace.

Analysis of Design 3

• Learnability
  • Assumes greater computer skills because of fewer affordances (e.g. clicking on your name turns it into a textbox where you can change your name. Compare with having a textbox on the page at all times).
• Visibility
  • Profile editing page looks very similar to the profile page that user's see. This way, photographer knows exactly how the change will be reflected.
  • Profile items become editable widgets (textboxes and textareas) when clicked. This presents a visibility problem.
• Efficiency
  • Single page presentation
  • Instant updating (no 'save page'/'submit' button instead you have 'save' button per field/section)
• Error Prevention/Correction
  • Requires details for sign-up (business address, phone) so that users will not accidentally  sign up as photographers
  • Accidental deletions can be reverted by pressing cancel