Casestudy rediff-zarabol


Published on

Website - Design Review

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Casestudy rediff-zarabol

  1. 1. Case Study | Rediff Zarabol Design Problems & SolutionsContents:• List of Problem Areas• Design Solutions Proposed by: Sandeep Supal
  2. 2. Format of the Presentation Visual Design Information Design (Interface - Navigation | IA) Interaction Design Expert Review (HE) Proposition: Ad Feature Design
  3. 3. 1 1 5 1 2 2 3 32 4 4 4 3 5 5 ?
  4. 4. Visual Design Logo Design Area • The logo area of rediff zarabol has rediff homepage link at the top which takes away the identity of the logo and confuses user as 2 links at a proximity. • Chance of misclick is higher : Fitt’s LawAlignment & frame of Buzzing Now section• The Buzzing Now section looks in a hanging state and a separate section.• User has higher probability of confusion of Refresh to be linked as the section refresh of Buzzing now or the Refresh to be linked as the page refresh.• Clear section/frame of Buzzing now to be designed regards to its function.
  5. 5. Visual Design Hot Topic Box • Image talks 1000 words. Big images can highlight better recognition and recall of the trending topics. • Hashtag can be a small part for linking the Follow up.Icon and Type Face : Style Guide• The webpage losses the essence of Style Guide at many places, Font, Font type, Highlighted/Disabled format, doesn’t set to distinguish better, can be redesigned with a palette.• The icon size must fit the font size and the icon color and contrast should fit the page style guide, rather being images on CSS
  6. 6. Visual Design a b 5Page Divider : Grid• The Page divider (vertical line between content area) divides the page in a Grid that doesn’t suits a better visual angle.• The Grid should be designed for an aesthetic look, so that page/pane content fits the Grid identity. Most widely used Grid ratio is 1.62:1, the Golden ratio for Grid design and Content frame.
  7. 7. Information Design (IA) Zarabol Menu S • The menu placement is too near to the site Logo, it displaces the information hierarchy. • This menu should be in level to Search as it is Global navigation (Top level hierarchy) feature of the page. Proximity Issue : Refresh If refresh is link to Buzzing Now part.• The Buzzing now section of the website comprises of latest trending hashtags, at a time there can be 2-4 hastags displayed on the webpage, so the nearness of button varies and at times, when nothing is trending, button looks unfamiliar specially for novice users.• The Buzz now section should be displaced just above the Hot topics section, with Global header : Topics or Stories… (Categoration )
  8. 8. Information Design (IA) Hot Topics Area • Hot topics area needs to be categorized with Hashtags. Follow links are repeated… • Image size should be big with follow feature as embedded on click. • On mouse hover, image changes to modal link/button of “Follow”, thus repetition of follow can be avoided. Placement Issue : Post • Post lies just next to the Input area.• User visual movement to reach Add (image/video) is from R-L passing by area “Post” button, thus losing task hierarchy. Post should be at bottom right.
  9. 9. Information Design (IA)List Entity• The problem lies in defining the hierarchy of Information.• Name, Message, Hashtag should go before the Time stamp. The name succeeded by the @user hashtag takes prominence at the top with the user’ photo.• The message displays below this, succeeded by conversation hash tag in the next line.• Date can taken to the top-right corner to separate it from the linked content as it links only to the list entity and not the message.• Action links can follow further at the bottom of the list entity.
  10. 10. Interaction Design Login Area : Modality • Login area becomes modal when two comparative links are provided upfront. • Sign In is redesigned to be non-modal. Buttons >> Action Links >> DirectionSearch Box : Placement• Search box is linked at a distant place with respect to the results display area, which causes a frequent mouse travel from L-R & vice versa.• Search box needs to be placed in a reference frame of the results, somewhere on the top section of the results page for task efficiency.• It needs to be redesigned from the purview of Global Search v/s Contextual Search w/ or w/o Advanced Filters.
  11. 11. Interaction Design S 2
  12. 12. Interaction Design Visibility of System Status : Refresh ! • Do users really require Refresh? Taking away the control from user ensures that page will refresh at the data connection speed at user’ end, eliminating hang state.• Providing Auto Refresh indicators (here: indeterminate) helps user understand the visibility of system status.Input Area : Width• The input area has longer width than required for a normal 60-65 char line entry. It should be shortened & should have a fixed width as per the page requirement.• Currently the whole input area is extensive both in width and height.
  13. 13. Interaction Design(Me + I) : Label Issue• The Label Me + I follow is misleading & grammatically incorrect. Its actual meaning to the user should be messages that user sends + messages that user follows i.e. all messages that user is linked to.• Correct label in the given header Messages: All | My messages• Tabbing can help user identify the section much effectively than link.• Me + I Follow somewhere links up to My Updates…
  14. 14. > Content Repetition? Time based threading is possible for the repeated content. ? Read More displays nothing Not even required for 140 char.
  15. 15. Expert Review (Heuristic Evaluation)• A detail Expert Review on the Zarabol website will be presented after doing a thorough heuristic checklist and analysis of the Website.• Aid for Heuristic Evaluation > checklist.html
  16. 16. Feature Design | Rediff Ad base Rediff has a large user group in Indian market. Rediffmail is one of the earliest mail service which links up users to and its other portals. Less addiction for the sub-website like Zarabol from Advertising perspective. Use of proper Form factor and Ads placements across Rediff Websites can leverage new products and offerings.
  17. 17. Proposed Ad base |Hidden Ad strips Text only Ad Expanded Visual Ad
  18. 18. Proposed Ad base | Fixed stripsExample for FixedPoint Navigationand its utility forAd base onwebsites.
  19. 19. Proposed Ad base | Ad Grid lorem ipsum dolor sit a b AD Visual amet, consectetur adipisicing elit, sed do eiusmod tempor Ad text incididunt ut labore et areaClickable Owner Tag dolore magnaarea a b {a:b :: 1:1.6} Thank You !