Blog MVP Wireframes

[lynnandtonic]

These are wireframes for a Blog MVP. This is a base set of features for the user-facing blog and the admin interface. It is expected that later on more features will be added or existing features will be expanded.

Wireframes are outlined here (with some additional details accompanying specific views):

1. The user-facing blog interface which includes:
   a. blog home (preview a list of posts, in reverse chronological order)
   b. blog post view (read the full text of an individual post)
   c. archive view (preview a list of posts by year)
   d. tags view (preview a list of posts by a specific tag)
   e. author view (preview a list of posts by a specific author)
2. The admin interface which includes:
   a. login (securely access admin interface)
   b. posts view (preview a list of published posts and drafts)
   c. new post view (create a new post)
   d. edit draft view (edit/save, delete, or publish an unpublished draft)
   e. edit post view (edit/publish or delete a published post)
   f. comments view (preview/delete comments on posts)
   g. users view (manage a list of users)
   h. edit user view (manage a specific user)

1a. Blog Home

• View a list of blog posts (preview snippet) in reverse chronological order
• Preview snippet includes blog post title (which links to full post view), date posted, author, and first sentence or two of post
• Pagination via Older/Newer buttons (as opposed to infinite scroll)
• Links to blog archive and tags views

1b. Blog Post View

• Blog post detail includes full post text
• Includes relevant tags (which link to the tags view)
• Blog post comments (users can add a comment; admins can delete comments)
• Return to blog home or view archives

1c. Blog Archive View

• View list of blog posts from a specific year (select from years provided)

1d. Blog Tags View

• For MVP, you can filter the blog by one tag, which you select from an available list.
• Clicking on a tag from a specific post takes you here with that tag selected and posts filtered by that tag
• Tags have a count of how many posts use it
• Future: search for a specific tag; filter by multiple tags

1e. Blog Author View

• View posts written by a specific author
• Includes a short author description and an avatar (if both of those things are available)

2a. Admin Login View

• This view makes some assumptions about how the API works. @fritzy may want to elaborate.
• This view may be styled to look like the rest of the admin interface (seamless) or will need to be styled differently (if it needs to be made clear you are signing in somewhere else)

2b. Admin Posts View

• View a list of posts both drafts and published
• View a post, preview a draft, or edit either
• Default landing page for the admin once logged in

2c. Admin New Post View

• Create a new post with Markdown
• Add media via a media selector
• Save a draft
• Publish

2d. Admin Edit Draft (unpublished) View

• Edit a draft
• See previous revision history (drafts will autosave as you write them, but hitting "Save Draft" creates a snapshot revision)
• Delete a draft
• Save a draft (as described above)
• Publish

2e. Admin Edit Post (published) View

• Edit a previously published post
• Unindex post (removes it from the blog)
• Cancel changes
• Publish changes
• Future: Save a draft version of an already published post (kind of like branching before publishing changes)

2f. Admin Comments View

For this initial release, you can delete comments. Further comment management would be in later releases.

• View a list of comments
• View the post a comment is associated with
• Delete a comment
• Future: comment approval queue; more robust comment management

2g. Admin Users View

• View list of users, when they were added, and their role (admin or not)
• Edit a user
• Remove a user
• Add a new user

2h. Admin Edit User View

• Edit a user's information
• Change avatar, name, email, etc.
• View active keys
• Revoke keys

[one000mph]

@diasdavid @akrych we'd like some feedback on these wireframes, specifically around the admin interface 2a-2h. Could you provide some this week async or we can schedule a short call? Thank you!

[akrych]

Sure, I will look at this today :)

[akrych]

I think everything looking good :) just 3 things:

1. I would personally add to the single post the possibility to share in social media or by link to friend :)
2. I have problem with this "add new post" button on the left at the place of a logo. Where we will have the brand mark of blog?
3. At the last screen I didn't find possibility to edit/add role. Is that possible?

Besides this, Great job! I really like Author View :) 👍

[lynnandtonic]

@akrych Thanks for your thoughts! I appreciate it!

I updated the wireframes above to reflect your #2 and #3 feedback.

• I moved the +New Post to an item in the admin navigation and added the IPFS logo top left.
• Added "Role" and "Description" fields to the Edit User view.

Social sharing for posts feels like a "later" feature after the initial MVP, but I also suspect it's not a heavy lift to implement and we may end up adding it during development.