HEC Montréal’s Website Redesign

HEC Montréal Redesign

Opening up our Information Architecture to the

Outside World:

Bring in the users!

By

Martine Lafleur

Director, Electronic Communications Department

HEC Montréal


About me: director, web communications department

Ever since I landed on planet Web, master’s degree in history firmly in hand, I never looked back… in time.

Whether as a research officer for Quebec’s Legislative Assembly, content manager for Quebecor World and Quebecor, senior electronic branding consultant for Standard Life or director of HEC Montréal’s Web communications department, I have made the Web my space-time continuum of choice.

I am also pursuing a master’s degree in information science.

My daily challenge: turning corporate strategies into concrete Web realities!


What the HEC is HEC Montréal?

HEC Montréal is an international business school located in Montréal. We celebrated our 100th anniversary last year.


HEC Montréal at a glance:

• Nearly 12 000 students• 3 608 international students• 60 000 graduates worldwide• Nearly 250 professors• 35 study programs in Management, from the B.B.A. to the PhD• International accreditations: AACSB International, AMBA and EQUIS• Canadian accreditations: CA-IT, CMA, Canadian Information

Processing Society• The HEC Montreal's MBA, a world-renowned, world-class program:

Forbes Magazine’s biennial ranking places the HEC Montréal MBA program among the world’s best.

• A trilingual BBA program


My goal today:

Internet users have played a big role in the development of HEC Montréal’s new website.

In fact, behind the site’s updated layout is a new information architecture created in conjunction with users from the world beyond HEC Montréal.

We’ll take a behind-the-scenes look at the steps that enabled external users mainly prospective and current students help create the new Web site, and we’ll explore the true impact they have had on the final product.

HEC Montréal Redesign: Context

• Implementing a content management system (cms) in 2004 was a difficult process: Communications and IT stopped talking to each other.

• The cms implementation was presented as the Web site revamp but nothing changed visually.

• Despite being a high-powered Web content management tool, Rhythmyx came with a steep learning curve and required a great deal of user training.

HEC Montréal Redesign: Context

• Created in 2006, my department’s first mission was the revamp of the HEC Montréal’s Web site without any strategy per say other than let's update our look and feel.

• The Web strategy was in its infancy.

• Management of HEC Montréal’s Web content is decentralized and shared by between 80 and 100 webmaster/editors.

• For the longest time, everyone wanted a new Web site and thought that the cms implementation was the revamp of the Web site !

HEC Montréal Redesign: Why a revamp?

1) According to most people I met when I first arrived at HEC Montréal, the site needed a fresh look that could best promote the school and, more specifically, the individual programs.

Problem to solve: The look is somewhat stale and we need to promote our programs in a more visual form.

HEC Montréal Redesign: Why a revamp?

My take :

• A new design alone would not be a wise investment in the long run.

• The information structure as it was would not permit us to create programs-based web sites for prospective students.

• The information architecture was based on our internal organizational structure it kept bouncing users from one service to the other.

Problem to solve: Our information architecture mirrors our internal processes and administrative structure.

HEC Montréal Redesign: Goals

Mission statement for the project

Align the new Web site with HEC Montréal’s development and recruitment strategies (in-depth knowledge to be gained via interviews with staff), while focusing the site’s development on our main Web users’ needs (via intense user testing).

HEC Montréal Redesign: How to get there

1) By creating a new information architecture with the help of our target users and applying site ergonomics (ensuring that the site complies with W3C-WAI standards and usability rules);

2) By creating a new design concept for the site’s pages to make the main home page and the various programs’ home pages more attractive, efficient and dynamic.

3) By ensuring accessibility to the content and providing a structure that could evolve, thereby allowing new types of content and new sections to be incorporated.

HEC Montréal Redesign: leading actors

The Dream Team that was not in the org charts

I created a project team with the electronic communications and the IT people in charge of the CMS application.

Electronic communications• Martine Lafleur | Manager• Muriel Ide | E-communications consultant• Vincent Demers | Web designer• Josiane Doucet-Alarie | Web integrator

IT• Suzanne Corriveau | Information systems manager• Marc Saint-Louis | Computer analyst (CMS)• Naïm Seggad | Applications administrator• Guillaume Trottier | Computer analyst (CMS)

HEC Montréal Redesign: supporting actors

Partners

Creating the new Web site from scratch: new information architecture + new design + new content) required outside help:

• Bell Web Solutions (consultant firm)• Communications Indigo (web writing)• Laurent Lasalle (graphic designer)

HEC Montréal Redesign: supporting actors

The dreaded committee: the Web site advisory committee

Met when the project reached certain milestones. Their responsability was clear: the were advisory!

• Louise Champagne: Office of the Registrar• Martin Coiteux: Associate professor, • Kathleen Grant: Manager, Communications and Recruitment• Jacques Nantel: Secretary general• Jean-François Ouellet: Associate professor• Jacques Raynauld: Professor• Jean Talbot: Director, MBA program• Emmanuel Vigne: Director, Information Technology Services

HEC Montréal Redesign: Action!

Internal interviews’ goal: position HEC Montréal as publishers

We interviewed 29 people from the programs, the services and higher up.

We did not ask them how they wanted the new web site to look like but rather what the wanted to publish on the Web site, positioning us as content providers/publishers to our different audiences.


External interviews’s goal:

We interviewed 26 prospective students and current students to understand the information they need or needed in order to select HEC Montréal as their university of choice.


Results:

What we wanted to publish was information needed by our main audiences to make their final choice towards HEC Montréal.

... Now what we needed to organize that information in such a way that our target audiences would easily find it and consult it.


Card sorting

How:• We establish the set of cards from the list of the needs expressed

during the interviews and grouped them by theme ;• Each card is carefully selected and reflects a “need” related to the

site;• Cards must be grouped and sorted by “family” using our own logic.

Goal:Determine the best way to group items from the perspective of hec.ca target users and determine which terminology the users tend to use to describe these groupings.

Example

http://websort.net/s/zzzzzz/t/sidebardemo


Before card sorting

HEC Montréal Redesign: Special Effects

Wireframe Testing

Using the new information architecture, we created wireframe templates, basic content structures without any design elements incorporated.

We created 15 screens/templates in all, which were turned into Web pages and populated with content that was relevant to each page.

The tests were scripted, meaning that the ergonomist created a list of tasks that the user had to perform within those pages.

http://www.youtube.com/watch?v=y4zil1ohN2M&feature=player_embedded


Wireframe Testing :

Goals were to assess the:• Clarity of the wording• Ease and efficiency of navigation• Test-user satisfaction rates• Success/failure rate for each of the tasks to be performed

How could we possibly assess all that? With an experienced ergonomist and an eye-tracking system featuring a device that uses a set of infrared cameras built into the screen to track where the tester is looking during the test. As a result, we can literally see where testers’ eyes are looking; we can note what catches their eye, measure how much time they spend looking at the various interface elements, and note which parts of the screen they either ignored or didn’t notice.


The results were comforting ...

• The prototype was much appreciated: most gave it a 4 out of 5.• Strong association between real needs and the content provided.• Horizontal navigation with a menu on the left for the subsections

was deemed easy to understand and use.• The “Experience HEC Montréal” section was said to be interesting

and useful.•The templates were simple and easier to navigate than the existing

Web site.


... but don’t get a fat head!

• Access to the various client groups gathered under the “Community” label was deemed to be cumbersome and not at all relevant to HEC Montréal.

• Vague titles, such as “Community, Research, Administration and Specialties.”

• Texts that were too long and contained links that hindered readability.

HEC Montréal Redesign: Take 2

The wireframe testing helped us improve the templates before going into the design phase, prevent mistakes that could have had a major impact once the site was online and test certain theories /great ideas we had.

HEC Montréal Redesign: Take 2

HEC Montréal Redesign: Let’s build this site!

With that in hand, we then went into creating a new design + rewriting 90% of all the existing pages + integrating the content into the cms

HEC Montréal Redesign: The before

HEC Montréal Redesign: After

HEC Montréal Redesign: Before

HEC Montréal Redesign: After

HEC Montréal Redesign: opening up our IA to the users

Giving our main users a big role in the development of HEC Montréal’s new Web site enabled us to:

• Test supposedly fantastic theories/ideas without causing too much damage;

• Resist internal pressures with the help of strong arguments;

HEC Montréal Redesign: opening up our IA to the users

Giving our main users a big role in the development of HEC Montréal’s new Web site enabled us to:

• Launch a site that, though not perfect, for the most part meets the information needs of Web users and is easy to use;

• Create an information architecture no longer based on our administrative structure. As a result, someone who isn’t familiar with that structure can find information about tuition fees without knowing that they’re the responsibility of the Admission’s Office.

HEC Montréal Redesign: Thank you!

Thank you + Question Period

[email protected]://www.netvibes.com/martinelafleurhttp://expertise.hec.ca/communications_electroniqueshttp://twitter.com/MartineLafleur

HEC Montréal’s Website Redesign

Technology

Transcript of HEC Montréal’s Website Redesign