Website of Dreams
If You Build it, Will They Come?
ROGUE ELEMENT : PROMET SOURCE : #MCS2
John Nollin
@prometsource
Promet Source
www.prometsource.com
Rogue Element
www.rogue-element.com
Rob Coleman
@rogueelementinc @mwskatecast
Allison Manley
The Problem
Goals for the New Site
• Smaller site
• Easier publishing workflow
• Represent the brand
• Express Grinnell’s distinctiven...
Step 1: The Audit
Audit: Key Findings
• Brand was strong for Grinnellians,
but not at all for the uninitiated
• Navigation was a mess
• Drup...
“It looks like the website
for a bank.”
“I can’t find anything
on this site.”
What We Heard
Prospective Students
During your last visit to the Grinnell
College website, were you able to
find what you were looking f...
During your last visit to the Grinnell
College website, were you able to
find what you were looking for?
Current Students
The CMS
Engagement
Step 2: The Process
“A brand we can all be
proud of.”
Concept Statements
• Home & Horizon
• Unexpected
• Individuality
Prototyping “Individuality”
Design #1
Design #2
Design #3
Customized Tile System
Top = Curated
Below = User’s Choice
How About a Custom Tile?
Create An Account
Performance
Other Benefits
• No roles-based navigation:
the masthead is uber-simple.
• Truly makes the home page the hub
from which yo...
Office / Department Pages
Wireframes
Content: “feed the beast!”
> 1200 Fields < 350 Fields
Step 3: Infrastructure
Content Strategy
• Page count reduced from
27,000 to 5,000 pages
• Supporting a new publishing workflow
Consolidating Tiles?
Taxonomy
Balancing Control and
Autonomy
Did it Work?
Will They Come?
User Testing
Results to Date
• Challenging users to generate
current content
• Initial launch — iterative
changes as feedback comes in
Could Other Schools
Replicate This?
• Can you sell it internally?
• Do you have an agreed-upon brand?
• Can you get buy-in...
Threats?
• They may say things you don’t want to hear
• It is difficult to change behaviors
• More content = More content ...
Benefits?
• Authentic communication
• Engages the school community
• Puts the school into real conversations
• Provides re...
Thank you!
John Nollin
john@prometsource.com
@PrometSource
Rob Coleman
rob@rogue-element.com
@rogueelementinc
Allison Manl...
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come
Upcoming SlideShare
Loading in...5
×

Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come

251

Published on

Grinnell College in Iowa had a website that wasn’t representing the school well, and an intranet system that had been hijacked by users to bypass the main site. When tasked with redesigning the site, Grinnell needed to differentiate itself from its peers, and bring users back. Grinnell boasts rigorous academics, an active campus, and fantastic facilities, but many schools can claim the same. One differentiator is that Grinnell celebrates the individual. Through its welcoming culture of self-governance and the ability to create your own curriculum, the college empowers students to carve their own way through the college experience. It is not the only school that allows a student to do this, though it is one of the few.

So we asked: how do we distinguish Grinnell's unique take on crafting an individual education from its peers? How do we show the activities and news happening on campus? How does Grinnell bring users back from the intranet? How do we make as many departments as possible happy with a full redesign? And lastly, how do we best use Drupal to make it all happen? We decided to demonstrate it with a website that allows users to customize their experience on the site. Learn how Grinnell College, Promet Source (the developers) and Rogue Element (the design firm) worked together to create a customizable website: how Rogue designed it, how Promet built it and how Grinnell planned to use it.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
251
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Sorry for the Field of Dreams pun . . . it is a school in Iowa after all.
  • JOHN Open source web development Chicago Drupal and native IOS Grinnell Un of iowa U norther Iowa Marquette NYU Grinnell ALumni
  • The Problem: A site that did not work for anyone (with visual) Branding Issues colors, look and feel, etc. Originally blue! UI/UX Issues navigation, search, hierarchy Departments defecting brand, upkeep, urls, control Content publishing and site updates add and edit content number of admins Near universal agreement on what makes Grinnell special Website lacks basic brand signals Website fails to show Grinnell’s culture Result: prospective students don’t know who you are, and outside media is allowed to define the college
  • smaller site: were at 27000 easier publishing workflow content tagging less to appear to be more represent the brand bring ALL users back current, prospective, faculty, staff, alum differentiate them from similar schools Build your own experience a complete overhaul: bottom up audit and IA UI/UX needs and navigation Utilizing tagging and publishing workflow Roles and permissions
  • For bullet #1: Near universal agreement on what makes Grinnell special Website lacks basic brand signals Website fails to show Grinnell’s culture : outsiders could only think RURAL Result: prospective students don’t know who you are, and outside media is allowed to define the college
  • Problem messaging and brand consistent writing style Representation of who Grinnell really is Proposed solution Introducing a brand and design that appeals to all parties
  • Problem Not able to bring new features to all department Control server, site outage content updates security and updates Proposed solution consistent navigation and layout to all department “sites” Standard set of “must have” sections Ability to have a few “add on” sections
  • Problem Not able to bring new features to all department Control server, site outage content updates security and updates Proposed solution consistent navigation and layout to all department “sites” Standard set of “must have” sections Ability to have a few “add on” sections
  • Problem Difficult for admins to update the site and provide meaningful content to visitors poorly organized (IA) and tagged content for ease of navigation or search Limited ability for users to interact with the content 200+ admins on the site Content not being driven places, instead being placed Proposed solution Publishing workflow to make administration of content easier Tagging system for improved content workflow, navigation, and search Improve IA to offer easier to follow flow to site navigation addition of best practice and most common social aspects to content driven sites roles and permissions
  • Problem Website did not offer anything appealing for visitors (content) Navigation was difficult to get to and find what you were looking for No hook, or reason to come back Proposed solution High content driven homepage that offers tons of information at your fingertips Customizable homepage depicting the competitive advantage grinnell offers Improved navigation to make finding what you need simple
  • Three terms Home: Grinnell College provides students with a secure, comfortable space from which to explore who they are and what they want to become Unexpected: Grinnell College gives students an exciting learning environment filled with the unexpected and teaches them to explore their possibilities Individuality: This concept explores the idea of a customizable experience that allows members of the Grinnell community to submit new “community elements” for inclusion on the website and to save these elements to a personalized dashboard or account. Another way express this concept would be to provide a custom experience every time a user visits the site, with a new selection of features exploring an eclectic mix of interests and topics. We can also provide roles/tasks-based “filters” to arrange the elements in new ways.
  • Started with pencil sketches to first define those three concepts. As we sketched, the idea of customization for “Individuality” came up. Mapped out both mobile and desktop, and talked the idea through with Promet. It was definitely out of scope and budget, so we went into the presentation with strategies.
  • To demonstrate indivduality, we came up with three different designs. The first was a mosaic and the text would appear as you hovered over each tile.
  • More Pinterest-like, with the customization panel on the left that would slide out from the edge of the browser. Tiles could be as tall as needed and were categorized with the latest story at the top and others below.
  • The chosen version. Very taxonomy-driven, with a selection of tiles from which people can choose.
  • Customization Tile System user login creating your own experience Engagement content Analytics
  • Everything above the gray rules = curated content
  • Everything below = user’s choice. We considered a few options for saving: • cookies • pre-selected info depending on your user group (prospectives, alumni, etc) • truly customizable: create and account and pick your choices. Newspapers were trying this route. Once account is created, your tiles appear.
  • John’s idea: to have one tile in which you could put links to most commonly visited/useful pages for you. Could also link to outside sites. User testing: half of users said they just bookmark pages, but half really liked the ability. You can always turn it off if its useless to you. Many college sites offer quick links, but now you can choose your own.
  • What user sees when they are choosing their tiles and quick links
  • Dedicated and cloud based load balance solution Scaleable Authenticated users to cloud Unauthenticated/anonymous get served cached data from dedicated server
  • Allison
  • Promet talk about process from wires to action on these
  • Department/office pages content types customize their own area standard set of menu items on each page can also choose additional blocks/sidebar items ownership/autonomy to their own content ability to have their content “grabbed” and escalated Roles and permissions
  • Department/office pages could also customize . . . to a degree. Grinnell wanted to start with cohesion content types customize their own area standard set of menu items on each page can also choose additional blocks/sidebar items ownership/autonomy to their own content ability to have their content “grabbed” and escalated Roles and permissions
  • Content -- Feed the beast Infrastructure to power the content Well thought out content types, fields, etc Ease of use for administration to add content taxonomy Hierarchy and department driven content Topic driven tagging and content Publishing workflow and escalation of content What content types can departments contribute to How can these piece of content add to not only their section but other pages How can grinnell communications push content to users while also allowing them to choose their own content to be fed? consolidating tiles being smart about how many back-end editors could support the tiles there are 30 tiles presently, could split off as needed.
  • taxonomy Hierarchy and department driven content Topic driven tagging and content
  • Publishing workflow and escalation of content What content types can departments contribute to How can these piece of content add to not only their section but other pages How can grinnell communications push content to users while also allowing them to choose their own content to be fed?
  • Publishing workflow and escalation of content What content types can departments contribute to How can these piece of content add to not only their section but other pages How can grinnell communications push content to users while also allowing them to choose their own content to be fed?
  • Content escalation by more sr. staff and permissions
  • Content escalation by more sr. staff and permissions
  • This wasnt a situation where we figured out the specks and then just went to work without the Grinnell team. They too needed to get “work” done.
  • Page count were at 27000 edited down to 5000. Edited archivable content deleted redundancies. Publishing workflow Roles and Permissions Content types taxonomy working Created a taxonomy to match their colleges structure so that they could power the publishing workflow Making less content seem like more.
  • consolidating tiles being smart about how many back-end editors could support the tiles there are 30 tiles presently, could split off as needed. “ Poster of the Week” demonstrates bringing the engagement from the physical posters back online, and reflects the campus culture
  • Offer a more meaningful way to find content (dont always use search) Hierarchy -- groups Topics -- Services -- need to spend a lot of time to build a category taxonomy that meets the needs of your college or university 800+ tags 4 levels
  • Balance Control and autonomy Standard set of branding/design/templates Standard set of required menu items Ability to choose add ons Future ability to have more add ons
  • Before any development began, we ran user testing with Prospectives on if they would want customization. All subjects liked the idea. Current Students, Faculty and Staff were also more positive than not.
  • JOHN Google Analytics: Visits and Pageviews both increased in less than a week
  • Other Circumstances that Benefited this project: 1. Small school 2. a site so old it needed a 100% overhaul, soup to nuts 3. a healthy budget 4. they wanted to make an impression 5. new risk-taking president
  • Grinnell is still struggling with content but it’s coming along.
  • Higher Ed Web 2013 presentation - Field of Dreams, build it and they will come

    1. 1. Website of Dreams If You Build it, Will They Come? ROGUE ELEMENT : PROMET SOURCE : #MCS2
    2. 2. John Nollin @prometsource Promet Source www.prometsource.com
    3. 3. Rogue Element www.rogue-element.com Rob Coleman @rogueelementinc @mwskatecast Allison Manley
    4. 4. The Problem
    5. 5. Goals for the New Site • Smaller site • Easier publishing workflow • Represent the brand • Express Grinnell’s distinctiveness • Bring ALL users back • Build a new information architecture
    6. 6. Step 1: The Audit
    7. 7. Audit: Key Findings • Brand was strong for Grinnellians, but not at all for the uninitiated • Navigation was a mess • Drupal Issues • User Engagement
    8. 8. “It looks like the website for a bank.” “I can’t find anything on this site.” What We Heard
    9. 9. Prospective Students During your last visit to the Grinnell College website, were you able to find what you were looking for?
    10. 10. During your last visit to the Grinnell College website, were you able to find what you were looking for? Current Students
    11. 11. The CMS
    12. 12. Engagement
    13. 13. Step 2: The Process
    14. 14. “A brand we can all be proud of.”
    15. 15. Concept Statements • Home & Horizon • Unexpected • Individuality
    16. 16. Prototyping “Individuality”
    17. 17. Design #1
    18. 18. Design #2
    19. 19. Design #3
    20. 20. Customized Tile System
    21. 21. Top = Curated
    22. 22. Below = User’s Choice
    23. 23. How About a Custom Tile?
    24. 24. Create An Account
    25. 25. Performance
    26. 26. Other Benefits • No roles-based navigation: the masthead is uber-simple. • Truly makes the home page the hub from which you could go.
    27. 27. Office / Department Pages
    28. 28. Wireframes
    29. 29. Content: “feed the beast!”
    30. 30. > 1200 Fields < 350 Fields
    31. 31. Step 3: Infrastructure
    32. 32. Content Strategy • Page count reduced from 27,000 to 5,000 pages • Supporting a new publishing workflow
    33. 33. Consolidating Tiles?
    34. 34. Taxonomy
    35. 35. Balancing Control and Autonomy
    36. 36. Did it Work? Will They Come?
    37. 37. User Testing
    38. 38. Results to Date • Challenging users to generate current content • Initial launch — iterative changes as feedback comes in
    39. 39. Could Other Schools Replicate This? • Can you sell it internally? • Do you have an agreed-upon brand? • Can you get buy-in from departments? • Do you want a site that’s an evolving story? • Can you assign a Product Owner? • Can you feature-freeze?
    40. 40. Threats? • They may say things you don’t want to hear • It is difficult to change behaviors • More content = More content management
    41. 41. Benefits? • Authentic communication • Engages the school community • Puts the school into real conversations • Provides real utility to users • Meaningful and useable administration and workflow
    42. 42. Thank you! John Nollin john@prometsource.com @PrometSource Rob Coleman rob@rogue-element.com @rogueelementinc Allison Manley @mwskatecast Grinnell images by Justin Hayworth
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×