Download - MS&R Shareholders Presentation
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