Kirk Brote Portfolio

Kirk Brote PortfolioCover

1 of 19© 2011 KIRK BROTE CONFIDENTIAL & PROPRIETARY

July 10, 2011

1 Cover

2 Live Sites

3 Delta.com

4 American Express YourBuzz

5 Honey Bunches of Oats

6 Honey Bunches of Oats Interaction Models

7 American Express Skybox Report

8 YourBuzz Delete Account Workflow Visualization

9 YourBuzz Keyword Search

10 HBO Facebook Apps & Games

11 Post Naturals

12 Application UIs

13 Delta.com IA

14 HoneyBunchesOfOats.com IA

15 Presentation Graphics

16 Delta.com UX testing

17 Social Networking Strategy

18 Mobile Design

19 Tiny Art

TABLE OF CONTENTS

page title

RESUMEcel: 207-459-4548

Interaction Designer, social media strategist, experience architect, and innovator, looking to craft experiences that users love and businesses can’t live without.

Lead Interaction Designer - Digitas - June 2010 – July 2011Interaction design, social media strategy and implementation, usability testing, client presentations, and pitch work in a top digital marketing and advertising agency in the New York City metro market. There are many smaller projects, but these are the highlights.

· Delta Airlines – Delta.com –Full redesign of a $6 billion dollar a year commerce engine. Led a team in the creation of flight search inputs and systems, award travel, and

managed the business, technology, and regulatory requirements. Also worked on the team that designed flight search results. Then we rolled that into an experience unique to the travel industry.

· Post – Honey Bunches of Oats – honeybunchesofoats.com – The Client asked for innovation leveraging a large and engaged Facebook fan base to reinforce brand and

product diversity messaging. I led the team to create a website, facebook applications, add-on games, and a brand rondelle literally built from their fans using standard jquery libraries and a combination of live Facebook data and custom database information. Designed and built usability testing prototypes, testing protocols, result analysis and response prioritization.

· American Express – YourBuzz - yourbuzz.com – Designed the Account Settings, Account and Directory definition, social dashboard, keyword search, listings, reports,

sign-in, sign-on, and on-boarding for American Express’s new small business social networking management application.

· American Express SkyBox report from Mercedes Benz Fashion Week NYC – www.amexskyboxreport.com - Designed a custom Tumblr web experience that changed with

each day of Fashion Week and then converted to an archived view after the live event. Also designed the social networking strategy to help drive visits through extensive use of Facebook social plug-ins and Twitter custom hashtags.

User Experience Architect - Newmarket International (NI) - Jan 2007 – June 2010Designed and implemented an enterprise experience roadmap, driving annual revenues from $35 to $80 million while reducing development and support costs.Rescued accounts in danger of being lost to competitors:

· $3.5 million account with two thousand users upgraded based on savings resulting from design efficiencies.

· Implemented enterprise design roadmap helping to retain several ‘Top 10’ customers facing training challenges across their enterprise, reducing their staff training

times by 35%.

· Designed a streamlined experience reducing user workflow steps by 80% for Carlson Hotels resulting in a 2 year contract extension worth $2.5 million and $100k in

custom software development revenue.

· Re-designed a failing subscription based web application to reverse user abandonment trends, increase the competitive sales win ratio from 18% to 86% over the

largest market threat, and improved platform performance producing 95% fewer errors.Contributing speaker to NH and ME UPA and IxDA events.

User Experience Design Lead - NI - Oct 2005 – Jan 2007

· Conducted user centered design activities on projects, including responsibility for:

· Working with business, technical and architectural teams to design user interfaces

· End user and task analysis, site visits, and persona development

· Iconography, icon design, dialog and message content copy

· Design and produce product marketing materials including Adobe InDesign templates and hand coded html / CSS websites

Multimedia Designer & Developer - NI - May 2002 – Oct 2005Designed and developed multimedia based training for Newmarket International productsDrove product innovation which increased revenue from $62k to $3.1 million. Developed technical and end user experience for SCORM compliant training

Principal – Black Bear Media - Mar 1997 – Feb 2002Owner and principal of a boutique web design company focusing on rich web interactions and eLearning solutionsCreated eLearning courseware for Fortune 500 clients such as Coca-Cola, Ford Motors, Kroger food stores, 2000-2002.

Technical Skills & AssociationsSoftware: Adobe Creative Suite, Expression Design Suite, Visio, Morae, MS Office, Access, MSSQL Server, MS Reporting Services, Crystal Reports, Enterprise Architect / UML, AccuRev, VSSSocial Networking Design:

· Facebook - strategy, design, community management, and brand messaging

· Twitter: strategy, design, hashtag formulation

· Foursquare: strategy, design, campaign design, current mayor of Cove Beach, Stamford, CT

· Yelp, YouTube, Tumblr, Wordpress, CitySearch, SuperPages

· CoTweet, Radian 6, Hootsuite, SproutSocial, @thisMoment CMS, Tweetdeck

Usability test design, test analysis, prototype design and buildingScripting: Javascript, CSS, HTML, ASP, XML, AJAX, .Net Other: SEO, Google AdWords, WordPress, DotNetNuke, SCORM, LMS, CMS, CRM, SFDCMember UPA – Usability Professionals Association

Education & Training1993 - B.A. University of New Hampshire, Political Science, minors in Philosophy and Justice Studies1992 - McNair Fellow

Portfolio and references available on request.

"…highly professional,

meticulous, and one of

the hardest working and

most highly skilled user

experience designers I

have had the pleasure of

working with…In my

professional opinion, he

is the type of designer

developers like to work

with and is great in a

team setting. I would

work with him again

without hesitation…"

Jay Hilyard,

Author C#

Cookbook, O’REILLY

“…a dedicated and

motivated user

experience designer that

quite simply just "gets

it". Kirk is very

thorough in his ongoing

study of emerging user

experience direction and

technologies but

understands the balance

and tradeoffs associated

with the daily business

pressures to ship

software….”

Tim Pelletier,

Enterprise

Architect,

Newmarket

International Inc.

Kirk Brote PortfolioLive Sites


July 10, 2011

Hand Sketch of UI

Live Site Experience

A Delta.com Flight Search B American Express – YourBuzz.com D Honeybunchesofoats.comC American Express – SKYBOX REPORT

Scenario Grid

Annotated Wireframe


Hand Sketch of Workflow

Annotated Wireframe


Annotated Wireframe

Hand Sketch of UI


Social Activation Diagram

Kirk Brote PortfolioDelta.com


July 10, 2011

A Flight Search Input Systems B Flight Search System Results C Fuzzy Search & Admin Tools

What did Kirk do on all of this?

Lead Interaction Designer –

Design and Team Lead - Flight input systems, overlay system, fuzzy search, and admin utility

Contributing Lead - Flight search result systems, and shopping cart

Kirk Brote PortfolioAmerican Express YourBuzz


July 10, 2011

A YourBuzz Sign-Up Welcome B YourBuzz Directories Overview C Reactivate Account Screens

D Reactivate Account Workflow


Lead Interaction Designer – Designed the Account Settings, Account and Directory definition, social dashboard, keyword search, listings, reports, sign-in, sign-on, and on-boarding

Kirk Brote PortfolioHoney Bunches of Oats


July 10, 2011


Lead Interaction Designer – Everything...Site design, interaction design, requirements gathering, social strategy, information architecture, and Facebook

data integration

UI Block Diagram


Annotated Wireframe

UI Block Diagram


Annotated Wireframe

Kirk Brote PortfolioHoney Bunches of Oats Interaction Models


July 10, 2011

B Recipe Carousel and Tab StripC Carousel Interaction Model

A HBO Rondelle Interaction Model

Kirk Brote PortfolioAmerican Express Skybox Report


July 10, 2011

A Live Single Column Layout B Post Event – Archive View C Single Article View

‘Connected’ bloggers important to spreading the fashion world word: the Bloggeratti.

1

1

Every Like and tweet was pre-defined and unique and there was a recipe for how to formulate them in the event of new or unexpected content. The custom Like tags allowed unprecedented views of demographic behavior.

2

2

Display telegraphs the type of content

3

3

Aggregated posts per time period

4

4


Lead Interaction Designer – Designed Social Media Strategy, custom Facebook and Twitter tag implementations

Annotated wireframes for technology handover

Kirk Brote PortfolioYourBuzz Delete Account Workflow Visualization


July 10, 2011


Lead Interaction Designer – Lead designer responsible for team of designers, copywriters, and art directors.

Workflows, experience maps, information architecture, competitive analysis, and raw

design chops. Mmmm...chops.

Kirk Brote PortfolioYourBuzz Keyword Search


July 10, 2011

Why is this here?

Evangelizing for features you believe in, or fighting the good fight – Not everyone sees the benefits when they see the idea. Sometimes you have to fight

like hell to bring great ideas to life.

Kirk Brote PortfolioHBO Facebook Apps & Games


July 10, 2011

A HBO – Facebook – Join the Love bunch App

B HBO – Facebook Contest – Raisin the Stakes C Raisin the Stakes Full Height Prize Stack

D HBO – Facebook – Join the Love bunch App

So Which Part is my Part?

Lead Interaction Designer – Concepting, layout, copy, tone, overall design, and function

Drive community awareness and participation while reinforcing brand

Pre-populate the homepage rondelle prior to going live.

Kirk Brote PortfolioPost Naturals


July 10, 2011

A Post Naturals Website Search

B Post Naturals Search Results

C Other States – No Results

D Types of Results Displayed

What’s Interesting About This?

Adding functionality into existing visual and semantic taxonomies can be challenging. In this case adding text search into a zone containing an existing check box based approach. How do you make this clear to users when there is no time and no budget? Get both and do it right. It’s never too late for the right answer.

Kirk Brote PortfolioApplication UIs


July 10, 2011

A Sales System Dashboard

J Create Business from Lead

C Space Management ‘Diary’

I Request for Proposal Inbox

D Innovation – Visual Space ManagementB Business Alerts – Progressive Disclosure

E Web Application Login G Step 2 in web utility H Step 3 in web utilityF Step 1 in web utility

What Did I Contribute?

As the Enterprise Experience Architect I was responsible for signing off on every UI and API experience that went out the door. Layout, design, iconography, and massive documentation to support a team of onshore and offshore engineers.

Managed a team of onshore resources including a graphic designer, interaction designer, and experience designer as well as an offshore team of visual and experience designers in support of an $86 million dollar a year software company.

Managing across projects and continents was an experience that had me presenting in India at 3:00 AM and then back to work on the East Coast at 8:00.

Kirk Brote PortfolioDelta.com IA


July 10, 2011

What Did I Contribute?

I worked on the team led by an associate director and another lead IxD on the IA and taconomy of pages, page types, and page complexities required to support a $6 million dollar a year commerce juggernaut.

Kirk Brote PortfolioHoneyBunchesOfOats.com IA


July 10, 2011

Global Navigation Level 1- Product SKUs (bold text indicates label text)

Honey Bunches of Oats Honey RoastedHoney Bunches of Oats with Cinnamon BunchesHoney Bunches of Oats with Vanilla BunchesHoney Bunches of Oats with Real StrawberriesHoney Bunches of Oats with Raisin MedleyHoney Bunches of Oats with AlmondsHoney Bunches of Oats with Pecan BunchesHoney Bunches of Oats with Real PeachesJust Bunches! Honey RoastedJust Bunches! Cinnamon

Level 1a – When a top level product SKU is opened a submenu is presented:Flavor & Nutrition – onClick navigate to Product SKU base pageMeet the Fans – onClick navigate to Homepage with rondelle open to selected SKU and fans highlighted

Global Navigation Level 2 – High value contentPhase 1 – Site Launch

RecipesEventsNutritionBunchTV

Newsletter sign up linkPhase 2 – Maturing site content – anticipated 6 months out Love Bunches

Global Navigation Level 2a – Level 2 Submenus The Events navigation item displays the current promotional event below it. For example the Old Navy Flip Flop event

Global Navigation Level 3 – Common Links / FooterContact UsPrivacy PolicyTerms of UsePostcerals.comBuy at Amazon (Amazon Logo)

Global Navigation Level 4 – Sharing LinksFacebook Twitter Email

1.0 Homepage

3.1 – Newsletter sign up confirmation and Thank You

Overlays

3.0 – Newsletter sign up

NAVIGATE 3.2 – Send email

3.3 – confirm email sent

ONSUBMIT of form show Thank you

ONSUBMIT of send email show confirmation

3.4 Big Love Recipients List

2.0.9 - Just Bunches! Cinnamon

Product Information Nutrition

2.6 Love Bunches – Phase 2

2.0.8 - Just Bunches! Honey Roasted


2.0.7 - Honey Bunches of Oats with Real Peaches


2.0.6 - Honey Bunches of Oats with Pecan Bunches


2.0.5 - Honey Bunches of Oats with Almonds


2.0.4 - Honey Bunches of Oats Raisin Medley


2.0.3 - Honey Bunches of Oats with Strawberries


2.0.2 - Honey Bunches of Oats with Vanilla Bunches


2.0.1 - Honey Bunches of Oats with Cinnamon Bunches


2.0.0 - Honey Bunches of Oats Honey Roasted


2.5 – Contact Us

2.4 BunchTV

2.3 – Events

2.2 – Nutrition

2.1 - Recipes

Kirk Brote PortfolioPresentation Graphics


July 10, 2011A Software Roadmap Visualization B Event Workflow

C Ecosystem Visualization D Enterprise Software System Visualization

What’s so great about presentation graphics?

Part IA, part design, and all about telling the story. Presentation graphics can be hero’s and help people ‘see’ the story, or they can be massively overly complicated confusion farms.

Kirk Brote PortfolioDelta.com UX testing


July 10, 2011

Kirk Brote PortfolioSocial Networking Strategy


July 10, 2011

Core Experience

Facebook

Twitter

Tumblr

You Tube

Brand Experience

Four Square

Word Press

Community Management

Community Manager

Management Team

Management Tools

Channel Comments

BlogosphereOLA

Organic Search

Channel Comments

Blogosphere

OLA

Organic Social

Retweets

Blogosphere

OLA

Hashtag traffic

Check In Comments

Blogosphere

OLA

Organic Social

CRM

OLA

Organic Search

Review Sites

Superpages

Citypages

Yelp

Yahoo Vertical Specific

Google

Bing

Common Social Networking Scenarios / Use Cases

No participation – wow you can hear a pin drop

Not enough participation – how do we encourage the idea to spread?

Too much participation – how do we throttle down the participation in the event it overwhelms the capacities?

Negative participation - Let’s be honest people flame message opportunities when they are angry. How do we move these conversations to the proper channel in a transparent manner?

Not the right kind of participation – How do we alter or influence the trajectory of discussion once this is out in the wild?

My Social Networking Projects

YourBuzz.com – American Express Open - Get a consolidated view of what customers have to say about your business across CitySearch, Yelp, Facebook, and other popular websites.

HoneyBunchesOfOats.com – Post Cereals - What to do with 15,000 screaming Facebook fans? Celebrate them, what else?

AmexSkyboxReport.com – Spreading the word about Mercedes Benz Fashion Week NY from an insiders perspective. Break out the Manolo’s and activate the Bloggeratti.

Coming Soon…Ask me about my newest release after the big announcement July 11th 2011 at the TED global conference in Edinborough, Scotland.

Kirk Brote PortfolioMobile Design


July 10, 2011

Kirk Brote PortfolioTiny Art


July 10, 2011

Documents

Kirk Brote Portfolio