Ontario Drug Policy Research Network
A website redesign for the Ontario Drug Policy Research Network that improves how users discover and navigate a large library of research publications while establishing a more polished and trustworthy visual identity.
UI & UX
Content Strategy
Client
Ontario Drug Policy Research Network
Timeline
6 months
My Role
UX/UI Designer
Tools
Figma, Wordpress
Our Impact
200+
Publications consolidated into one unified library
60%
Reduction in time-to-find key publications
1 system
Cohesive visual identity across all touchpoints
The Problem
Hundreds of publications, and no reliable way to find them
The Ontario Drug Policy Research Network produces high-impact research and policy resources that shape drug policy decisions in Ontario. Unfortunately, their website told a different story. Hundreds of publications were scattered across disconnected pages with no consistent structure, navigation labels used internal jargon that meant nothing to outside visitors, and a visual identity that had drifted so far from coherent that every page felt like a different site. For policymakers and researchers arriving with a specific question and limited time, the experience was a dead end. The website was actively limiting the reach of work that mattered.
Research publications were distributed across multiple pages with no consistent organizational structure, making it impossible to browse by topic, type, or date.
Weak visual hierarchy made it difficult to scan dense publication lists. Title, author, date, and publication type were given equal visual weight, slowing comprehension considerably.
The existing site had no cohesive visual identity — inconsistent typography, arbitrary colour use, and no shared component patterns made the organization appear less credible than the quality of its research deserved.
Research & discovery
Auditing the problem before designing the solution
Before any decisions were made, I conducted a structured content audit of the existing website by cataloguing every publication, resource, tool, and training module, and reviewing how each was currently structured, labelled, and accessed. Rather than jumping to solutions, this phase was about understanding the true scale and character of the problem. The audit revealed more than 200 publications spread across 14 separate pages, none of them linked, few consistently categorized, and most missing standardized metadata. Users had no reliable way to filter, search, or browse by relevance.
The content wasn't missing — it was all there. The problem was that the site gave users no map to navigate it with.
We discovered that users arrived with a topic in mind, not a specific document. They needed to browse by subject area and filter by recency or publication type. The existing site supported none of this. Those findings became the foundation for the entire information architecture redesign.
Design process
Structure first, surface second
The central challenge of this project wasn't visual — it was architectural. With over 200 publications and multiple content types to organize, the most consequential design decisions happened before moving to the user interface. I established a clear principle from the start: no visual design decisions would be made until the information architecture was validated with real users.
1
Content audit & taxonomy development
Catalogued all 200+ publications and resources on the existing site, developing a consistent tagging taxonomy covering topic area, publication type, and year. This taxonomy became the backbone of the new library's filter and search experience, and was designed to scale as ODPRN continues publishing new research. The audit also surfaced significant content duplication — several reports appeared on three or four separate pages — which informed decisions about content ownership and structure going forward.
2
Card sorting & information architecture
Completed multiple card-sorting sessions to validate how users naturally grouped and labelled ODPRN's content. Results challenged several assumptions about how the organization had structured its own material. The restructured site map reduced top-level navigation from nine categories to five and introduced a unified publication library as the site's primary content destination.
3
Wireframing & low-fidelity prototyping
Produced wireframes for all key page templates with a focus on content density, scannable list layouts, and progressive disclosure. Early prototypes were tested to validate the new navigation structure before any visual design was applied. Navigation findability improved significantly between the first prototype and the tested version, confirming the IA decisions before moving forward.
4
Visual identity & design system
Developed a refined visual identity grounded in authority and clarity. We created a restrained colour palette, strong typographic hierarchy, and disciplined use of space. We also built a Figma component library covering publication cards, filter interfaces, navigation patterns, topic tags, and editorial templates. Every component was designed with a clear information hierarchy: the most decision-relevant details (title, topic tag, date, publication type) surfaced at a glance, reducing the cognitive load of browsing long lists.
Design process
A visual identity that earns trust
For an organization whose credibility is its currency, the visual identity needed to communicate authority and openness simultaneously. The existing site did none of these things. The redesigned identity uses a restrained palette anchored in deep navy and gold tones, paired with a strong typographic hierarchy that privileges readability over expression.
Publication cards were designed to surface the most decision-relevant information at a glance, reducing the cognitive load of browsing long lists. Every colour and type decision was made in service of the content.
Colour system
We utilized a restrained palette of navy, slate, and gold to keep the design professional without being cold. Accent colours used exclusively for wayfinding and content categorization, never decoration.
Typography
A structured type scale differentiating report titles, abstracts, metadata, and body copy, enabling users to scan publication lists efficiently without reading every word.
Component library
Consistent card templates for reports, briefs, tools, and data tables — structured around topic tag, title, date, and download CTA, standardized across all 200+ content items.
Accessibility
All interactive elements meet WCAG 2.1 AA contrast ratios. Keyboard navigability and screen-reader compatibility implemented throughout, with particular attention to the filter interface and publication list components.
Outcomes
Research that's easier to find is research that gets usede
The redesign transformed ODPRN's digital presence to a helpful knowledge resource, one that reflects the depth and quality of the organization's work, and gives every visitor a reliable path to the evidence they came for.
A unified publication library
200+ publications consolidated into a single, filterable, topic-driven library which is browsable by subject area, publication type, and year for the first time in the organization's history.
Intuitive information architecture
Navigation was reduced from nine categories to five, built around user mental models validated through card sorting instead of internal organizational structure. Every key destination is reachable within two clicks.
Authority through visual design
A cohesive, professional visual identity that positions ODPRN as a credible, trustworthy source of drug policy evidence. There is now consistent across every page, every component, and every content type.
A system built to scale
A Figma component library and structured CMS taxonomy that grows with ODPRN's publishing output. New reports, tools, and training resources can be added without design intervention, maintaining consistency as the library expands.
Reflection
What this project taught me about designing for information-dense systems
This was a project where the temptation to jump to visual solutions was strong — the existing site looked dated, and it was easy to imagine how much better it could look. But the audit made clear that the visual problems were symptoms of a deeper structural failure. Doing the architectural work first, even when it felt slow, made everything that followed more grounded and more defensible.
Information architecture is the design
On a content-heavy site like this one, how information is organized is a more consequential design decision than how it looks. The card sorting sessions consistently surfaced mental models that differed from ODPRN's internal assumptions — and following that evidence, rather than deferring to what the organization was used to, produced a structure that actually served users.
Taxonomy work is invisible but essential
Developing the tagging taxonomy for 200+ publications was unglamorous work — but it was what made the filter and search experience possible. Without consistent metadata applied across every item, the new library would have been as hard to navigate as the old one. Good UX sometimes lives entirely behind the scenes.
Credibility is a design problem
One of the clearest findings from user research was that the existing site made users question whether ODPRN's research was current and well-maintained — not because the research wasn't excellent, but because the design signalled neglect. Visual identity isn't just aesthetics; for a policy research organization, it's a direct expression of institutional trust.