CMGt Style Guide: Discovery, Strategy & Design

CMGt Style Guide: Discovery, Strategy & Design

2 Table of Contents INTRODUCTION UX Process Overview... 3 DISCOVERY Stakeholder Interviews... 4-5 Discovery Summary... 6 STRATEGY White boarding...7 Sitemap... 8-9 DESIGN Wireframes... 10-11 Design Theory...12 Welcome to the Style Guide... 13 High-res Prototypes... 14 High-res Prototypes... 14

3 CMGt Style Guide: Discovery, Strategy & Design The goal of my contract with Cox Media Group Technology was to create a style guide for their vast portfolio of digital properties. Cox Media Group has over 100 digital properties from Radio, TV and Newspapers. I was asked to create a living style guide that can be updated on the fly, expanded to meet other department needs and incorporate useful resources from the UX Department. This was a huge task and in order to achieve this goal, I needed to follow a bottom up UX process. I will describe the process below from the discovery of the business and stakeholders needs, to the strategy I developed to design and implementation the style guide.

4 Discovery: Stakeholder Interviews Stakeholder Interviews began with the UX team to better understand how this will help establish guidelines for properties to follow and a solid UX foundation throughout CMGt s digital properties. Sitting down with developers to understand how the property sites function and to better understand the foundation of the sites. Managers were able to describe the work flow and where this guide could occur within there agile development environment. Interview with directors allowed me to see a broader picture of how this living Style Guide could be incorporated across departments to allow a better access to UX information, training tutorials and development of best practices. The following are summaries from interviews with key stakeholders in the process. Patti: UX Analyst & Manager As manager & analyst Patti needs a resource that can aid her in doing those two large roles within the UX Dept. This style guide needs to have all the property information in it, along with any information for developers that can aid in requests from properties. She imagines a resource for best practices within CMGt standards as well as best practices associated with vendors & social resources. Since her analyst role keeps her on top of modern practices within the discipline of UX, a living Style Guide is essential. The guide should be able to grow within the context of CMGt s business as well be on top of trends within the industries/properties it serves. A PDF style guide will not due. UX plays essential role in CMGt agile development environment. The style guide would need to be easily accessible and up to date to be relevant. Include best practices and other CMGt research resources. UX plays essential role in CMGt agile development environment The style guide would need to be easily accessible and up to date to be relevant. Medley is CMS that CMGt used create property sites. Property sites have moderate control over look and feel of sites. Medley utilizes themes which include a header, right rail and footer wrap. Create style guide utilizing Wordpress CMS. Easy to use and keep up to date. Possible integration with UI & Medley Training work flow. Various Wordpress solutions (Free version -vs- VIP). Andrea: UX Designer As the UX Designer, Andrea needs access to color information for UI mock-ups and comps. She works closely with UI to incorporate a unified UX process and direction. Attend elaborations and represents the UX values on tickets within agile environment. Due to the number of people within CMGt that create files and the need for those files, a unified file archive could help her work flow. Resources for CMGt are spread out within various archives. Andrea knows where content and assets are located throughout the various Attending elaborations on tickets aids in proper UX direction from the beginning of the development process. Mockups are a visual road-maps for managers and developers to follow and maintain User Experience Utilize a categorized/searchable archive within style guide. Easy access to mockups, logo files and design templates would be an asset for designers and properties. David: UI Developer A quick interview with David led to a simple breakdown of what types of sites CMGt offers and an overview of the elements that make up the structure of each type. Two categories of sites: Free & Premium sites. Free sites have a global header, right rail and footer. Premium sites are built on a responsive framework and contain a global header and footer. Most elements within both types of sites are global. A few sites adjust and maintain different standards within the framework CMGt offers them.

5 Discovery: Stakeholder Interviews Continued from Page 4 Cox Media Group Technology Stakeholder Interviews. Jesse: UI Manager Jesse sees the importance of a style guide. During interviews with him, I was able to understand how he might see development incorporated into the style guide. As with mock-up files and graphic assets, the code developed for CMGt is not in a unified location. He envisions a grand interactive Style Guide that can offer more than just branding guidelines. UI environment depends on UX for expert advice during elaboration and mock-up phase of agile development process. Look into Git Hub solutions for archiving/sharing code. Possible archiving solution for code chunks and modified Medley work-around that property content producers can access. Angie: System Training I was able to attend a Medley training session with Angie. This allowed me a hands-on understanding of the framework that CMGt uses for all their sites. During training, I was able to understand the modules or components that make up a property site. Understanding the system from a user/producers perspective was essential in comprehending the scope of the Style Guide. CMGt uses Medley for their content management and sharing platform. Terminology for different elements within site are different that industry standards. Content sharing is based on Teases that are utilized within sections. Information on Wrap for both types of sites (Free & Premium) can be found within the training documents. Rough examples of information I can utilize for the Style Guide are found within Medley training on intranet. I see a great deal of overlap between information UX needs to document and what training has already documented. A better presentation can be created within the Style Guide, for ease of use and breakdown on these areas of overlap. Kara: Director As director, Kara has the big picture in mind. Through the corporate chain-of-command she is able to pass ideas along to the head of the properties and make recommendations that can start a process in motion. A style Guide would offer her a solution to maintain usability for the properties and incorporate other useful elements that would Comprehensive reports from Patti (UX analyst) are essential to understanding market trends and global shifts in users behaviors that can effect CMGt digital properties and stakeholders. Can the Style Guide unify more areas (advertising/training/ux/ui/) within CMGt agile environment. Created an archive of usability reports, metric findings and more. I could create a resource that directors and high level stakeholders could utilize by including research and standards.

6 Strategy: What have we learned? Since completion of discovery process and stakeholder interviews, I have learned a great deal about the context that the guide will live within, the content areas that the guide needs to focus on and the various end-users that will access and utilize the Style Guide. Below is a discovery breakdown of some of the granular elements that need to be addressed in the strategy and design phase of the UX process. Style guide will be accessed by UX Department, UI Department, property content managers, Directors and various property stakeholders. For properties, Style Guide needs to have accurate information on branding, logos, colors, typography menus and global information on header, footer and right rail wraps. For developers the guide should have accurate information on global elements for both free and premium sites. Properties will have some control over color and feel, but UI needs access to information to set up sites. Developers can utilize style guide to archive code and chunks for reference by properties or within the department. Free sites are property sites that are free to the public to view and use. They utilize Medley to access and share information. The property sites have a global header, footer and right rail. These areas are maintained by the CMGt and contain static areas and advertising options. They are built on a fixed 9 column grid system. Premium sites are for paid subscribers. They are built on a responsive 12 column grid at 960 width. Teases for articles can appear on Free sites, but are roadblocked for non-subscribers. Premium contents is tagged with a my icon. A guide/resource for best practices using the social media icons and logos would benefit properties in maintaining standards of outside resources and vendors. Create LIVE examples of style guide content. This means that the coding of content areas will mimic the coding on the actual property sites.

7 Strategy: Whiteboarding Since there is not one specific, overall task for an end user to accomplish and any and all the information within the guide could potentially be the completed task for different user groups. I utilized whiteboarding of information gathered to start working out the flow and consistency of the information in the guide. The process behind this map, is to take all the information received form the stakeholder interviews and organize a flow and hierarchy of information. Top level item Page(s) Page elements Additional style guide resources Property Types TV Newspaper Radio One-Off Sites Global Elements All TV Properties by Market All News Properties by Market All Radio Properties by Market All Properties by Personality FREE SITE GLOBAL ELEMENTS PREMIUM SITE GLOBAL ELEMENTS Site Info Typography Branding Logos Colors Additional property specific info Header Elements Free Grid Info Wrap Information Header, right rail, footer Global Typography Premium Grid Info Responsive Wrap Information Global Typography Best Practices UX Dept. UX Resources Dev/UI Integration Chunk archive Medley Content Sections

H 8 Strategy: Sitemap Sitemap shows the page hierarchy within the Style Guide. The Site Map has been condensed in order to fit it within the UX Process presentation. Additional features have been included within the Site Map and can easily be implemented into the final design process. TELEVISION NEWSPAPER RADIO TELEVISION CATEGORY PAGE (ALL PROPERTIES) NEWSPAPER CATEGORY PAGE (ALL PROPERTIES) RADIO CATEGORY PAGE (ALL PROPERTIES) I PRO G BY BY BY BY BY BY BY BY BY BY BY BY cla ATLANTA SEATTLE PITTSBURGH OHIO CHARLOTTE ORLANDO OAKLAND ATLANTA AUSTIN OHIO PALM BEACH ATHENS ATLANTA DAYTON HOUSTON JACKSONVILLE LONG ISLAND MIAMI ORLANDO SAN ANTONIO TEXAS TULSA (ITEM PAGE) INDIVIDUAL PROPERTY STYLE GUIDE PAGE. (ITEM PAGE) INDIVIDUAL PROPERTY STYLE GUIDE PAGE. (ITEM PAGE) INDIVIDUAL PROPERTY STYLE GUIDE PAGE. SEARCH FUNCTIONALITY Pages and posts are to be properly tagged with a constructed thesaurus of related tags for style guide. The search function will be able to isolate specific content directly from homepage or any page that your are on. Will be accessed form sticky main menu.

9 OMEPAGE ONE-OFF GLOBAL ELEMENTS UX RESOURCES (ITEM PAGE) NDIVIDUAL PERTY STYLE UIDE PAGE. FREE SITES PREMIUM SITES BEST PRACTICES UX DEPARTMENT (BLOG SYSTEM) ABOUT MEDLEY rkhoward.com SOCIAL MEDIA COLOR CONTRAST CHECKER CATEGORIZED POSTS/ENTRIES CATEGORIZED POSTS/ENTRIES CATEGORIZED POSTS/ENTRIES MEDLEY CONTENT/ SECTION (Including UX Wireframes)

10 Design: Wireframes The following wireframes incorporate findings from the discovery & strategy process. The wireframes show the homepage layout as well as the individual property pages and global elements pages. The UX resources will use the Wordpress post sort and archivability engine within Wordpress to populate and design the pages. Site will be based off a 1200px width fully responsive design. * The live Axure wireframes are located at http://design.johntindel.com/cmg-style-guide/ HOMEPAGE

11 Design: Wireframes * The live Axure wireframes are located at http://design.johntindel.com/cmg-style-guide/ PROPERTIES CATEGORY PAGE INDIVIDUAL PROPERTY PAGE GLOBAL ELEMENTS PAGE

12 Design: Style Guide Design Theory Living Style Guide: From the start, this guide was to be living with the ability to update and incorporate any information that the UX department or other adjacent departments would need to document and maintain. When standards change, the style guide can evolve to meet the new standards and requirements. Wordpress CMS: I chose Wordpress CMS to create the Style Guide. Amazing framework, used by CNN, TIME and other news organizations. The framework allows for easy implementation of a new property, templates for specific pages, information sharing, archiving UX resources, easy access by properties and simple automatic updates. Minimal Design: Simple, clean design with plenty of well intentioned whitespace to draw your attention to the action areas and information of the site. Simple architecture will allow quick reference to needed material within guide. Graphics: No graphics will be used in the design of the Style Guide. Graphic assets will be reserved for the property information pages, global element pages and UX resources. Typography: Typography is king in this document. By strategic use of line weight, placement and size, the typography will dictate flow and usability of each page and section. Rounded Corners: Rounded corners are only used for an action. This follows modern trends. If it has a rounded corner then you can click it. Buttons are most likely to have these actions. Buttons will be simple ios styled 1px width borders with minimal hover effects. Text Links: Text links will have a simple darker color than the body text. This should be adequate visual representation of an action involved with this text. Search Functionality: By use of proper taxonomy, tagging and architecture the search function will allow users of the Style Guide to find information needed directly from the search area.

13 Welcome to the Style Guide The CMGt Style Guide is located at http://styleguide.johntindel.com

14 Design: CMGt Style Guide The final deliverable for this project is the completed Style Guide. Included below are high-res examples of the website. * The live Style guide can be found at http://styleguide.johntindel.com HOMEPAGE PROPERTY CATEGORY PAGE

15 Design: CMGt Style Guide * The live Style guide can be found at http://styleguide.johntindel.com INDIVIDUAL PROPERTY PAGE GLOBAL ELEMENTS PAGE

Designed and Developed by John Tindel http://design.johntindel.com Cox Media Group 2014.