...
After GR4, we basically scrapped our entire codebase and decided to start fresh. Our largest concerns in the site redesign were consistency in browsing behavior, clear and emblematic icons,
Registration
We went with a fairly basic registration page. However we do require email verification.
calling out the major behaviors available to users and minimalism.
Page layout
The image above shows a typical view of the main homepage. The layout has three main components to it(starting at the top of the page): the account/search bar, the navigation pane(where the logo is)and the content pane. The former two are reused on every page of the site and the content pane changes according to where you are currently located on the site.
The account/search bar and navigation pane are shared with all pages on the site and the content pane's contents change depending on the part of the site you are currently accessing.
Account/Search Bar
As pointed out in our early computer prototype, it made more sense to have an always-present search bar in a consistent location. We attempted to be consistent with the placement of the search bar with other websites and placed this in the upper right of our application.
Additionally this bar contains the login, log out and account management affordances as that is the consistent spot that users expect these functions to be in as this is their location on most websites.
We chose not to allow for autocomplete in our search bar despite our TA's suggestion for it. This decision was made because we perform full-text search over everything in our website and it was not clear whether populating a person's name in autocomplete would result in a link to the person's profile(Facebook-esque) or to their reviews.
Navigation Pane
The navigation was created in response to our prototype testing and heuristic evaluation reports that we needed to callout the major functions of our site more. We made decided that the primary functions of our site were to cataloging favorite reviews, View Suggested Reviews, Alter your Reviews and Post Reviews. Contacting a user for additional information fell out of browsing through reviews and so was removed from this part of the interface.
The links themselves have a hover attribute so you know they are more than just text. Further when you click on them in addition to redirecting they clicked on one becomes highlighted with the same tone as the hover color to give additional visibility to where the user is located.
Content Pane
The content pane is the primary location of information put on the site. It's contents vary depending on the page being viewed. The pages are listed below.
Recommended
Favorites
In an attempt to maintain consistency between browsing behavior, the favorites page mirrors the format of the Recommended page except that it only shows reviews that the particular user has previously favorited.
In an attempt at error prevention unfavoriting a review does not immediately remove it from the page as the icon is large and it is possible to errantly click on it. Instead the gold favorite icon goes to gray. Then when the user leaves the page and comes back it is no longer shown.
My Reviews
Post Review
Posting a review is a simple form that uses widgets that are common to the web. See be
View Review
There are three functions of this page: read the user's account of their time at the company, view the score and send a comment to the user.
The first two tasks are fairly simple and use the scoring iconography and plain text to convey the knowledge.
The second task of contacting a user we decided to only provide a the poster's email. This is primarily for two reasons. First it maintains the minimalism of our site as recreating the inbox is not something that provides much functionality over email. Additionally, if you graduated you will probably not be visiting Jobious as often as the undergraduate body so you are unlikely to check your messages on Jobious(and we hate the 'You have a message!' emails) but you will likely check your email inbox multiple times a day. Secondarily, this site is designed to be closed to MIT students and alumni. When looking for information about a position while in the job hunt you may also be trying to solicit contacts within the company from the reviewer, in which case having a known working email to forward is far more valuable than a closed system.
Registration and Account Updating
We went with a fairly basic registration and account updating page. However we do require email verification.
Updating your account you can set what all of the relevant data about your contact information, your courses and biography.
Implementation
Our implementation is a Django-powered website connected to a PostgreSQL database. We chose to use jQuery to help us implement some javascript. While we avoided much the the Ajax cruft that appears on many web 2.0 sites today we utilized it where in-page feedback was needed by the user.
We briefly investigated using additional plugins to jQuery like jQueryUI to help format the page. However we chose not to use many of the standard widgets that are available with it as early iterations using them were judged wrong for the theme. In retrospect we should have spent more time attempting to skin these to match the look-and-feel that we were after as it was far more difficult to implement them ourselves.
...
Task Number | Text Prompt |
|---|---|
1 | Favorite a job that is recommended for you. |
2 | Read a recommended review of one of your recommended tasks and contact the user that wrote it. |
3 | Post a review about the position you held last summer. |
4 | Find out what positions John Curtice has held. |
5 | Review your favorites and decide you no longer like one of them. |
6 | View jobs that pay "a lot". |
Usability problems
Task Number 1:
Problem: "Does the star do anything else?"
Minor The star is really large because we thought that favoriting a review is something that should be easy to do. Our site is somewhat chunky, but this clickable interface seems to convey that there is something else it is doing(or should be). The easiest option is to make the star smaller, but it is unclear how small is too small without further user testing. Another option would be to keep track of the total number of favorites and display this number when the user favorites it to give them some notion of how many other people like it.
Task Number 2:
Problem: "Does the recommended page contain reviews or average reviews?"
Major This is a problem that we overcame last time with the accordion to group reviews together. This time, however, we decided that the encapsulation should be at an even lower level of the review as opposed to
Task Number 3:
Problem: "What do the numbers mean in the dropdowns? Is lower better?"
Catastrophic Clearly we dropped the ball here. Our paper prototyping model even has this right. Our last version should have included the same icon language as the rest of the site in the same fashion as in the paper prototype.
Problem: "I have seen a review for Microsoft before, will this get grouped with those?"
Major Autocomplete here would have been key. While we do group them together in the background there
Task Number 4:
Problem: "Are these just reviews by John Curtice"
Minor
Task Number 5:
Problem: User had cognitive disconnect between "Star" and "Favorite"
Minor This was strange because we previously told the user to favorite a recommended job they did this without difficulty. However when they clicked on favorites it presented them with several that they had not clicked on(we reused the user account).
Problem: Unfavoriting a favorite should make it disappear immediately
Minor The user was upset that clicking on the star didn't make it immediately disappear from the favorites page as it is no longer marked as a favorite. When we told the user the reasoning behind this they thought the button was "so large that clicking on it almost had to be intentional". While we disagree with him as it is located fairly close to the
Task Number 6:
Reflection
The Waterfall Model Doesn't Work
Perhaps the largest failure that we had was using the waterfall approach to design as opposed to spiral model. Even though we did have several iterations of prototypes, with each one we made some rather sweeping changes that were inferred to be better based on user feedback from the previous test. Unfortunately some of these decisions were headed just in a different direction rather than the right one. We should have then gone and prototyped those and tested them before deciding that was the right way.
User test aggressively
We made the cardinal sin of assuming we are our users. We didn't really ask people what they thought of our incremental implementations along the way choosing instead choosing to assume we could make the decision for them. While that might work for experts we learned that we do not yet have that level of fluency in design language and user behavior and that the only way to get there is to actively test and retest to verify your assumptions until they begin to match user behavior.
...