CRAiEDL
CRAiEDL examines the complex ethical and social issues raised by existing and emerging robotics and AI technologies and applications, to help inform the responsible development and deployment of robotics and AI technologies, applications and policy.
Service
UX Research, UX Design, Website Design
Sector
Technology
Year
2024
CRAiEDL develops concepts, frameworks, and tools to support the responsible design, development and deployment of robotics and AI. These capacity building materials can be used by students, start-ups, private sector companies and policymakers to support the development and application of best-practices for robotics and AI in Canada and around the world.
TOOLS
Webflow, Figma, Adobe Suite, Canva
The Challenge
CRAiEDL (Canadian Robotics and Artificial Intelligence Ethical Design Lab) needed to replace their outdated WordPress site plagued by:
4+ second load times causing 62% bounce rate
Overly complex CMS requiring developer intervention for simple updates
Visual inconsistency across 120+ research pages
Zero mobile optimization (15% of total traffic)
Clunky navigation hiding critical research content
The Solution
A complete Webflow rebuild focused on :
Content First UX
Research Accessibility
Responsiveness and Ease of Use
Key Pages & Design Strategy
1. Homepage: The Research Gateway
Strategic Approach
Hero with layered messaging: "Canadian Robotics and Artificial Intelligence Ethical Design Lab" + value proposition
3-click access to core research areas via animated cards
Dynamic stats counter establishing credibility
Sticky navigation with persistent search
2. About Us: Humanizing Research
UX Innovations
Team matrix layout: Filterable by research specialty (AI, Ethical Design Tools
, etc.)
Interactive timeline: Institutional milestones with publishable events
Partner ecosystem visualization: Collaborative network diagram
CMS Advantage
"Updating team profiles now takes 3 minutes instead of 3 days"
– CRAiEDL Research Lab Coordinator
3. Research News
Content Architecture
Smart filtering: Tags = [Publication Type] + [Research Area] + [Year]
Featured/Ongoing/Archived triage system
Dynamic related content engine
Before/After CMS
WordPress (Old) | Webflow (New) |
|---|---|
7 step publishing flow | 2 step publishing |
Custom code for categories | select categories / drag and drop categories |
Manually link posts | Automatic post, category linking |
4. Research Detail Pages
Template System
Standardized modules: Hypothesis > Methodology > Findings > Applications
Interactive elements: Expandable datasets, 3D model viewers
Persistent CTA: "Request Full Paper" + "Contact Researcher"
Mobile Optimization
Responsive content reflow for complex data presentations
UI design
Simplified Publishing Flow
Key Improvements
WYSIWYG editing: Real-time previews eliminate guesswork
Centralized asset library: Reusable components across 120+ pages
Role-based permissions: Researchers update own profiles without training
Auto-optimization: Compresses images/videos during upload
Visual Language & Branding
Colors
Color | Application | Symbolism |
|---|---|---|
Red | Headers, Accents | Authority, Urgency |
White | Backgrounds | Clarity |
Dark Gray | Text | Stability |
Blue | Interactive Elements | Trust, Technology |
Typography: Uses bold, condensed sans-serif headings paired with highly legible body text. Technical content employs monospace fonts to maintain academic credibility
Accessibility: High-contrast ratios and responsive layouts fulfill public-sector inclusivity requirements
Measurable Outcomes
Performance Metrics
⚡ Load time: 4.2s → 0.8s (79% reduction)
📱 Mobile traffic: 15% → 34% of total visits
🔍 Bounce rate: 62% → 28%
User Feedback
User Feedback
"I can actually find Dr. Millar's Robotics work now - and the organization methods of the research help me understand it faster."
– Student of Dr. Millar's Class
Team Impact
Content updates reduced from avg. 2 hours to 15 minutes
Zero developer tickets for content edits
100% researcher adoption within 2 weeks
MORE PROJECTS
