We’ve discussed the idea of collaborating on a film project that will celebrate MS&R’s legacy.

While the project is still in ideation,here is our timeline.

01

Today

Our DELIVERABLES

02

• One 10-minute film “Story of MS&R”

• Six 2-minute videos based on issues

• Launch by August for Anniversary

Production SCHEDULE

(by August 15th)

03

Pre-Production

Production

Post-Production

• Writing

• Location Scout

• Copyright/Legal

• Content Gathering

• Storyboarding

• Interviewing

• Approval Process

• Filming

• Editing

• Coloring

• Master Cutting

• Formatting

• Launch

Recap04

MAY JUNE JULY AUG

May 1Pre-Production

June 15Production

July 1Post-Production

Today we’re here to share our Strategic Concepts & our Creative Concepts. We will also share

our findings from the last phase, and how they support our recommendations.

01

Today

Meeting GOALS

02

• Understand Scope

• Understand Process

• Understand Choices/Reasoning

• Commitment to Plan

Recap

Summary of DELIVERABLES

MS&R has contracted Mind of Klein to build its’ website and social presence

• Strategy Documents

• Site Map

• Wire frames

• Page Layout Templates

• Technology Spec Documents

• Creative Concepts (by August 15th)

• Technical Architectural Document

• QA Specs

• Website Launch

03

Recap04

Recap

What we’ve DONE SO FAR

March 24Review shareholders’ meeting with MS&R marketing team

April 1Progress review meeting with principal shareholders

April 5Review meeting with MS&Rmarketing team

April 8“Innovation Happy Hour”feedback session

April 12Review meeting with MS&Rmarketing team

April 19Review meeting with MS&Rmarketing team

05

Recap

Process SYSTEM

DESIGN

DISCOVERY

STRATEGY

06

U/X

In the Discovery Phase, we used explorative tools to survey, interview and analyze what the staff and

principals are looking for in a new website.Here’s what we learned.

07

Discovery

What we HEARD

PRINCIPAL INTERVIEWS

• “Design is what we are known for”

• “Goal of site is business development”

• “Highlight adaptive reuse”

• “Honor how long buildings last”

• “Help potential clients dive deep into us”

• “Firm should be more proactive”

• “MS&R is where the old meets new”

• “Show that work is relevant in today’s world”

• “Site doesn’t show the depth of thought”

08

Discovery

What we HEARD

STAFF INTERVIEWS

• “Website needs more personality”

• “Current CMS is clunky and slow”

• “Design has changed dramatically”

• “No consistency of vision”

• “Highlight eclectic group of people”

• “Times are changing”

• “Simple website that’s witty”

• “MS&R is diverse with many voices”

• “Blog needs to be a bigger part of site”

09

Discovery

What we HEARD

CLIENT/VENDOR INTERVIEWS

• “Most collaborative partner yet”

• “Multiple points of view make them strong”

• “Know how to adapt”

• “Diverse vision leads to good design”

• “Appreciate the younger voices”

• “Other architecture firms are stagnant”

• “Credit needs to be given to the buildings”

• “Collaboration is inspirational”

• “Focused on design not personal opinion”

10

Discovery

collaborative strong adapt vision

younger inspirational design

personality vision eclectic change

simple diverse relevant thought

(tone words)

11

In the Strategy Phase, we used what we learned from our discovery phase to put together strategic concepts

which then informed creative concepts.Here are our recommendations.

12

Strategy

Positioning STATEMENT

Culture at MS&R is forged by strong voices and

diverse opinions. Thought Leadership,

Social Interaction and Business Development

build a pathway to the

Projects and Issues

that differentiate MS&R.

13

Strategy14

Thought Leadership

SocialInteraction

Business Development

Culture

Strategy

Thought LEADERSHIP

The capacity of creating

and sharing original

content that is

thought-provoking ,

inspiring and shows

MS&R is an industry

change-maker.

Tangible ways to show this on the website:• Blog Posts/Articles/Case Studies

• Design Process

• Independent Publications

• Speaking Engagements

Other people doing this well:Architects:

• HOK

• Gensler

Non-Architects:

• IDEO

• FuseProject

15

Strategy

Thought LEADERSHIP

(Architects) HOK

www.hok.com

• Thought Leader Section

• Video Base

• Knowledge Center

• Development Process

• Highlight Systems

16

Strategy

Thought LEADERSHIP

(Architects) GENSLER

www.gensler.com

• Viewpoint

• Video Base

• Insight

• Research

• Publications

17

Strategy

Thought LEADERSHIP

(Non-Architects) IDEO

www.ideo.com

• Design Thinking

• Designer Insights

• News

• TED Integration

• Top Picks

18

Strategy

Thought LEADERSHIP

(Non-Architects) FUSE PROJECT

www.fuseproject.com

• Innovation

• Approach

• Business Model

• Practices

• Case Studies

19

Strategy20

Thought Leadership

SocialInteraction

Business Development

Culture

Strategy

Social INTERACTION

The act of integrating

and immersing within

both the physical and the

interactive

community in order to

initiate and facilitate

conversations about

MS&R and the industry.

Tangible ways to show this on the website:• Blog/Facebook/Twitter Interactions

• Community Leadership

• Design/Community Interaction

• Conference Participation

Other people doing this well:Architects:

• BNIM

Non-Architects:

• Blu Dot Swap Meet

• Pepsi Refresh

• Warby Parker

21

Strategy

Social INTERACTION

(Architects) BNIM

www.bnim.com

• Multimedia Integration

• Social Media Presence

• Blog as a hub

• Authors

• Page Hierarchy

22

Strategy

Social INTERACTION

Blu Dot Swap Meet

www.swapmeet.bludot.com

• Bidding System

• Building Network

• Bringing Fans

• Earned Media Press

• Increase Awareness

23

(Non-Architects)

Strategy

Social INTERACTION

Pepsi Refresh

www.refresheverything.com

• Social Experiment

• Community Building

• Feel-Good Press

• Engaging Social Network

• Earned Media

(Non-Architects)

24

Strategy

Social INTERACTION

Warby Parker

www.warbyparker.com

• Buy One-Give One

• Unique Selling Point

• Engaging Physically

• Interesting Concept

• Great Product

(Non-Architects)

25

Strategy26

Thought Leadership

SocialInteraction

Business Development

Culture

Strategy

Business DEVELOPMENT

Using social interaction

to share MS&R’s

knowledge leadership to

specifically share metrics

on past projects to

initiate and bring in new

business.

Tangible ways to show this on the website:• Project Details

• Differentiated Services/Design

• Staff/Principals as Issue Leaders

• Consumer Perception

Other people doing this well:Architects:

• HOK Renew

• Studio Gang

Non-Architects:

• GreenTeam USA

• Element Six Media

27

Strategy

(Architects) HOK Renew

www.hokrenew.com

• Expertise

• Featured Projects

• Details at a Glance

• Social Integration

• Process

Business DEVELOPMENT

28

Strategy

(Architects) Studio/Gang

studiogang.mpserve1.com

• Simple Design

• Movement

• At a Glance Bullets

• Photos/Concepts

• Sketches

Business DEVELOPMENT

29

Strategy

G Think

greenteamusa.com/gthink

• Article Heavy

• Opinion

• Poll

• Tools for Interaction

• Demographic Niche

Business DEVELOPMENT

(Non-Architects)

30

Strategy

Element Six

www.elementsixmedia.com

• Unique Selling Point

• Earned Media

• Client Dosier

• Events Calender

• Social Media Integration

Business DEVELOPMENT

(Non-Architects)

31

Strategy32

Thought Leadership

SocialInteraction

Business Development

Culture

Strategy

Internal CULTURE

If culture at MS&R is

forged by strong voices

and diverse opinions, the

amalgamation of these

forces creates a living

brand. Communicating

this culture is vital for

future growth.

Tangible ways to show this on the website:• Staff/Principal Profiles

• Design Process

• Community Involvement

• Insightful Multimedia Displays

Other people doing this well:Architects:

• Rice Daubney

• HMC Architects

• HOK Life

Non-Architects:

• Studio Gang

33

Strategy

(Architects) Rice Daubney

www.ricedaubney.com.au

• Dynamic

• Favorite Project Link

• Options

• Identity through Photos

• Cohesion

Internal CULTURE

34

Strategy

(Architects) HMC Architects

www.hmcarchitects.com

• Culture Page

• “Play” Link

• Idea of Balance

• Professional Option

• History Option

Internal CULTURE

35

Strategy

HOK Life

www.hoklife.com

• Micro-Site/Depth

• Multiple Contributors

• Event Recaps

• Network Immersion

• Social Media Options

Internal CULTURE

36

(Architects)

Strategy

Studio/Gang

studiogang.mpserve1.com

• Studio section

• Non-serious “Team”

• Awards

• Videos

• Drawings

Internal CULTURE

37

(Architects)

In the User Experience Phase, we explore who our key users are, and how they will interact with the website,

by understanding what they want.Here’s what we learned.

38

Sitemap39

Website Entrance

U/X

User EXPERIENCE?

40

User Experience (or U/X) is the experience a

user will have interacting with a website. It

deals with planning a site-map that is

intuitive so that each key user can interact

and follow a flow that is contextual to them

and what they are looking for.

U/X41

Two Types of Users

Key Buyers are primarily concerned with Projects:

Passive Users are primarily concerned with Issues:

Ideal USERS

(and what theyare looking for)

Corporate Institutional Residential

Academics Designers Librarians

U/X

Corporate BUYER

Aspirational Clients

• Urban Outfitters

• Carmichael Lynch

• IDEO

• Fuse Project

What are their needs/expectations?

• Energy Consumption

• Business Metrics

• Productivity/ROI

• Profit Share

42

(KEY USER)

U/X Flow43

Case Study Metrics

Project

Metrics Design

Issues

Corporate User

PROJECT ISSUE

Urban Outfitters

AdaptiveReuse

U/X

Institutional BUYER

Aspirational Clients

• Madison Public Library

• United States Senate Library • MCAD

• Masdar City

What are their needs/expectations?

• Sustainability

• Urban Renewal/City Planning

• Certification/Cost

• Government Engagement

44

(KEY USER)

45

U/X Flow

Case Study Metrics

Project

Metrics Design

Issues

Institutional User

PROJECT ISSUE

MadisonLibrary Sustainability

U/X

Residential BUYER

Aspirational Clients

• High-Income Bracket

• Awakening Consumer

• Loft and Condos

• City Slickers

What are their needs/expectations?

• Adaptive Reuse

• Issues

• Reputation/Certification • Word of Mouht/Conversation Piece

46

(KEY USER)

47

U/X Flow

About Metrics

Project

Metrics Design

Issues

Residential User

PROJECT ISSUE

Lofts &Condos Sustainability

U/X

Academic USERS

(PASSIVE)

48

What are their needs/expectations?

• Career Opportunities

• Student Internships

• Collaboration Opportunities

• Knowledge Base

• Published Media

• Case Studies

• Problem Solving Methods

• Issues

• Experiments

49

U/X Flow

Case Study Metrics

Issues

Experiments Publications

Projects

Academics

ISSUE PROJECT

DesignProcess MCAD

U/X50

Designer USERS

(PASSIVE)

What are their needs/expectations?

• Career Opportunities

• Social Networking

• Collaboration Opportunities

• Knowledge Base

• Aesthetic Styles

• Trend Reports

• Problem Solving Methods

• Floorplan Details

• Process & Ideation

51

U/X Flow

Ex Design Int Design

Issues

Networking Collaboration

Projects

Designers

ISSUE PROJECT

Sustainability CarmichaelLynch

U/X52

Librarian USERS

(PASSIVE)

What are their needs/expectations?

• Performance Metrics

• Key issues/Problems (with homelessness)

• Security of Building

• Operational Efficiency

• Community Demographics

• Functional/Flexibile of Design

• Integration of Technology

• Anticipation of Future Community Needs

• Parking

53

U/X Flow

Case Study Metrics

Issues

Experiments Details

Projects

Librarians

ISSUE PROJECT

Homelessness MadisonLibrary

From HTML vs Flash to kerning widths, here’s why we made the decisions we did, and what Strategic,

Creative or UX oriented aspect they fit.Here are the nuts & bolts

54

Specifics55

The DATABASEA Database acts as the

foundation of a house. It is the

platform that everything is built

upon. A strong foundation

equates to a strong house.

Specifics56

Flash vs HTML?• Usability

• Mobile Devices

• SEO/Google Analytics

• Compatability

• Loading Times/UX

• Accessability

• Customization

• Higher Internal Capacity

• HTML 5

FLASH

Specifics57

The CMSA CMS is the framework of

the structure. If you want to

change the utility of the

house, you need to change

the structure from the inside.

Specifics58

Typography CHOICETypography is the quiet

elements of a house that

cohesively express the overall

aesthetic of a website. It

subtly reinforces the look/feel.

Specifics59

Web FONTS

• Past

• Present

Specifics60

Name That FONT!

Specifics61

Name That FONT!

Specifics62

Name That FONT!

Specifics63

Name That FONT!

Specifics64

Why CRIMSON?• Web-Friendly

• Clean

• Modern

• Serif

• Italics

• Safety-subtext

• Traditional

• History

• Brand Consistency

Specifics65

Color SCHEMEThe color-choice is quite

simple: it is the obvious

aesthetic of the house and

expresses the external feel of

MS&R’s brand and identity

Specifics66

Why COLORS?• Ability to guide, direct and

persuade a user

• Instructive Qualities

• Appeal to a users

emotions

• Setting a mood

• Brand Consistency

HEX:

#FFFFFF

HEX:

#333333

HEX:

#FF3300

HEX:

#FFFFCC

Specifics67

Look FEEL

• Personality

• Usability

• Mobile Devices

• The Future of Webdesign

• Brand Consistency

In the Creative Concept Phase, we explore design, layout, colorschemes and typography to create

creative concepts of the website.Here’s what we’ve got.

68

Design69

(Tada!)

Creative70

FINAL DESIGN

CURRENTCONCEPT

Next Steps71

Next STEPSWeek 1 | 4/26• Refine Concept

Week 2 | 5/3• Tune Concept

Week 3 | 5/10• Develop Content

Week 4 | 5/17• Clarify Tools

Week 5 | 5/24• Finalization

FINAL DESIGNREADY FOR DEVELOPMENT (5/27)

CONCEPT PRESENTATION (4/22)

Refine Concept

Tune Concept

Content

Tools

Final

72