Return to UX/IA

Design an education center

DESIGN TIMELINE: 2012: Overview (with UX recommendation)

Blog-Post

Issue to solve:

Company is looking to create an internal education center (AKA: BLOG) that would be used to share information with clients. It had to be engaging, easy to use, and responsive. The first priority was to establish trust by establishing themselves as an authority in the marketplace. The second priority was to engage users and find ways to track user interest and improve engagement.

Process:

Stage one: Review client intake study to determine the particulars and intent of the project. this includes user research and conducting a competitive analysis of existing market place to study pain points of the market. Develop a strategy.

Stage two: Set the scope of the project

Stage three: develop the basic structure through wireframes

Stage four: begin introducing UI cues and looking in-depth at functionality

Stage five: integrate branding guides and “final paint” as we finalize for roll out.

Blog posts and featured content.

Headlines

Common practice for excerpt headlines:

  • Heading size: significantly larger in relation to copy. Headings will be bold for clarity of reading and link to full article (or relevant URL)

  • Slug, Title, Description, Heading, and first paragraph copy, will integrate primary focus keyword

  • Headings to appear in appropriate proximity of copy and not separated by images from excerpt or article. (This allows us to avoid confusion with users as to what the headline applies to directly (especially when information is stacked one on another))

  • Content & headline need to be purposeful and elude to the details of the particular article in as few words as possible.

Blog article excerpt

  • Below headline copy

Primary Article requirements

Each article includes:

  • Header

  • Article Author

  • Category

  • Copy

  • Comment information

  • Social Icons (as appropriate)

  • keywords

  • images/Video (as appropriate)

  • The footer of Each "Primary Article" contains suggestions for other stories from other articles. (MAX 3)

  • The right side column contains suggestions for other posts from the same category as the primary story. (MAX 5)

Floating images and article summaries

  • Images should sell the story.

  • Images need to have appropriate alt text with keywords.

  • Images can reside to the left of, or above, heading and article summary.

  • Images never divide heading and summary copy.

  • When content wraps - Ensure a minimal padding around images. Copy should never but against an image.

  • Thumbnails appear as a 1-to-1 ratio - Must maintain clear focal point and appropriate padding.

  • Thumbnails are a “set” size so as not to force the UI to adapt to the image based on it’s orientation. It is recommend that we build an internal cropping tool that allows the company to set focus point on upload.(

  • Note: Neither width nor height of the any image may exceed the company specified dimensions. 

Grid and list views

Grid View

Article summaries should be presented in one of two ways.

  1. Image to the left side,

  2. Image above the content.

Both designs will be used and display will be based on article type, position, and purpose of article.

Article landing pages show additional stories unrelated to the select "Category" and located beneath the primary article as illustrated in the wire frame. 

Stories that happen to be related to the current "Category" will appear to the left of the article. (as shown above in the wireframe) 

Linking:

Diagram 1 Sample of content living to the left of the image

Sample-Blog-Diagram

When creating a click through with a blog image  - We may elect to use a colored border around the thumb image on hover state. This increases focus attention and suggests click through. [Diagram 1]

Scrolling page feature

(NOTE: Player controls under a carousel show more articles may be available feed : EX (1 of 7 - Another way of displaying this would be to show 1-3 of “X” number of results. This UI communicates how many items are visible out of total available result set. It also identifies where the user is within the matrix.)

Business requirements for Slide show option:

Business requirements require consideration for a “slideshow” option.
Location of slideshow would be in header or as a “featured option”.
Slideshow options showcase:

  • top posts

  • new features

  • trending content

All article features need to appear in the appropriate "categories".

Sample: Diagram shows example of stacked content with scrolling option:

Social Icons

There are two places where we display social icons. .

  1. Where the icons apply to the blog as a whole and as a means of favoring, or following the blog as a point of interest.

  2. Where the icons apply to specific content within said blog. (Explanation is vetted below in a little more detail)

UTILITY NAVIGATION OR TOP TIER: RSS, FB Like, Twitter Follow, Google+1 Over arching social icons apply to entire blog not to specific content. ARTICLE SUMMARY: Below is a list of social icons that should be seen for each article.

Social Icon Sample

PLEASE NOTE: sample diagram is simply meant to illustrate possible design. It is missing key social networks as discussed by the business.

Category Page

The diagram below shows wire frame blocking layout for The category page (with single item post hover state). Posts viewed in grid mode.

Category design page

BLOG Template & functional
key elements

Blog Wire frame

Search placement

User research indicates search bar will live in the upper right hand side as part of, either the header, utility navigation, or in the top section of the recommended article section.

Subscription module

Subscription should be located in the top right hand column so it is easily discover-able. It is recommended that if we know that the user has subscribed to the blog that we don’t perpetuate that content in the top of the right hand column but rather show a short phrase indicating that we are aware that the user has subscribed and we then can elevate the content below in the column so that it might rise up above the fold.

Tags, archive, trends - modular content.  

Tag clouds allow users to search by Keywords in a section  We can also show trending articles in line with this content. This can be created visually through font/style/orientation - or - by organizing keywords through top to bottom positioning.

archived content

Archived content allows user to view older articles by month or by year.

View More 

View more is recommended as a means of limiting story content from driving other relevant pieces beyond the reach of the user.

If users want to view more about a given article we allow them to click through and drive deeper into a given article. The view more can also be a means of initiating infinity scroll in the primary post section.  Should the user reach the base and wish to see more, the user can then engage the view more button and the page loads the next set of results inline. This prevents all results from loading initially and causing slow initial load time due to excessive content. 

NAVIGATION: The ask is for the primary navigation to scroll until it hits the top of the page and then lock - We are calling this  -sticky Nav -
the content will continue to scroll and run beneath the navigation so to always allow the user access to primary navigation regardless of current location.

TEMPLATES: The design of the blog should fall into three simple sections.

  1. Primary

    • Home page

    • Category page

  2. Search

    • Keywords

    • Search results

  3. Article

    • Articles

Additional notes:

THUMB IMAGES: The best design for thumb images would be one that is cropped to a square pattern so as to be consistent in appearance and not allow for the image orientation to change the format or move UI elements.

FULL IMAGE in articles where the full image is displayed the orientation will not break the scan ability of a given page and therefore the image can be displayed as orientation may dictate.

IMAGES/VIDEO OVER ARCHING: No content or “frame” should ever overlay any image or video, as this may prevent a user from interacting with said image or access controls within an embedded video.

SOCIAL ICONS Social icons, as listed above, relate to the blog as a whole and, in addition, to the content of a given page. KEYWORDS keywords can sit on top of the border, but not over the images or videos that they refer to.