UX Plan Example: Following Feed Page
 
Key:
= Request for design deliverable (wireframe or visual comp).
= Request for brand design support.
📝 = Request for copy support (add inline or build a separate deck).
📈 = Request a data tracking need.
🛠️ = Flagged for Quality Assurance (QA) testing purposes.
 

Summary

Last Update: 9/23/16 NS
Asana Task: Insert task link(s)
UX Deliverables: Insert link(s) here
User Stories:
[1] As a Shop Owner, I use the composer to post feed content updates about my products or shop.
[2] As a Customer or Member, I use the feed to read and like or click into updates from Shops I follow.

 

1. Following Feed Page

a. Active/Existing User

  • Page Type: normal
  • User Types: all but visitor
  • User States: existing user, active user, signed-in, approved shop
  • User Flows: 
  • Prev: anywhere they can access the following feed page via a link
  • Next: filter the feed

  • Content States:
  • 📝 Link to Guidelines 
  • Open Guidelines in a modal (just like we do on discussions).
  • Posting Guidelines
  1. Be civil and respectful to others
  1. No harsh or offensive language
  1. No promotion of other marketplaces or websites
  1. Less is more. Don’t post too often or you may lose followers.
  • Any posts violating these guidelines may be removed. 
  • Feed of Posts
  • Load in 25 posts in reverse chronological order.
  • Display [Load More] Button at the bottom of the feed.
  • On Click — Load 25 more posts beneath and display [Load More] button again underneath that set.
  • Individual Posts
  • Feed category label
  • Shop avatar, shop name
  • On HoverShow user hover card
  • On Click — Go to the shop’s page
  • Three Dot Sub-Menu 
  • 📈 [Unfollow] Button 
  • Note: If a shop owner is looking at their own card, don’t display unfollow button.
  • On Click — Unfollow shop, dynamically remove shops posts.
  • 📈 [Permalink] Button