#ImageSpecifications and Behaviors
Top Nav

 

  1. Logo is clickable — goes to Home Page
  2. "Learn" goes to Learn Lander (new page below)
  3. "Connect" goes to Member page (revised)
    1. None of the nav items has a rollover dropdown
  4. Search bar goes to Search Results (Sprint 2)
  5. Utility Icons click to:
    1. Notifications page (no changes)
    2. Messages page (no changes)
    3. My Profile page (no changes)
    4. MIT logo goes to web.mit.edu

 

We will keep the black CTA banner for non-logged in state.

   
   
Home Page
  1. Hero image is cropped smaller
  2. CTA
  3. 2 Primary Compact Cards (see design below).
    1. We should be able to select from existing cards, as in current state.
  4. Member preview
    1. Member count clicks to Member page
    2. Show most active members (minus ClimateX team members)
  5. Recent activities zone
    1. Make title clickable to new "Recent Activities" page which shows full feed of last 100 events (and pagination if needed).
    2. Recent Activities page uses Notifications feed template, but simply lists all activities – new comments, new posts/videos/podcasts.
  6. Footer links are same:
    1. Terms and conditions
    2. About
    3. Get involved
    4. Courses
  7. Feedback link
    1. Change from a button to a link.
    2. Copy change to: "We're scrappy. We're evolving. Tell us what you want us to do."
  8. Make home page top users show most active members, minus ClimateX team role
Compact Card
  1. Author – image and name
  2. Title of card – clicks to Card Detail page (post, project, podcast, video)
  3. Add comment button
    1. Click anchor links to "Add Comment" button at bottom of Card Detail page. (doesn't actually let you make a comment yet)
  4. Comment icon
    1. Shows number of comments
    2. Clickable icon goes to "Add Comment" button at bottom of Card Detail page
  5. Like icon (sprint 2)
    1. Shows number of likes
    2. Clickable icon goes to "Like Post" button at <where?> on Card Detail page
  6. Date
    1. Date shown should be date that card was created
  7. Image
    1. Clicks to Card Detail
  8. Card Type Banner
    1. Clarifies whether card is a video, post, podcast, or project


 

 

Learn Lander

Ten cards per page with pagination at bottom for more entries.

  1. Results feedback
    1. When arriving on this page from Learn top nav click, text should read:
      1. "<##> Posts, Videos and Podcasts to explore"
    2. Following interaction with filters, text should read:
      1. <##> results
    3. Results should be sorted
      1. In reverse chronological order – most recent first
      2. Date is
  2. Topics filter
    1. Lists topics (in alphabetical order)
    2. No numbers beside each topic (as depicted in design)
    3. Behavior:
      1. One clicked box shows all entries with that Topic as primary or secondary selection
      2. Two clicked boxes shows all entries with EITHER Topic A or Topic B – (super set of either Topics, NOT a subset of only those with both)
  3. Type filter
    1. Lists types
      1. Currently Video, Podcast or Post only
  4. Card banner – Post, Video or Podcast
  5. Card Author – image and name and date of card creation
  6. Card image
    1. With Icon overlay to show what type of object it is
  7. Card details
    1. Title
  8. Add Comment button
    1. Click anchor links to "Add Comment" button at bottom of Card Detail page. (doesn't actually let you make a comment yet)
  9. Icons
    1. Comment icon
      1. Shows number of comments
      2. Clickable icon goes to "Add Comment" button at bottom of Card Detail page
    2. Like icon (Sprint 2)
      1. Shows number of likes
      2. Clickable icon goes to "Like Post" button on Card Detail page

Pagination

Mike – this is the basic idea of what pagination we'd like

We'll go with whatever variants are most easy to execute from you end.

Podcast PageA variation of the Video PageNew Podcast object — you’re going to tweak the design of the video page (and create video page) to allow it to render right for soundcloud.

Connect (Members) Home

 

Sprint 2

This is the landing page after a click on "Connect" from Top Nav

  1. The page is broken into sort categories with 4 card per categoryPerson Card (see below)See More link goes to Connect Category Detail page (see below)
    1. Top Users
      1. Sorted by most active users - minus all designated ClimateX users
      2. Activity includes a combination of
        1. Posts
        2. Comments
        3. Liked Cards
        4. Others – thoughts for later...
          1. Site Visits
          2. Page Views
    2. Nearby
      1. Sorted by most active users who's location
      2. We should have a CTA here – "Update your profile to get better results" – that takes you to your profile
    3. Who share interests
      1. Most active users
      2. With same combination of interests
    4. Users I follow


 

 

        

  • No labels