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. During this presentation, we’ll take a behind-the-scenes look at the steps that enabled Web surfers to help create the new site, and we’ll explore the true impact they have had on the final product. Presented at the Canadian Post-Secondary Web Conference, may 26-28 2010 at Brock University

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

2. HEC Montréal Redesign 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!

3. HEC Montréal Redesign 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.

4. HEC Montréal Redesign 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

5. HEC Montréal Redesign 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.

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

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

8. HEC Montréal Redesign: Why a revamp? 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.

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

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

12. 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).

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

14. 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 JosianeDoucet-Alarie | Web integrator IT Suzanne Corriveau | Information systems manager Marc Saint-Louis | Computer analyst (CMS) NaïmSeggad | Applications administrator Guillaume Trottier | Computer analyst (CMS)

15. 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)

16. HEC Montréal Redesign: supporting actors The dreaded committee: the Web site advisorycommittee Met when the projectreached certain milestones. Theirresponsabilitywasclear: the wereadvisory! Louise Champagne: Office of the Registrar Martin Coiteux: Associateprofessor, Kathleen Grant: Manager, Communications and Recruitment Jacques Nantel: Secretarygeneral Jean-François Ouellet: Associateprofessor Jacques Raynauld: Professor Jean Talbot: Director, MBA program Emmanuel Vigne: Director, Information Technology Services

17. HEC Montréal Redesign: Action! Internal interviews’ goal: position HEC Montréal as publishersWe 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.

18. HEC Montréal Redesign: Action! 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.

19. HEC Montréal Redesign: Action! 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.

20. HEC Montréal Redesign: Action! 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

21. HEC Montréal Redesign: Action! Before card sorting

22. HEC Montréal Redesign: Action!

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

24. HEC Montréal Redesign: Special Effects 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.

25. HEC Montréal Redesign: Special Effects 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.

26. HEC Montréal Redesign: Special Effects ... 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.

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

28. HEC Montréal Redesign: Take 2

29. HEC Montréal Redesign: Take 2

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

31. HEC Montréal Redesign: The before

32. HEC Montréal Redesign: After

33. HEC Montréal Redesign: Before

34. HEC Montréal Redesign: After

35. HEC Montréal Redesign: After

36. HEC Montréal Redesign: After

37. 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;

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

39. HEC Montréal Redesign: Thank you! Thank you + Question Period martine.lafleur@hec.ca http://www.netvibes.com/martinelafleur http://expertise.hec.ca/communications_electroniques http://twitter.com/MartineLafleur