Posts Tagged "webdesign"

#heweb09 jQuery: An Introduction – as easy as (pan)cakes?

Posted by on Oct 5, 2009 in Uncategorized

View the S5 presentation: http://www.ViethFamily.com/jQuery

There is absolutely no room in the jQuery session at #heweb09 – we started early because no one else could fit. Overall it’s been quietly exciting – lots of demos, a great introduction – I’d like to hear about the pros, cons vs flash and also some live examples (i.e. a school website)

BTW Our new homepage (launched last week) uses jQuery for its animations: http://www.ivey.uwo.ca

Learn More

eduWEB 2009: William & Mary Redesign Presentation

Posted by on Jul 21, 2009 in conference

Notes from presentation …

I’m very excited about this presentation – even their ppt is pretty!

Intro:

  • W&M was working from a design that was 9 years old
  • Spent about 4 months pre-planning, then RFP and selected mStoner
  • Partnership with mStoner was citical to project’s success

The mStoner Essence: (Redesign Strategy)

  • Discovery
  • Strategy Development
  • Content Creation
  • Design + Testing
  • Technology pecifications
  • Implementation + Launch
  • Constant Communication

Plus signs + are the cool new ampersand &.

The W&M Essence: (Redesign Strategy)

  • Transparent communication
  • Campus participation
  • Project management from it
  • 20% technology, 80% not
  • Trust in the mStoner redesign process

Phase I – Discovery:

mStoner

  • mStoner gets to know the institution (deep dive on site, read current publications)
  • Competitor review (“W&M doesn’t have peers!”)
  • Idetify goals: who is the site for? etc
  • Talk to everyone possible to see what they want, need, think re: the site

W&M

  • Prepping campus participants
  • The green room: cookies and drinks to engage while also shooing out the previous group

W&M chose not to sit in on stakeholder interviews with mStoner – they feel they got much more honest input because of this.

… in a lot of ways, the redesign I am working on has been at a disadvantage because pre-planning was done by a team that no longer exists.  All these great steps, if they were done, no one knows about them or has the outcomes … these prep activities are critical for the agency to learn the culture of the school and its quirks/priorities.  Especially in higher ed redesigns, which are incredibly complex and political, getting to know the ropes is one of the most important steps for an agency.

Phase II – Strategy Development

mStoner

  • prioritize audiences
  • formulate information architecture
  • outline creative recommendations, messaging ideas
  • Sort through policies and procedures
  • plan to make it scale

College of W&M

  • Internal vs External
  • Are you in?

By this point, W&M project manager had made 63 personal visits across campus – not phone calls, not emails.  Started with stakeholders that promised to be the hardest to satisfy.

Provost was the “champion” of the project.  Champion does not need to be incredibly involved, but is critical to keep the project moving when authority or heat needs to be turned up – or decisions need to be made despite division in the community.

Phase III – Content Creation:

mStoner

  • What exists? What needs to be recreated?
  • Who produces it? Who reviews it?
  • Settle on key messages, feature banks
  • Strike the right tone

College of William & Mary

  • IA and copy (who? and how?)
  • Editorial review

Previous redesign had been done in a vacuum – everything about it from IA up was “off.” Did lots of internal communication: IA is not your org chart.  25 meetings about the academics section of the website! My experience: IA meetings are long, and painful, and circular but always worth it.  Stakeholders know the content and audience best, always include them even though its painful.

Reviewers: Sent entire sections of site content to volunteer reviewers (tens of faculty members). Many didn’t have time, many provided incredible feedback.  Content was reviewed by people from other sections as well as the section.

mStoner: IA should look about 75% exactly like every other college.  There are sections and labels that users are looking for.  i.e. about, admissions, news.  W&M chose to elevate research.

Phase IV – Design + Testing

mStoner

  • create a spectrum of design concepts
  • survey designs with target audience
  • build an entire template suite
  • test chosen concept with real users

W&M

  • beware of monsters (combining elements from multiple designs)
  • feedback not voting
  • big splash is 3 not 1 (unveiling possibilities was bigger deal than the final decision)

mStoner: important to create a spectrum of design concepts.  Something that is too boring, something that is too edgy, something that is too touchy feely, something that is too cold.  This helps gravitate the community around whichever one feels right.  Online design surveys of thousands of potential students asking them how the designs they feel,what they say.  Then on campus focus groups & interviews – students, faculty, staff, anyone that wants to talk.

Stakeholders are always waiting for pictures.

W&M pulled together a group of people on campus that had professional experience with design.  W&M was very careful to make sure that people knew they were providing feedback, not voting.  Before beginning discussion, gave each participant a piece of paper with questions and had them write down feedback – once the conversation begins, they will be biased/silenced/volumized.

Design possibilities were unveiled on project blog, as well as to Facebook supporters.

Wanted to get feedback on what felt right, what felt wrong?

Audience navigation very subtle – sent out internal communication that there were special areas for each audience – to soften blow of a sudden, drastic change to current navigation.

Phase V – Tech Specifications

mStoner

  • Create a short-list of CMS options
  • Identify/select CMS
  • Develop functional specifications based on designs
  • Code HTML templates, CSS files

W&M

  • Show & Tell
  • Demo the two best

W&M shared CMS feature lists and design specifications with anyone that asked – found this effective.  Most people took a step back and accepted that team knew what they were doing.

Had mStoner demo two different systems to about 100 people! Wrote a script of what they wanted mStoner to show.  Important to not have the vendor run the demo.

Global Image – mStoner’s technical partner – helped with the implementation of Cascade.

Phase VI – Implementation + Launch

mStoner

  • implement templates and features in CMS
  • Tie-in additional systems
  • Test functionality in an array of browsers
  • Configure users, roles, workflows
  • Conduct necessary training

W&M

  • Stop communicating
  • Command central

“You can’t have big red text.  And you can’t make things flash.  The price you pay for a beautiful award winning site, and functionality being added & improved every day, is that you have to give up some control.” rough quote – very well said.

W&M’s website now sits with IT and its suggested that this should have been the case long before now.  I wonder why? Where does the web sit at your institution? Media/Public Relations? IT? Web Comms as its own world? Perfect world: I would have the last option, but at best that is a future goal (for me).

Learn More