User Interfaces Assignment 3: Heuristic Re-Design of Craigslist (English) Completed by Group 5 November 10, 2015 Phase 1: Analysis of Usability Issues Homepage Error 1: Overall the page is overwhelming due to the large amount of text, lack of color and lack of structure. These make it hard for users to find what they are looking for. Everything appears highlighted, even the subsections, because of the use of blue. “Personals” is the only category title in black, not because of its actual significance but because it is not a clickable link. This is an issue as it may suggest users to look here first, since it's the only text that looks different. While blue is consistent to show the viewer a clickable link, being given so many links at once can be overwhelming to look through. To navigate efficiently, users should be able to identify the most important objects to view immediately, so they can begin the search to find what they are looking for. Solution 1:

● Providing a cohesive logical page-layout should help users find what they need right at the home page. To do so, we must improve on the aesthetic and the minimalist design of the site by imagining the process funnel of users, as they go through the task of finding something of interest on the site.

● Using a grid-style to organize content and to maintain consistency across the rest of the pages.

● Build a homepage layout that provides strong cues to define navigation and content, and that downloads quickly.

● First to remove the current overwhelming effect, we can reduce the amount of clickable links at first glance, making them only visible to the user when they are ready.

● We can use descriptive and distinctive category names, which the user can click on first, which after will show the rest of the options within the category. If a user does not typically use search bars, this would still allow them to find what they are looking for.

● At first read, a user should be able to understand how to use the categories and advertisement lists under these categories to find what they are looking for in.

● Seductive images may also be incorporated and could help illustrate what they can expect to find when browsing categories or the items in the advertisement list.

Error 2: The page design is unappealing with a dull color palette and a sea of text that is tiring to look at. There is also no consistency in the typography style punctuation marks. This makes the page seem disorganized, and a disorganized page layout can confuse site visitors. Solution 2:

● Giving the website a nicer logo and font choice for the brand name would make the page more appealing, encouraging users to stay on it longer and promote branding. It would also help to choose a slightly differentiating font for the category names or

capitalizing this, to help differentiate these from the advertisements within that category.

● The style of the links should also remain consistent, each link should start with a capital letter and no punctuation marks should be used. This makes the lists easier to read.

● The list should be in alphabetical order and each category should be limited to 30 advertisements per category, to keep the list from becoming too long.

● It is also important to choose descriptive and distinctive names to classify advertisements, so users can know what to expect to find when clicking on it.

● Using images can also help by adding an interesting visually layer while providing examples for what could be found in the categories. This can motivate visitors to look through the web-page, as images tend to be more alluring than text. This would be beneficial as a homepage should seduce visitors with content, regardless of whether it is personalized.

Advertisement Listing Page Error 1: The card design pattern, is utilized but the user is not provided with very much information at a glance. At this point the user is only given, an image (if applicable), a title and a price. The user is required to click on to the card to find out more information on the advertisement or find a way to contact the seller. This makes the browsing process tedious, especially if a user wants to browse through all his or her options before clicking one or has already found the ad he or she was looking for and wishes to immediately contact the seller. Solution 2:

● Improving on the card design pattern by rearranging the card layout, making space to add a little more detail and shortcut functions. The added details would help users make better decisions, helping them find what they are looking for faster while the shortcut functions help them accomplish tasks faster.

● A description of the ad could be incorporated limited to 150 characters or a feature listing so that the content is still browsable at a glance and not overwhelming.

● The shortcut functions such as saving an ad for later or contacting the seller, can also give users more control over their experience.

Error 2: Since buttons are also in blue this causes confusion as blue is now not just a link but also a button. Titles of ads are also not consistent in style. Refined search options are not in the same place as “all”, “by distributor”, “by dealer” and the other checklist options are on the left while the “+New” and euro icons are on the right. There is also a large amount of white space that makes the results seem discouraging, this could lead a user to abandon the process, even if he or she could have simply browsed the wrong category by mistake. Solution 2:

● Maintaining consistency in typography, reusing the styles in the homepage while managing ad titles, ensuring each title utilizes capitals for the first letter of the title and placing a letter-count limit.

● Refined search options should be grouped into one place and also be minimized or eliminated if not frequently used (ex. we were unsure what “search titles only” refers to, so we would not use this checkbox).

● Making images mandatory for ads could also diminish the overwhelming amount of whitespace and make the page more visually appealing.

Error 3: You can only search for a related item within the same category, this makes it confusing as when entering the search function a user may assume that he or she is again searching within the whole site rather than just the category. The process of searching again from the entire site also requires the user to go back to the homepage then search again, an extra step which seems tedious. The breadcrumbs also act as the main navigation menu which may not be intuitive for users, since this is not typically seen in other websites. Solution 3:

● Provide a shortcut and giving the user flexibility by providing a way to search the entire site again without leaving this page.

● Incorporating a menu that allows users to navigate outside the category. ● The menu may benefit to being of recognizable design so that users can immediately

know how to navigate through the site.

Product Page Error 1: There is a lack of information in which a user would need to make a decision in buying a product. There is also too much white space, which makes the page feel cold and unappealing. No added details are provided. Overall this page doesn’t seduce a user to pay interest to the advertisement. Solution 1:

● Fill the space with more meaningful information about the product. Providing a function to see more pictures, a description of the features etc. Giving users all they need to make a decision of interest

● Tightening the design so that there isn't too much white space and instead more functionality.

Error 2: Unclear as how to contact the seller. No way to know who the seller is as no name is provided anywhere on the page. The “reply” button is not be intuitive as a way to contact and its position is in an awkward place that is not familiar. Clicking on this also goes to an external link which takes time to load, while the user begins the task on this page he or she completes it by leaving the website. Solution 2:

● The “call to action” contact button should also be easily noticeable on the page with the use of an icon (providing text with the icon to ensure clarity of what it symbolizes).

● A form can be used on the website to send an email instead of leading the user out of the website. This would increase the chances of users fulfilling the task of contacting a seller, since it would eliminate the dependency on other websites. Including other forms of contact such as social media, could also be included in the same way, by providing icon buttons.

● A little section could also be included for information about the seller.

Error 3: Unsure if the previous and next buttons corresponds to all the products within the category or that of which belonging to the particular seller. There no way to see the rest of the advertisements from the same category on this page. Solution 3:

● Other suggested ads from the same category could appear further down the page along with another link to return the ad listings. As to include navigation tools that relate and promote so that customers find things that they might otherwise miss, but may be found farther down the page.

Phase 2: Description of Redesign We really liked the functionality design of this website and so took some inspiration from it: http://www.recycler.com/search?keyword=bike&location=Los+Angeles%2C+CA&category= Homepage

● We redesigned the homepage to promote more brand recognition, be more organized and to be more visually appealing. Since the page was overwhelming we decided to use a task-based design process, where placed certain functions in order of how a user would perform the task of finding an advertisement and then contacting the seller

● First a user would want to recognize if they are on the correct web-page. This is what the banner provides, as it would be a clear identification that he or she is on Craigslist.

● Next we want to make sure that he or she is looking in the correct location, so the first step is identifying this. There are 3 ways of completing this step, it can be automatically populated using GPS, the user can type it in or use the tracker button to find his or her location. When typing the location, a list of suggestions should drop down to make this process easier.

● Next we provide 2 ways of finding an advertisement. The user can choose between using the search bar or looking through the categories. To improve the functionality of the search bar, we added a “go” button to provide some sense of interactivity as some users may not know to press “enter” on their keyboard (ex. Google still has a “google search” button).

● We really want to promote users to use the category option, since here is where we can really test the organization, navigation and structure of our redesign for the homepage.

○ The categories would have an image background that is more opaque and the title of the category would be in focus.

○ The positioning of the categories are popularity-based in as well as relevance-based. We knew which categories were most popular from looking at the mobile version Craigslist. The relevance-based organization is used by placing relating categories nearby each other (ex. “services” is below “for sale” while “gigs” is below “jobs” as these categories are relatable). We also changed the category name “personals” to “relationships” because we felt this described the subcategories better and added a “free giveaways” category because we thought this should be a category of its own.

○ Clicking onto a category would make a rectangle appear underneath with an arrow attaching the category title to it (for inference purposes). This rectangle holds the subcategories of advertisements within that category. If there are subtypes, these options will drop down, as the user goes through the list. The interactivity aspect helps to capture the user’s attention.

○ Advertisment cards would then appear on right, to give users an example of what types of advertisements they could find within the category. This helps to lead them closer to what they may be looking for, acting as scent information while also seducing users to continue browsing.

○ From here they can then either click on the advertisement they may already be interested in which would lead to that advertisement page (providing a shortcut) or click the “see more” button which would lead to the advertisement-listing page showing all the advertisements of that same type.

○ We also moved the “event calendar” into the “events” category rectangle as we found this to be only useful if the user is interested in seeing events.

Advertisement-listing Page

● The page follows the same grid-layout as the homepage, while being also being task-based organized.

● We kept the breadcrumbs of the original design because we feel this would help users know where they are in the website which could be handy seeing as there are many categories and advertisements.

● We provided a clear way to return back to the homepage and a search bar for the entire website so give the users flexibility. The search bar has “Looking for something else?” to help users communicate with the webpage and provide a sort of virtual conversation which may provide the feeling of a more personalized experience.

● Other real-world connections that we implemented include our use of icons for some action buttons which we made sure to label as this is an important usability factor in the case a user may not understand the real-world connection because of culture or age difference. We feel that these icons are intuitive while also having a friendly appeal making the buttons and page more inviting.

● All the narrowing options are grouped together so users don’t have to jump all over the page to do this.

● Each advertisement is given a card, which has all the relevant information we feel would be required to make a decision at this step. We also provided shortcuts for saving or contacting the seller, again giving flexibility to the user.

● We also provided a way of navigating to other categories (or within the same category) with the vertical menu on the left.

● If there are no more ads for a category, we want to place a message to let the user know this and provide a shortcut to return to browsing.

● Once a user clicks on the advertisement card, he or she will be lead to that advertisement’s page.

Advertisement Page

● This page is consistent in style with both other pages while also following the same structure as advertisement-listing page. The same navigation tools are also provided.

● Here we wanted to add some dynamic elements to make the advertisements more appealing. We provided an area where a seller can put some information or a picture

of themselves, to give the page a more friendly tone and help to build trust with the website (seeing as these sellers are real people).

● We also thought that users may want to see more pictures of a certain product that is being advertised, so we implemented this functionality in our design. The 2 arrows on each side of the product image placeholder allow a user to go through more images. The numbers at the bottom represent how many pictures there are and which one the user is on in the order.

● The boxes for information provide structure for the content so that the information does not get overwhelming. The box to the right of the advertisement/product image display simple information while the box below goes a little more into detail.

● After this we have 3 icons, we simply added the “share” button so that a users could share an advertisement. We felt this icon would appropriate here and not in the previous “advertisement-listing page” because we do not think a user has received enough information at this step to promote an advertisement to their friends or family.

● When the user clicks onto the contact button, a field appears in which they can fill out in order to send a message. This would allow users to complete the task within the website instead of having to leave complete it elsewhere. We feel this makes for a better experience as a user can fully complete their task in one space.

● A feedback message is also given to ensure users that their message has been sent. An email address could be provided in seller information section, which a user can use instead if he or she decides to.

● Finally at the bottom we provided a space to place similar advertisements that may be of interest to the user, to make the experience feel more personalized. The arrow button on the right would make more advertisements appear in which the user can scroll through.

Mobile Versions

● Designing mobile-first is usually a good way to figure out how to organize a website with minimalism in mind, since you want to make the most of the space available to you. Thus before designing our full website, we actually designed the mobile version first. Note that this was before realizing that Craigslist actually has a mobile version, although the website itself is not responsive.

● For this redesign however, we decided it would still be a good idea to make the website responsive. The design of our desktop version can easily also fit a tablet screen, as we could simply condense the width without breaking the design. Then for smaller screens, our mobile version can come into play.

● If you look at the Craigslist website and compare it to their mobile website there is quite a big difference in the way they look. An example of this is the organization of categories, as the mobile version differs from that of the website. The mobile version lists “for sale”, “jobs” and “housing” first, which seems to follow a popularity-based organization system while the categories in the full website begin with “community” while “for sale” is further in the middle of the page.

● Thus for our mobile redesign we wanted to stick as closely to the full website as possible so that when users switch platforms they are not surprised by anything and are able to use the website in any platform easily.

Phase 3: Prototypes (See above for Wireframes)