Let Data drive your sites design, and functionality (directory page)

It was an honor for the opportunity to spearhead the development of the directory page for our affiliates. Although I wanted to be more creative add embellish the site more, the simple functionality and design has proven to work well with users.

The Beta mobile product: (http://wbbh.wmpsites.com/health-connections/)

This started as a simple one page with very little design and functionality. Without much analytic, it was designed to have a handful of the ingredients we needed but also set out to collect data for future versions.

Feedback, and Analytics was so beneficial for the rollout of the second version of our directory page.

Feedback came from the sales team, stations (nbc-2), advertisers and it was clear we needed to make some adjustments.

The Analytics for the page informed us of how the client interacted with the page. We quickly realized the first version did not allow the user to explore much or exit. Moreover, repetitive text confused the client, and it did not create linkage back to the affiliates main page (http://www.nbc-2.com/). The analytics also revealed that our major viewer was using 1st mobile devices (iphone/android), 2nd was a tablet (tablet), and 3rd desktop (chrome, and Firefox). Google analytics played a significant role in creating the new directory page.

In furtherance, the data allowed us to make the necessary adjustments and improvements by focusing on new ideas and what the user will need.

Design, and Layout version 2

The page was to contain items in order from left to right, in order to assure that the users eye would follow the information according to behavior. This time around we had to also design for 3 screen resolutions, so the container had to be simple clean and to the point.

  1. Station Logo
    1. Because our url is different from the main stations url, we needed to assure that the client was aware that even tho the look, and style was different, that the page was still part of the stations programs.
  2. Campaign Branding
    1. Visually Introducing the campaign branding.
  3. Main navigation
    1. We had given the user choices so they may explore freely. (seo)
    2. Category • sponsors • news • return home
  4. Main visual
    1. Live text introducing the campaigns overall goal (seo)
    2. A clear message that would “welcome” and explain the overall goal of the page. (seo)
    3. A visual piece that would break the text heavy pages
  5. Category area
    1. Highlight exclusive categories the station offers
    2. An additional way to find an expert based on category
    3. Additional offer that would allow the user to find a category they are looking for quickly and easy
  6. Feature sponsor area
    1. Highlight the advertisers
    2. Logo to display their branding
    3. Tag for categories the advertiser is an expert in
    4. A simple paragraph that explains the advertisers goal and expertise
    5. Clear link to the site.
  7. Featured news
    1. Create additional way for user to interact
    2. Create additional linkage back to the site (seo)
    3. Highlight the additional information a news site offers
    4. Ability to highlight additional stories that highlight the advertisers. For example story written about the advertiser would be highlight on page
  8. Return “home”
    1. Linkage back to the main station
    2. Allowing the user a way to exit without the user closing the browser window
  9. RSS feed
    1. Additional information to help client interact with the page.
    2. Create Linkage back to site (seo)

Design & Layout (Wireframe & Design) – Test Link HTML/CSS/Jquery (http://www.wmpsites.com/worldnow/)

HTML – the goal is to make it easy for the producer to be able to quickly make changes, and create these pages without having to create additional lines. Tracking Tags, preparation for functionality, and style.


CSS – The css would focus on 3 media queries, to accomplish the overall design. I found that these worked well with larger phones (note 2&3), but also worked well with tablets (ipad mini, and Ipad 3&4)

  1. Mobile devices ( @media screen and (max-width: 568px))
  2. Tablets (@media screen and (max-width: 768px))
  3. Desktop

Jquery – The functionality, was a little more challenging. Since we are asking the producer to not worry about adjusting many aspects of the code, we had to be able to tell the code to function a certain way.

Using Functionality to

  1. Return home links (trackable events)
    1. Copy & Append the href to various places on the page:
      1. Station Logo
      2. “Return Home” Nav
      3. Branding
      4. Footer
  2. “Choose a category” – Toggle (trackable events)
    1. Toggle the categories, in order to display when the user feels the need.
    2. Make the Nav link “Featured Categories” not only display the information but, bring them to the information right away by adding an anchor to.
    3. Sort Listing by alphabetical order allowing the user to find a category simple and quick.
  3. “Featured Specialist” (trackable events)
    1. Advertisers information
      1. Logo
      2. Category – copied, and appended to “choose a category”
      3. Advertisers Sentence
      4. Link to site (trackable events)
  4. Feed (RSS)
    1. A Feed that would automatically populate from each station
    2. Create linkage back to the main station


CHECK OUT THE FINISHED PRODUCT AT http://www.klfy.com/healthnet-10/