MIT SCHOOL OF ARCHITECTURE

1
MIT SCHOOL OF ARCHITECTURE

• Presentation to Palu Inc. on Global Navigation
  Requirements

Group One
March 2008
2
CONSTRUCT OF THIS DOCUMENT

• The first section of the document assumes that
  the presentation is directed to the senior
  management at Palu Inc. and discusses
• The background of the project
• Final deliverables that were submitted to Palu
  Inc.
• The latter section of the document is internal
  and discusses the teams process during the
  project and the post implementation analysis of
  the project. It includes
• Project methodology adopted by the contractor
  team
• Post implementation (PEAT analysis)

3
AGENDA
PROJECT BACKGROUND
DELIVERABLES SUBMITTED TO PALU INC.
PROJECT METHODOLOGY ADOPTED BY THE CONTRACTOR
TEAM
POST IMPLEMENTATION ASSESSMENT
4
PROJECT BACKGROUND

• The Statement of Work (SOW) was provided by Palu
  Inc. on behalf of MIT School of Architecture to
  Googlyeyes Industries

5
PROJECT BACKGROUND

• Palu Inc. completed a Heuristic Evaluation for
  the MIT School of Architecture in February 2008
  and their key findings were in the areas of
• Content Chunking
• Unnecessary Content
• Underlying Organization/Taxonomy
• Labeling
• Home Page
• Global Navigation Menu
• Palu Inc. recruited Googlyeyes Industries to
  primarily focus on assessing the global
  navigation of the Web site.

6
PROJECT BACKGROUND

• The project goals outlined by Palu Inc.
• The Web site should be designed with a general
  idea of competitor web site offerings and styles
  in mind, the competitors being other prominent
  top-tier university architecture schools in the
  New England Area
• The Web site should act as a vehicle for
  communication to existing students, faculty, and
  alumni by providing appropriate information for
  each audience.
• Offer compelling and useful information for
  potential students (in terms of where they might
  fit within the school and why they should want to
  attend for the school).
• Provide more sensible and intuitive groupings of
  information beneath each major navigational
  section.

7
PROJECT BACKGROUND

• Target Audience
• Prospective and current students, current and
  retired professors, and alumni.
• Project Scope
• During the prototyping phase of the project,
  Googlyeyes Industries will restrict its work to
  the Functional Requirements specified by Palu
  Inc.
• Note Googlyeyes Industries will ignore the
  Design and Technical Requirements during the
  initial phases of the prototyping project.

8
PROJECT BACKGROUND
9
PROJECT BACKGROUND
10
PROJECT BACKGROUND

• Project Deliverables
• Site Map
• Wireframes
• Note Will be annotated with changes and brief
  descriptions around the pertinent user flows
  related to the global navigation. For example,
  hover here and x happens click here and y
  happens

11
AGENDA
PROJECT BACKGROUND
DELIVERABLES SUBMITTED TO PALU INC.
PROJECT METHODOLOGY ADOPTED BY THE CONTRACTOR
TEAM
POST IMPLEMENTATION ASSESSMENT
12
FINAL DELIVERABLES SUBMITTED TO PALU INC.

• Incorporating Client Comments from Interim
  Deliverables Submission

13
CLIENT FEEDBACKON FIRST ITERATION OF THE
PROTOTYPE

• The interim deliverable submitted to our client,
  Palu Inc., on March 22, 2008 had the following
  changes that were required to be incorporated
• Unclear references to the requirement document
• Suggest an alternate icon for department
• Chunking of the original listing of the web-pages

14
Requirements Which Were Implemented
15
Requirements Which Were Deferred
16
Requirements and Design Implications

• Requirements 1 through 4 resulted in changes to
  the content of the global navigation controls and
  the footer navigation at the bottom of the home
  page. (See redesigned sitemap and
  nomenclature)
• Requirement 5 resulted in the generation of three
  alternative treatments for the display of the
  global navigation controls. (See home page
  wireframes and interior page wireframe)
• Requirement 6 resulted in two variations on where
  the global navigation controls were displayed.
  (See home page wireframes )
• Variation 1 ignores the part of Requirement 6
  that says the homepage treatment for global
  navigation should be the same on interior pages.
• Variation 2 positions the global navigation in
  the same fashion on both the home page and
  interior pages which provides an opportunity for
  additional home page content.
• Requirement 7 is represented by including logo
  links in our base wireframes that we used for the
  main and internal pages. (See wireframe base)
• This is part of the current MIT Architecture
  website design.
• We have swapped the placement of the upper left
  and lower left logo links to make the parent
  website links more prominent.

17
Original Home Page
This is a screenshot of the original MIT
Architecture home page. Note References on the
next slide to Every page mean Every page
except Portfolio in the original design.
18
Original Home Page Whats on it?
Page title and home link to architecture.mit.ed
u (On every page) Site-wide search within
architecture.mit.edu (On every page) Main
navigation controls with dropdown menus and links
to site sections. (This page only) News item
Only changing content on main page. MIT Logo and
home Link to mit.edu(On every page) SAP Logo
and home Link to sap.mit.edu (On every
page) Department title in SAP Context.(On
every page) Footer navigation links to site
sections. (On every page)
19
Persistent Page Elements
MIT Logo and home Link to mit.edu (On every
page) SAP Logo and home Link to sap.mit.edu
(On every page) Department title in SAP
Context? Make this a link to architecture.mit.edu
(On every page, See Requirement 7 ) Site-wide
search within architecture.mit.edu (On every
page) Logo and link to architecture.mit.edu(On
every page) Footer navigation links to site
sections.(On every page)
About The Department Academic Information
News Events People Resources Tools
20
our wireframe base
These elements will appear on all interior pages
as well as the home page, as in the original site
design, but with modifications to placement and
content of links. Please note wireframes in
this file represent recommended content and
layout but not specific visual treatments.
Colors and visual accents are kept to a minimum
to simplify the wireframes and need not ne
interpreted literally. Logo images are taken
from the MIT websites.
About The Department Academic Information
News Events People Resources Tools
21
Revised Nomenclature

• Recommended changes to current navigation labels

Refer to Requirement 4
22
Improve Content Section Nomenclature in Global
Navigation
23
Improve Content Section Nomenclature in Global
Navigation
24
Redesigned Site Map

• Refer to Requirements 1, 2 3

25
Redesigned Sitemap for MIT Architecture

• Three main navigation menu items (Admissions
  Degrees, Academic Info., and Research
  Disciplines) have all been condensed into one
  menu item (Academic Info.)
• Menu links to specific buildings under Resources
  Tools (Prototyping Lab Woodshop, Rotch
  Library Collections) have been moved under the
  Contacts Locations submenu item
• Portfolio is now termed as "Student Portfolio"
  and is grouped under "About the Department
• Calendars have all been combined into one submenu
  item
• Student Organizations has been relocated from
  About the Department to the Students submenu item
  under People
• Footer Navigation has been updated to reflect
  these changes

26
Redesigned Sitemap for MIT Architecture
27
Icon Redesign

• Replacing abstract icons with meaningful ones

Refer to Requirement 5
28
Redesigned Icons with Labels

• Original icons were abstract and unclear.
  Conceptual icons matching the content they
  represent have replaced them
• Note These icons are only representative
  examples of how a conceptual graphic can
  represent a topic. A graphic artist would need to
  design icons for implementation and apply a
  consistent style to them. This was out of scope
  for our project.

News Events
Resources Tools
Academic Information
About the Department
People
29
Home Page Wireframes

• With icon replacements and textual descriptions

Refer to Requirement 6
30
REVIEW OF Competitors Websites

• A cursory review of websites of competing schools
  in the Northeast revealed that the design of MIT
  Architectures website is comparatively
  attractive and usable. Some positive attributes
  of other sites which were considered when
  creating wireframe redesigns included
• Meaningful photos or images on the home page
  capture the imagination and make the school more
  enticing.
• Clear labels for sections make finding what
  youre looking for easier.
• Lack of cute or excessively whimsical design
  elements keep a site feeling professional.

Home Page for Harvard University Graduate School
of Design Harvard University is the 1 ranked
Architecture School in the country and MIT is
ranked 2
31
Home Page Design Variations

• Variant 1 resembles the existing MIT Architecture
  home page, varying only in the presentation of
  the navigational UI elements.
• 1a new icons only
• 1b new icons with labeling
• 1c text labels only
• Variant 2 introduces content on to the home page,
  providing a more obvious news section and sample
  images from student projects.
• 2a new icons only
• 2b new icons with labeling
• 2c text labels only

32
Home Page Wireframe 1a
Variant 1 Option a
When creating the new representative icons for
this page, a Graphic Designer should make the
About the Department icon give some indication
that Help or Information can be found here.
In this conceptual mockup an image of tall
buildings overlayed with a question mark icon are
used.
About The Department Academic Information
News Events People Resources Tools
33
Home Page Wireframe 1a
While these icons are not the actual replacements
for the MIT Architecture Navigation, we believe
they are more conceptually relevant than the
existing ones.
About The Department Academic Information
News Events People Resources Tools
34
Home Page Wireframe 1a
This is an example of how the new dropdown menus
will look under all of the new design prototypes.
About The Department Academic Information
News Events People Resources Tools
35
Home Page Wireframe 1b
Variant 1 Option b
About The Department Academic Information
News Events People Resources Tools
36
Home Page Wireframe 1b
Labels have been added to the revised icon set in
this option
About The Department Academic Information
News Events People Resources Tools
37
Home Page Wireframe 1c
Variant 1 Option c
News Events
Academic Information
People
About the Department
Resources Tools
About The Department Academic Information
News Events People Resources Tools
38
Home Page Wireframe 1c
News Events
Academic Information
People
About the Department
Icons have been removed in this option to allow
for a simple, text-only interface
Resources Tools
About The Department Academic Information
News Events People Resources Tools
39
Home Page Wireframe 2a
Variant 2 Option a
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
Portfolio Showcase

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
40
Home Page Wireframe 2a
Main navigation controls with dropdown menus and
links to site sections(Matches whats on every
page)
This is an example of how the new dropdown menus
will look under all of the new design prototypes.
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
MIT architecture main page should give the reader
a sense of what the architecture school is about.
A brief vision statement or information about
the department complements relevant architectural
images.
Portfolio Showcase
News cam be more prominent in this variation of
the main page because the drop-down menus are
not going to obscure it.
A changing section for showcasing visuals of
either student portfolios, learning materials,
people, completed buildings, campus locations,
architectural concepts, etc. This example would
link to the Portfolios section and the showcased
project in particular.

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
41
Home Page Wireframe 2b
Variant 2 Option b
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
Portfolio Showcase

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
42
Home Page Wireframe 2b
Labels have been added to the revised icon set in
this option
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
Portfolio Showcase

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
43
Home Page Wireframe 2c
Variant 2 Option c
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
Portfolio Showcase

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
44
Home Page Wireframe 2c
Title Relating to Vision of Department Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris non arcu in libero tempor porta. Nam
fringilla nulla consectetuer lorem. Vivamus
fermentum tellus quis nibh. Nam posuere porta mi.
Vivamus hendrerit.
Perceptions and Narrative Light and Landscape
Icons have been removed in this option to allow
for a simple, text-only interface
Portfolio Showcase

• News
• MIT Ranks Second Among U.S. Architecture Schools

Project by Viktorija Abolina
About The Department Academic Information
News Events People Resources Tools
45
Interior Page Wireframe

• With icon replacements and textual descriptions

46
Original Interior Page Layout
While we are not changing the basic structure of
the interior page layout, the treatment of the
main (top) navigation changes, as well as whats
contained in it. A screenshot of the original
interior page layout is shown here.
47
Wireframe of Interior Page
Shown here is a generic wireframe of an interior
page where top and footer navigation reflect the
modified navigation structure as per requirements
1-4. The top navigation shown here represents
option 1b.
Section or Subsection Title Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Mauris
non arcu in libero tempor porta. Nam fringilla
nulla consectetuer lorem. Vivamus fermentum
tellus quis nibh. Nam posuere porta mi. Vivamus
hendrerit. Suspendisse et ligula quis mi varius
nonummy. Pellentesque leo. Donec elit. Aenean ut
sapien sed urna adipiscing ultricies. Suspendisse
adipiscing. Pellentesque tortor. Duis a ante ut
massa rutrum vestibulum. Vivamus sit amet neque
lacinia nulla dictum semper. Nulla elementum
massa at urna. Sed risus. Suspendisse potenti.
Vivamus non dolor ultricies eros nonummy mollis.
Aenean felis mauris, eleifend et, luctus quis,
varius vel, arcu. Donec nec sem. Aliquam at
ipsum at leo dictum vehicula. Maecenas lorem
magna, pulvinar a, eleifend et, aliquet a, massa.
In justo. Nulla arcu. Nunc non lectus in lacus
sollicitudin dictum. Nulla orci risus, aliquam
nec, rhoncus eleifend, convallis eu, purus. Donec
non dui malesuada nunc vehicula bibendum.
Praesent commodo, nulla at aliquam luctus, libero
nisi ultrices pede, et volutpat magna augue id
pede. In orci felis, pulvinar id, egestas sit
amet, tristique eu, erat. Aliquam est. Nam vel
ligula.
About The Department Academic Information
News Events People Resources Tools
48
Wireframe of Interior Page
Section or Subsection Title Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Mauris
non arcu in libero tempor porta. Nam fringilla
nulla consectetuer lorem. Vivamus fermentum
tellus quis nibh. Nam posuere porta mi. Vivamus
hendrerit. Suspendisse et ligula quis mi varius
nonummy. Pellentesque leo. Donec elit. Aenean ut
sapien sed urna adipiscing ultricies. Suspendisse
adipiscing. Pellentesque tortor. Duis a ante ut
massa rutrum vestibulum. Vivamus sit amet neque
lacinia nulla dictum semper. Nulla elementum
massa at urna. Sed risus. Suspendisse potenti.
Vivamus non dolor ultricies eros nonummy mollis.
Aenean felis mauris, eleifend et, luctus quis,
varius vel, arcu. Donec nec sem. Aliquam at
ipsum at leo dictum vehicula. Maecenas lorem
magna, pulvinar a, eleifend et, aliquet a, massa.
In justo. Nulla arcu. Nunc non lectus in lacus
sollicitudin dictum. Nulla orci risus, aliquam
nec, rhoncus eleifend, convallis eu, purus. Donec
non dui malesuada nunc vehicula bibendum.
Praesent commodo, nulla at aliquam luctus, libero
nisi ultrices pede, et volutpat magna augue id
pede. In orci felis, pulvinar id, egestas sit
amet, tristique eu, erat. Aliquam est. Nam vel
ligula.
This is an example of the replacement navigation
UI as shown on a generic interior page.
About The Department Academic Information
News Events People Resources Tools
49
THANK YOU
50
AGENDA
PROJECT BACKGROUND
DELIVERABLES SUBMITTED TO PALU INC.
PROJECT METHODOLOGY ADOPTED BY THE CONTRACTOR
TEAM
POST IMPLEMENTATION ASSESSMENT
51
PROJECT METHODLOGY ADOPTED SCRUM WAS ADOPTED FOR
THE MIT ARCHITECTURE PROJECT
52
RATIONALEWHY SCRUM?

• From an internal perspective
• It was assumed that with a relatively smaller
  scope, it would provide the team an opportunity
  to minutely observe the features, benefits and
  impact of SCRUM.
• The opportunity to work with an internal team
  (i.e. colleagues from HF 710) seemed to be a
  better option than implementing SCRUM with an
  external team (i.e. Sun) given our rudimentary
  understanding of the methodology.
• It was also assumed that with a smaller project
  scope, any incorrect understanding/implementation
  of the SCRUM methodology would have minimal
  impact, thereby, enabling the team to maintain
  its established standards of quality.
• SCRUM was not adopted for the first project due
  to our collective inexperience of working
  together as a team.

53
OUR SCRUM PROCESS
PRODUCT VISION DEFINED BY PALU INC.
Clarification of product vision (RFP) to the
contractor team
The team had identified which stories would go
into the product backlog
ASSUMEDPRODUCT APPROVED BY PALU INC.
54
OUR PROJECT BACKLOG
55
OUR SPRINT BACKLOG CHART
56
ANALYSIS OF OUR SCRUM METHODOLOGYPEAT

• This chart depicts the teams post-implementation
  assessment of the SCRUM methodology
• Complete agreement that our use of burn-down
  graphs to assess the remaining work was weak.
• We had very little variance in scores in the
  following areas
• The teams SCRUM meetings were found effective in
  enabling team members to assess progress,
  activities and impediments. We had a mean score
  of 0.5 which means that the team could do better.
• The use of product backlog process to prioritize
  work. We had a score of 0.9, which signified
  strong performance by the team in this aspect of
  SCRUM.

57
LESSONS LEARNT

• Key Highlights
• Low levels of comfort with burn-down graphs,
  sprint and product backlog charts
• Stories were not developed with the client
• No retrospective was conducted at the end of the
  deliverable
• Stories written were more similar to decomposed
  tasks in the waterfall method
• Due to the simplicity of the project, backlog
  pruning was absent.

• For our next SCRUM implementation
• Ensure comfort with key tools used for SCRUM
  e.g. ability to decipher, interpret and update
  burn-down graphs, sprint and product backlog
  charts
• Ensure stories are developed through client
  involvement
• Ensure retrospectives are conducted at the end of
  each iteration
• Ensure that stories incorporate goals and
  business justification and is understood not only
  by the members of the team but also by the
  client.

58
AGENDA
PROJECT BACKGROUND
DELIVERABLES SUBMITTED TO PALU INC.
PROJECT METHODOLOGY ADOPTED BY THE CONTRACTOR
TEAM
POST IMPLEMENTATION ASSESSMENT
59
MIT ARCHITECTUREPOST IMPLEMENTATION ASSESSMENT
BY THE CONTRACTOR TEAMGROUP ONE
60
POST IMPLEMENTATIONKEY HIGHLIGHTS

• Initial Statement of Work (SOW) created confusion
  for the contractor team
• Interim project deliverables were ahead of
  proposed deadlines
• Informal risk planning existed within the
  contractor team
• Medical leave by one of the members for the week
  of March 24, 2008 compelled the team to plan
  early and complete tasks before specified
  deadlines
• Hindsight Irrespective of the magnitude of the
  project , time needs to be allotted for an active
  discussion around risks.
• SCRUM proved to be an effective methodology to
  manage and complete tasks for this project

61
PEAT ANALYSISVARIANCE FREQUENCY

• This pie-chart denotes the frequency of variance
  in the PEAT scores
• The highest percentage on the pie-chart depicts
  that of the total questions answered 41 had a
  maximum score variance of 0.5 signifying
  agreement within the team.
• 24 of the total questions answered were neither
  in agreement nor in disagreement among team
  members.
• 3 of the total questions had a maximum variance
  of 2.0 signifying strong disagreement among
  members followed by 12 of the total questions
  that had a variance of 1.5 again depicting
  differences of opinion among individuals within
  the team.
• The team members were in complete agreement in
  23 of the project post implementation questions.

Note Variance is defined as the difference
between the lowest score and the highest score
assigned per question on the PEAT
62
Peat analysisVARIANCE ANALYSIS
The maximum differences in opinion among various
individuals within the team was in the Project
Execution Support section of the PEAT
Strong Disagreement
Disagreement
Agreement
Strong Agreement
63
Peat analysisAVERAGE OF PEAT SCORES
Scores ranged from 0.7 to 1.0
Scores ranged from 0.4 to 0.6
Scores ranged from -0.4 to -0.1
64
GROUP OBSERVATIONS
65
GROUP OBSERVATIONS
66
POST IMPLEMENTATIONREFLECTION ON DIFFERENCES
BETWEEN PROJECT I AND PROJECT II

• Increased dependency and faith among team members
• Group is slowly evolving and is beginning to
  understand strengths and weaknesses as a 'whole'
  unit
• Greater variability in the average of PEAT scores
• The team is getting comfortable to honestly
  express opinions
• Decomposition of tasks were easier when compared
  to Project I
• Task completion times were better on Project II
  compared to Project I
• Quality standards of deliverables have been
  established with the completion of Project II
• i.e. This is the best or the worst we can do as a
  team
• Hand-offs and next steps among team members have
  become more efficient and smoother compared to
  Project I