Issuu on Google+

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


Phoenixl10282010