Product and content design

Under construction. Demo available upon request.

  • Product: Web Content management system (Drupal 8)
  • Team structure: Agile with developers and strategists (content design, business, change management)
  • Design: In-house after agencies initial hand-off
  • Scale: Building the new web platform for the University of Ottawa (full-depth)

Design system

Issue: Our team was building a new web platform without having a way to share knowledge about using the product in a scalable and presentable manner.

Thought process: Design systems have been popularized in recent years. It was a great opportunity to showcase the product, by also using it to explain its use.

Implementation: I initiated and consolidated the design system for the platform. Following advice from my UX classes and community, I suggested a name for it and rallied resources to formalize our documentation. I then categorized the information in a self-serve task-oriented content strategy.

Result: The design system was ready to be consulted as we launched the product. The community and trainers now have a centralized and reliable source of information to consult and improve their knowledge about the product.

The home page of the design system.
An example of some of the features available to the community within the design system.

Micro-copy

Issue: Our agile environment assigned different developers to build features. This resulted in inconsistent terminology for the same product.

Thought process: If someone took ownership of the copy, we could have a product that is less confusing for the end-users as well as for future feature improvements. Since the components are modular and referenceable, it made it even more-so important that descriptions were both helping for anticipating and building a convention.

Action: I took the initiative to streamline and write the micro-copy for the platform contributors (editor to admins). I created a document and collaborated with developers to understand the dependencies and current functionalities. I then mapped out over 300 paragraphs fields (each can contain multiple labels, entity references, machine names, helper text, notes). As components were built, I would consult and advise on copy. I also translated these to French since the product is bilingual.

Result: My document became a collaborative tool for keeping track of paragraphs, content types, and modules micro-copy. This contribution standardized our labelling and formalized our tool’s terminology. Well over 3300 excel data cells were considered for over 99 paragraph types (components).

A screenshot of the 300+ paragraph micro-copy document.

A screenshot of the micro-copy document for the new uOttawa Drupal platform.

Heuristics, usability, UI, UXD, QA

Issue: An agency shipped initial designs of the platform, another agency built functionalities, and the remainder of components were designed in-house. This resulted in an alpha product that had never been tested prior to client use.

Thought process: How are we supposed to explain specifications and features if they haven’t entirely been defined and tested.

Action: Using Tognazzini’s First Principles of Interaction Design (Revised & Expanded), I initiated the heuristics of the product before our initial launch.

I introduced the concept of heuristics to my team as we were discovering issues and not cataloguing them in an unorganized way. By involving my team and formalizing the task, we were able to identify many issues. These were sorted by critical, major, and minor, within 19 themes.

The instructions I created to guide the team to grade the severity of issues. This helped the developers know which issue to fix first.

This resulted in a neatly organized 67 page document of identified issues with screenshots and descriptions. The issues were incorporated in our agile process sprints. Since I had identified who found which issues, it made it much easier for the developers in our team to know who to contact for gathering additional information and context when they were working on the fixes. The process of bug-reporting and has since become streamlined and is part of continual improvement.

Information architecture

Tool: Flowmapp

(coming soon)