HISTORICA CANADA

THE CANADIAN ENCYCLOPEDIA

MY INPUT

Customer Interviews • Search Strategy • Analytics & Data Tracking • Research • Wireframing & Prototyping • User Experience  • Product Iteration • Mobile Deployment

The relaunch of The Canadian Encyclopedia online demanded complete optimization and improvement of the user experience. Armed with a wealth of archived information, the client needed fresh ideas on how to best leverage advancements in information technology. This modern encyclopedia would smash through the limitations of the original printed publication. I welcomed the challenge, as did the rest of the team.

PLANNING & RESEARCH

I started off with a creative roundtable involving as many stakeholders as possible as I do most others. It is here that we discussed the goals, target audience, and expected outcomes for the project. In preparing for this meeting, I reviewed existing client material, performed an initial competitive landscape analysis and drafted a list of questions to present to the subject experts. The meeting led to more brainstorming, whiteboard sketches, and a better understanding of the scope. The end result was a strict set of critical success factors.

WIREFRAMES & SITEMAPS

After learning as much as I could about each target user’s expectations, I quickly moved on to wireframing out the concept. Typically, I will start with a sitemap but only after initiating some level of user testing through card sorting. Card sorting involves asking test audiences to sort topics and content by category. This simple technique allows us to see just how the audience perceives the content. With this knowledge at hand, sitemaps and wireframes were generated.

SEARCH STRATEGY

The main challenge I was tasked with solving was to find a much more effective way for users to discover what they were looking for while also enticing them to stay with equally exciting and related materials. Historica Canada had an archive of thousands of resources, but the open architecture they had adopted meant that much of the information was being overlooked. They needed a simple solution that linked this content together in the backend. I settled on a smart search strategy placed front and center big and bold with ample white space. Foregoing the standard contextual menu that lists results, I instead had the designers blur the background image and place the results on top. The resulting output seemed much more enticing and welcoming. This bold, innovative search component

  • offered suggestions based on what you typed (increasing efficiency)
  • offered up the latest articles based on keywords (increasing relevance)
  • reminded you of keywords you recently searched for (decreasing repetition)
  • marked the content by data type (article, exhibit, quiz, collection etc.)

However, what works well for most users does not always work well for all. Some people prefer a more passive approach to find information, especially if they don’t know exactly what they are looking for. To meet the needs of this subset of users, I complimented the search bar with some high-level browse categories. Browsing by category is perfect for the user who is in more of a research mode. Think of a first-time visitor who just wants to get more acquainted with a broad topic. These people have many questions on their minds and may not know what keywords to use to get the correct answers. A browse UI sets them off in the right direction.

MOBILE DEPLOYMENT

Unfortunately, the mobile strategy for this project was a phase 2 priority for the client, but we did eventually get there. Ideally, we would have just started with a mobile-first/responsive project approach, but that wasn’t an option in this case. By the time we implemented mobile, the desktop/tablet experience had already been deployed. We focused on a smartphone-specific custom layout that would deliver the best experience for the user.

I will note that while not the most efficient or cost-effective strategy, building out a custom smartphone deployment did have some advantages. We could really get in there and tweak the styles and not worry about everything elegantly collapsing. In fact, it was much more akin to styling a mobile app. Menus and profile panels were built to slide elegantly out from the side, pushing the main screen off to the side and allowing the user to never feel like they had suddenly been taken out of the experience.

EDUCATIONAL INTERACTIVES

After all of the content had correctly been marked up and adhered to a specific set of standards, it was far easier to repurpose it within new interactive activities. We built interactive timelines, quizzes, exhibits, and collections in less time than if the content had not been appropriately structured and organized.