Breakdown of timelines, comparative analysis and UX Experience (including strategy and audience profile) for the Minneapolis-based Architecture Firm MS&R

1. 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

2. • One 10-minute film “Story of MS&R”
Our • Six 2-minute videos based on issues
DELIVERABLES • Launch by August for Anniversary
Today
02

3. Pre-Production
• Writing • Storyboarding
• Location Scout • Interviewing
• Copyright/Legal • Approval Process
• Content Gathering
Production Production
SCHEDULE • Filming
(by August 15th) Post-Production
• Editing
• Coloring
• Master Cutting
• Formatting
• Launch
03

4. MAY JUNE JULY AUG
May 1 June 15 July 1
Pre-Production Production Post-Production
Recap
04

5. 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

6. • Understand Scope
Meeting • Understand Process
GOALS • Understand Choices/Reasoning
• Commitment to Plan
Today
02

7. MS&R has contracted Mind of Klein to
build its’ website and social presence
• Strategy Documents
• Site Map
• Wire frames
Summary of • Page Layout Templates
DELIVERABLES • Technology Spec Documents
(by August 15th) • Creative Concepts
• Technical Architectural Document
• QA Specs
• Website Launch
Recap
03

8. Recap
04

9. What we’ve
DONE SO FAR
March 24 April 8
Review shareholders’ meeting “Innovation Happy Hour”
with MS&R marketing team feedback session
April 1 April 12
Progress review meeting with Review meeting with MS&R
principal shareholders marketing team
April 5 April 19
Review meeting with MS&R Review meeting with MS&R
marketing team marketing team
Recap
05

10. Process
SYSTEM
DISCOVERY
DESIGN
STRATEGY U/X
Recap
06

11. 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

12. PRINCIPAL INTERVIEWS
• “Design is what we are known for”
• “Goal of site is business development”
• “Highlight adaptive reuse”
What we • “Honor how long buildings last”
HEARD • “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”
Discovery
08

13. STAFF INTERVIEWS
• “Website needs more personality”
• “Current CMS is clunky and slow”
• “Design has changed dramatically”
What we • “No consistency of vision”
HEARD • “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”
Discovery
09

14. CLIENT/VENDOR INTERVIEWS
• “Most collaborative partner yet”
• “Multiple points of view make them strong”
• “Know how to adapt”
What we • “Diverse vision leads to good design”
HEARD • “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”
Discovery
10

15. collaborative strong adapt vision
younger inspirational design
personality vision eclectic change
simple diverse relevant thought
(tone words)
Discovery
11

16. 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

17. 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.
Strategy
13

18. Thought
Leadership
Culture
Business Social
Development Interaction
Strategy
14

19. Tangible ways to show this on the website:
• Blog Posts/Articles/Case Studies
Thought • Design Process
• Independent Publications
LEADERSHIP • Speaking Engagements
The capacity of creating Other people doing this well:
and sharing original Architects:
content that is • HOK
thought-provoking , • Gensler
inspiring and shows
MS&R is an industry Non-Architects:
change-maker. • IDEO
• FuseProject
Strategy
15

20. Thought
LEADERSHIP
(Architects)
HOK
www.hok.com
• Thought Leader Section
• Video Base
• Knowledge Center
• Development Process
• Highlight Systems
Strategy
16

21. Thought
LEADERSHIP
(Architects)
GENSLER
www.gensler.com
• Viewpoint
• Video Base
• Insight
• Research
• Publications
Strategy
17

22. Thought
LEADERSHIP
(Non-Architects)
IDEO
www.ideo.com
• Design Thinking
• Designer Insights
• News
• TED Integration
• Top Picks
Strategy
18

23. Thought
LEADERSHIP
(Non-Architects)
FUSE PROJECT
www.fuseproject.com
• Innovation
• Approach
• Business Model
• Practices
• Case Studies
Strategy
19

24. Thought
Leadership
Culture
Business Social
Development Interaction
Strategy
20

25. Tangible ways to show this on the website:
• Blog/Facebook/Twitter Interactions
Social • Community Leadership
• Design/Community Interaction
INTERACTION • Conference Participation
The act of integrating Other people doing this well:
and immersing within Architects:
both the physical and the • BNIM
interactive
community in order to Non-Architects:
initiate and facilitate • Blu Dot Swap Meet
conversations about • Pepsi Refresh
MS&R and the industry. • Warby Parker
Strategy
21

26. Social
INTERACTION
(Architects)
BNIM
www.bnim.com
• Multimedia Integration
• Social Media Presence
• Blog as a hub
• Authors
• Page Hierarchy
Strategy
22

27. Social
INTERACTION
(Non-Architects)
Blu Dot Swap Meet
www.swapmeet.bludot.com
• Bidding System
• Building Network
• Bringing Fans
• Earned Media Press
• Increase Awareness
Strategy
23

28. Social
INTERACTION
(Non-Architects)
Pepsi Refresh
www.refresheverything.com
• Social Experiment
• Community Building
• Feel-Good Press
• Engaging Social Network
• Earned Media
Strategy
24

29. Social
INTERACTION
(Non-Architects)
Warby Parker
www.warbyparker.com
• Buy One-Give One
• Unique Selling Point
• Engaging Physically
• Interesting Concept
• Great Product
Strategy
25

30. Thought
Leadership
Culture
Business Social
Development Interaction
Strategy
26

31. Tangible ways to show this on the website:
• Project Details
Business • Differentiated Services/Design
• Staff/Principals as Issue Leaders
DEVELOPMENT • Consumer Perception
Using social interaction Other people doing this well:
to share MS&R’s Architects:
knowledge leadership to • HOK Renew
specifically share metrics • Studio Gang
on past projects to
initiate and bring in new Non-Architects:
business. • GreenTeam USA
• Element Six Media
Strategy
27

32. Business
DEVELOPMENT
(Architects)
HOK Renew
www.hokrenew.com
• Expertise
• Featured Projects
• Details at a Glance
• Social Integration
• Process
Strategy
28

33. Business
DEVELOPMENT
(Architects)
Studio/Gang
studiogang.mpserve1.com
• Simple Design
• Movement
• At a Glance Bullets
• Photos/Concepts
• Sketches
Strategy
29

34. Business
DEVELOPMENT
(Non-Architects)
G Think
greenteamusa.com/gthink
• Article Heavy
• Opinion
• Poll
• Tools for Interaction
• Demographic Niche
Strategy
30

35. Business
DEVELOPMENT
(Non-Architects)
Element Six
www.elementsixmedia.com
• Unique Selling Point
• Earned Media
• Client Dosier
• Events Calender
• Social Media Integration
Strategy
31

36. Thought
Leadership
Culture
Business Social
Development Interaction
Strategy
32

37. Tangible ways to show this on the website:
• Staff/Principal Profiles
Internal • Design Process
• Community Involvement
CULTURE • Insightful Multimedia Displays
If culture at MS&R is Other people doing this well:
forged by strong voices Architects:
and diverse opinions, the • Rice Daubney
amalgamation of these • HMC Architects
forces creates a living • HOK Life
brand. Communicating
this culture is vital for Non-Architects:
future growth. • Studio Gang
Strategy
33

38. Internal
CULTURE
(Architects)
Rice Daubney
www.ricedaubney.com.au
• Dynamic
• Favorite Project Link
• Options
• Identity through Photos
• Cohesion
Strategy
34

39. Internal
CULTURE
(Architects)
HMC Architects
www.hmcarchitects.com
• Culture Page
• “Play” Link
• Idea of Balance
• Professional Option
• History Option
Strategy
35

40. Internal
CULTURE
(Architects)
HOK Life
www.hoklife.com
• Micro-Site/Depth
• Multiple Contributors
• Event Recaps
• Network Immersion
• Social Media Options
Strategy
36

41. Internal
CULTURE
(Architects)
Studio/Gang
studiogang.mpserve1.com
• Studio section
• Non-serious “Team”
• Awards
• Videos
• Drawings
Strategy
37

42. 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

43. Website Entrance
Sitemap
39

44. User Experience (or U/X) is the experience a
User user will have interacting with a website. It
deals with planning a site-map that is
EXPERIENCE? intuitive so that each key user can interact
and follow a flow that is contextual to them
and what they are looking for.
U/X
40

45. Two Types of Users
Key Buyers are primarily concerned with Projects:
Ideal
USERS Corporate Institutional Residential
(and what they
are looking for) Passive Users are primarily concerned with Issues:
Academics Designers Librarians
U/X
41

46. Aspirational Clients
• Urban Outfitters
• Carmichael Lynch
• IDEO
Corporate • Fuse Project
BUYER
(KEY USER) What are their needs/expectations?
• Energy Consumption
• Business Metrics
• Productivity/ROI
• Profit Share
U/X
42

47. Metrics Design Case Study Metrics
Urban Adaptive
Outfitters Reuse
PROJECT ISSUE
Issues Project
Corporate User
U/X Flow
43

48. Aspirational Clients
• Madison Public Library
• United States Senate Library
• MCAD
Institutional • Masdar City
BUYER
(KEY USER) What are their needs/expectations?
• Sustainability
• Urban Renewal/City Planning
• Certification/Cost
• Government Engagement
U/X
44

49. Metrics Design Case Study Metrics
Madison
Library Sustainability
PROJECT ISSUE
Issues Project
Institutional User
U/X Flow
45

50. Aspirational Clients
• High-Income Bracket
• Awakening Consumer
• Loft and Condos
Residential • City Slickers
BUYER
(KEY USER) What are their needs/expectations?
• Adaptive Reuse
• Issues
• Reputation/Certification
• Word of Mouht/Conversation Piece
U/X
46

51. Metrics Design About Metrics
Lofts &
Condos Sustainability
PROJECT ISSUE
Issues Project
Residential User
U/X Flow
47

52. What are their needs/expectations?
• Career Opportunities
• Student Internships
• Collaboration Opportunities
Academic • Knowledge Base
USERS • Published Media
• Case Studies
(PASSIVE)
• Problem Solving Methods
• Issues
• Experiments
U/X
48

53. Experiments Publications Case Study Metrics
Design
Process MCAD
ISSUE PROJECT
Projects Issues
Academics
U/X Flow
49

54. What are their needs/expectations?
• Career Opportunities
• Social Networking
• Collaboration Opportunities
Designer • Knowledge Base
USERS • Aesthetic Styles
• Trend Reports
(PASSIVE)
• Problem Solving Methods
• Floorplan Details
• Process & Ideation
U/X
50

55. Networking Collaboration Ex Design Int Design
Sustainability Carmichael
Lynch
ISSUE PROJECT
Projects Issues
Designers
U/X Flow
51

56. What are their needs/expectations?
• Performance Metrics
• Key issues/Problems (with homelessness)
• Security of Building
Librarian • Operational Efficiency
USERS • Community Demographics
• Functional/Flexibile of Design
(PASSIVE)
• Integration of Technology
• Anticipation of Future Community Needs
• Parking
U/X
52

57. Experiments Details Case Study Metrics
Homelessness Madison
Library
ISSUE PROJECT
Projects Issues
Librarians
U/X Flow
53

58. 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

59. The
DATABASE
A 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.
Specifics
55

60. Flash vs
HTML? FLASH
• Usability
• Mobile Devices
• SEO/Google Analytics
• Compatability
• Loading Times/UX
• Accessability
• Customization
• Higher Internal Capacity
• HTML 5
Specifics
56

61. The
CMS
A 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.
Specifics
57

62. Typography
CHOICE
Typography is the quiet
elements of a house that
cohesively express the overall
aesthetic of a website. It
subtly reinforces the look/feel.
Specifics
58

63. Web • Past
FONTS • Present
Specifics
59

64. Name That
FONT!
Specifics
60

65. Name That
FONT!
Specifics
61

66. Name That
FONT!
Specifics
62

67. Name That
FONT!
Specifics
63

68. Why
CRIMSON?
• Web-Friendly
• Clean
• Modern
• Serif
• Italics
• Safety-subtext
• Traditional
• History
• Brand Consistency
Specifics
64

69. Color
SCHEME
The 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
Specifics
65

70. Why
COLORS?
• Ability to guide, direct and
persuade a user
• Instructive Qualities
• Appeal to a users
emotions
• Setting a mood
• Brand Consistency
HEX: HEX: HEX: HEX:
#FFFFCC #FFFFFF #FF3300 #333333
Specifics
66

71. Look • Personality • Mobile Devices
• Usability • The Future of Webdesign
FEEL • Brand Consistency
Specifics
67

72. 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

73. (Tada!)
Design
69

74. CURRENT FINAL
CONCEPT DESIGN
Creative
70

75. Next CONCEPT PRESENTATION (4/22)
STEPS
Refine Concept
Week 1 | 4/26
• Refine Concept
Week 2 | 5/3
Tune Concept
• Tune Concept
Week 3 | 5/10 Content
• Develop Content
Week 4 | 5/17 Tools
• Clarify Tools
Week 5 | 5/24 Final
• Finalization
FINAL DESIGN
READY FOR DEVELOPMENT (5/27)
Next Steps
71

76. 72