Project: Phoenix
DR
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
T F A
Creative Brief By: Rick Barron & Tim Sanders Subject: Architecture redesign of MOTODEV website
1
Project: Phoenix
MOTODEV: Table of Contents
Summary………………….3
Stake Holders……………9
Site Map…………………..4
Content Cleansing………10
Navigation Bar……………5
Web Style Guide………..11
Side bars………………….6
Look & Feel……………..12
Web Roadmap……………7
Templates………………..13
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Audiences…………………8
2
MOTODEV: Summary
The redesign [or evolution] of the MOTODEV website is needed for multiple reasons. Below are three core areas to address for this project: A) MOTODEV is embarking on reaching out to a wider set of audiences, such as Enterprise and Content Provider groups. Updated and adding new content needs to be planned and staged to provide these audiences, and others, with relevant content that resonates with their needs and addresses questions to help them make decisions. B) A new set of corporate visual style guidelines, combined with the site’s current outdated design, make a new visual design necessary to deal with such areas as scalability, templates for various categories, C) The current site requires a content and architecture overhaul to streamline and optimize the user experience, such as enhanced navigation, ensuring content is current, and make ongoing maintenance easier.
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Evolve the MOTODEV site into an efficient, targeted, scalable destination that makes our audiences’ lives easier. Additionally to provide content that resonates with our developers [new and vested] that calls out the added value in working with Motorola. The website needs to be a repository of information that gives credence as to why developers should build their apps on our platform. Examples will include best practices, how-to tips, case studies, etc. We must provide a purpose to cause developers to come back to glean information that will help them champion their apps on our products. Content on the website needs to be revised and refreshed to demonstrate we always have more to offer.
3
Project: Phoenix
MOTODEV: Site map
As-is state
Should-be state
Documentation & Tools -MOTODEV Studio -Android Technical Library -App Accelerator Program -Fast Track Center -Additional Tools & Resources
Documentation & Tools -Additional Tools & Resources -Android Technical Library -App Accelerator Program -MOTODEV Studio
News & Events -Events & Training -MOTODEV Newsletter -News
Products -Android Phones -Wireless Modules -Set-Tops -Two-Way Radios
SHOP4APPS -App Ingestion -App of the Week or Month -App Archive -Fast Track -SHOP4APPS Exclusives -SHOP4APPS FAQ’s -Merchandising & Promotions -MOTOPICKS
Products -Other Products
Support -Technical Support -Contact Us
Community -Discussion Boards -Follow Us
News & Events -News -Events & Training -MOTODEV Newsletter
Support -Technical Support -Contact Us
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Note: A site map shows how all information on a web site fits together and helps clarify Information hierarchy. Current site maps displays a weak display of information. At first blush, a user will think we have little to offer. The customer needs to visually see quickly we have a lot to provide, thus draw them in to probe deeper.
Solutions -Enterprise -Content Providers -Case Studies -How to market you app -Tablets in business environment -Android phone in business environment Apps by Category -Android Apps -Commercial (?) Apps -Mobile Apps -Tablet Apps -TV/DVR Apps -Custom (?) Apps -Adobe Flash Apps -Adobe AIR Apps -Mobile Content -HTML5 Apps
4
Project: Phoenix
MOTODEV: Navigation bar Current
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
-Discussion Boards -Follow Us
-Products Page
-MOTODEV Studio -Android Technical Library -APP Accelerator Program -Fast Track Center -Additional Tools & Resources
-Contact Us -Technical Support
-Events & Training -MOTODEV Newsletter -News
Proposed -App Accelerator -Android Technical Library -MOTODEV Studio -SDK Add-ons, Demos, Drivers -Fast Track Center -Merchandising & Promotions -SHOP4APPS
-Contact Us -Technical Support
-Events & Training -MOTODEV Newsletter -News
APP CENTER | COMMUNITY | DOCS & TOOLS | PRODUCTS | NEWS & EVENTS | SOLUTIONS | SUPPORT
-Discussion Boards -Follow Us
-Products Page
Solutions -Webinars -Show Me How -Platforms -IE Architect Industries -Broadcast & Media -Education -Enterprise -Financial Services -Healthcare
Search
APP CENTER | COMMUNITY | DOCS & TOOLS | PRODUCTS | NEWS & EVENTS | SOLUTIONS | SUPPORT Solutions
-Webinars Media -Show Me How -Platforms -IE Architect
Industries -Broadcast & -Education -Enterprise -Financial Services -Healthcare
| LATEST NEWS | RSS | MOTODEV BLOGS | MOTODEV DISCUSSION BOARDS | SOCIAL MEDIA | Design and Build
Notes: 1-Navigation needs revision so placement of content is staged under appropriate titles. 2-Think in terms of scalability. 3-To accommodate added content, stage cascading menus.
>Develop Android Apps >MOTODEV Studio >Technical Library >Product Specs >Testing >Discussion Boards >SDKs and Samples
Drive Discovery & Demand >SHOP4APPS >Commercialize your app >Localization >Market your app >Market/Sell Services
Audiences
Android Technical Library
5
Project: Phoenix
MOTODEV: Sidebars
Documentation & Tools Page
Additional Tools & Resources Page
Membership Overview Page
News & Events Page
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
MOTODEV Newsletter Page
Note: 1- Sidebars on current site appear the same throughout the site. Sample sidebars To the left reflect the same content on majority of pages. 2-Sidebars need to be staged with content that’s compliments current page, that 3-Sidebars are two wide and somewhat distracting. We don’t need sidebars on every page. 4- Need to think differently in how we utilize sidebars for navigation and promotions on pages.
Ours
Web Standard
233 x 99 pixels
6
Project: Phoenix
MOTODEV: Web Roadmap Steps
1- Discovery -Site Assessment -Identify core audiences -Evaluate competitor sites -Define success factors -Business objectives -Brand assessment/positioning
2- Define -Content/Categories -Scope of work -Usability goals -Architecture -Requirements [client/users]
3- Design -Wireframes -Revise sitemap -Content Strategy -Banners/sidebars -Concepts/Navigation models -Templates for various page types
4- Develop -Final design treatments -Final site map -Finalize navigation flows -Functional prototypes -Test
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
5- Deploy -Launch -Measure
7
Project: Phoenix
MOTODEV: Audiences
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Unaware
Tentative
Engaged
Invested
Prospect is not explicitly interested in our offering but should be. Content must be interruptive. It has to cause prospective app developers to do a double take and change their minds about what we have to say. It has to be about them, not us.
Prospect is standing at the edge, testing out or quietly wading into our business. Content should be educational. The tentative prospect wants to learn as much as possible about the best solution without being sold anything. The most effective content gives the prospect a feeling of control over the research process., while gently, almost subliminally, guiding him/her to our solution. We should be generous with information that thoroughly describes their specific problems and how to solve them.
Prospect is in a dialogue with us. Content should be validating. Now is the time to confirm the engaged prospect’s good impression, answer questions and objections, make our offering compelling, and most of all, help the developer feel safe. Case studies, competitive comparisons are relevant here. Seeming available/approachable and being easy to do business with are essential at this stage.
The developer is now our customer. Content should be exclusive and foster a stakeholder relationship. Our customers should feel like they’re a member of a select group. Content should be informative like a newspaper, not educational like a textbook. Send customers new research that affects them along with sneak previews of new information and ‘insider’ tips that don’t up sell or set the right tone. Personalize emails and web content. Use an informal and conversational style. Invested customer are part of our family and they have given us permission to communicate informally.
Examples
Examples
Examples Examples
Tim said: goal is to give them training wheels, metaphorically, on Why it’s great to work with Motorola. Get them involved in our Discussions boards. Special access to testing services, Exchange ideas
8
Project: Phoenix
MOTODEV: Stakeholders
News & Events -News [?] -Events & Training [J. Sadler] -MOTODEV Newsletter [M. Garvey]
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Docs & Tools -MOTODEV Studio [Eric] -Android Technical Library [Lori Fraleigh/Team] -Additional Tools & Resources [Lori Fraleigh/Team] -Fast Track [Char] -App Accelerator [?]
MOTODEV
Products -Products [Lori Fraleigh/Team] -Wireless Modules* -Set-Tops* -Two-Way Radios*
Community -Discussion Boards [Stephen Graff/Robin] -Follow Us [R.Ksar]
* Referenced in current site map as ‘Other Products’ under ‘Products’.
Note: This is a high level over view of topics as noted on MOTODEV’s website.
9
MOTODEV: Content cleansing
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Note: 1-Conduct review of MOTODEV web content. 2-When was the page last updated? 3-What page or pages are deem out of date, and should be removed? 4-Establish plan to review pages by content owners and update where needed.
10
MOTODEV: Web Style Guide
Categories -Strategic Brand Review -Logos -Banners
Establish color palettes and what the colors should be used for various pages. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colors and when and where to use them
-Sidebars
A website is never done.
By setting up templates and guidelines for grids, we establish best practices and promote consistency. With the web, preparing some generic templates can curb excessive creativity with the layout. Establish a library of templates to reference.
The implementation of a style guide provides uniformity in style and formatting of web pages.
-Color Pallete -Fonts -Layouts & Grids -Tone of Voice Define the tone whether photographs or graphics. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.
-Copy Writing Guide -Imagery -Button Hierarchy -Icons -Basic Coding Guidelines -Masthead [header]
A web style guide document outlines what needs to be done to maintain and grow a website according to a common set of principles derived during the design or redesign process.
It also helps in communicating the framework under which changes are to be made to the website. It sets the groundwork for maintaining consistency. One can spend a lot of time and effort in coming up with a usable and useful website, but if subsequent changes are not aligned with the initial thinking, then the website can quickly return to its former state. The web style guide provides a framework to avoid such situations.
Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, we should make this clear.
11
Project: Phoenix
MOTODEV: Look & Feel
Sub-Topic Page
Social Media Page
Home Topic Page
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Campaign Page [later to embedded within the site]
Current templates lack tone, punch and some appear as if they were Improvise on the fly, and by passing any sense of web standard. Looks like a Hodgepodge of templates
Program Page
12
Project: Phoenix
MOTODEV: Templates
App Accelerator Page
Home Topic Page
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Campaign Page [later to embedded within the site]
Notes 1-Do we templetize by silos? [Ryan] 2-Should the content dictate what the web template will look like? 3-Should the web template dictate what the content will look like? We first need to take inventory of what’s in our inventory. Determine pages no longer Required and archive them. Establish a plan by which every six months or yearly, stakeholders Review pages they own, and identify updates, removal, etc.
Footer Header Side Bar Banner Head
13
MOTODEV: Brand Color Specifications
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Primary Brand Colors Primary brand colors are the primary colors used in all Motorola communications. Use one, two, or even three colors at the same time, but never use all four primary colors on the same page. Note that all colors can be used in a multiple page document.
Secondary Brand Colors It also helps in communicating the framework under which changes are to be made to the website. It sets the groundwork for maintaining consistency. One can spend a lot of time and effort in coming up with a usable and useful website, but if subsequent changes are not aligned with the initial thinking, then the website can quickly return to its former state. The web style guide provides a framework to avoid such situations.
14
MOTODEV: Solutions [Relevant Content]
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Persuade the audience The MOTODEV website needs to be a point of destination for future and current developers. They come here for more than just building their apps on Motorola’s platform. Relevant information that calls out best practices, helpful tips in marketing ones app, an awareness of trends in the marketplace, and more; will engage the developers to come back. They’ll see that the relationship with MOTODEV It also helps in communicating the framework under which changes are to be made to the website. It sets the groundwork for maintaining consistency. One can spend a lot of time and effort in coming up with a usable and useful website, but if subsequent changes are not aligned with the initial thinking, then the website can quickly return to its former state. The web style guide provides a framework to avoid such situations.
15
MOTODEV: Promote, Promote, Promote
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
Persuade the audience Sell the audience on apps built by our developers. Provide pages that display crisp looking screen shots, along with a brief description, developers name. See if we can leverage with developers to provide a story behind how the app came into being and provide insight to its creation, best practices, etc. Maybe stage an ‘app meter’ to show the volume of apps being added to our stores…Apple promotes these numbers, so should we. NOTE: The excel spreadsheet Tim ran for me…contain every component that uses a template.
16
MOTODEV: Success Stories
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
17
MOTODEV: Web Milestones
Project: Phoenix
Presented by: Rick Barron & Tim Sanders
Org. date: Oct. 22,2010
Version: 1.0
File Name: Overview of web redesign
Rev date: Oct. 23,2010
Page: 1
18