Canvas UX/UI Overhaul

As the Instructional Designer, I led a comprehensive interface overhaul and visual design restructure of the Canvas Learning Management System (LMS) for Eleven Fifty Academy. The project spanned across 239 individual courses across multiple sub-accounts, including Software Development, Web Development, and Cybersecurity. The core mission was to deprecate cluttered, non-standardized legacy environments and replace them with a unified, high-converting, and highly functional bilingual-compatible design system built directly into Canvas using optimized HTML and CSS styles.

Client

Eleven Fifty Academy (Tech Bootcamp)

Role

Instructional Designer

Tools

Canvas LMS, Figma, Accessibility Checkers, Canva, Adobe Creative Suite, Miro, HTML/CSS

Languages

English

The Challenge

Before the intervention, the student onboarding and daily learning environment suffered from severe visual fragmentation and cognitive overload.

Lack of Visual Standard: Course landing pages lacked consistent branding, relying on disparate stock imagery, poor typographic hierarchy, and flat layouts that failed to engage tech-sector students.
Navigational Inefficiencies: The native Canvas modules structure was un-indented and monolithic, blending vital assessments with general reading materials without clear visual differentiation.
Accessibility Failures: Severe color contrast issues (such as bright red text on white backgrounds) and missing alternative (alt) text metadata created compliance risks and excluded diverse learners.
Administrative Complexity: Managing 233 manually created courses and 6 demo environments across disconnected sub-accounts made pushing global curriculum updates sluggish and error-prone.

The Solution

I engineered an elegant, system-wide UX/UI framework centered on user functionality and absolute visual clarity.

A. Unified Master Architecture (Blueprint & Sub-accounts)

I systematically audited and cleaned up the Canvas account structure, organizing courses into precise sub-accounts (Career Services, Cybersecurity, Coding, and Student Success). I collaborated with instructors to develop automated Master Blueprint Courses, allowing layout variations to scale seamlessly across full-time and part-time tracks.

B. Visual Component & Landing Page Redesign

Dynamic Course Cards: Designed custom graphic headers for each badge level (White, Blue, Gold, Red) utilizing tech-centric imagery and a strict naming convention ([Badge]-[ID] [Date] [Track] [Format]) for immediate dashboard recognition.

Responsive Homepages: Created a bold, iconography-driven homepage layout featuring clean, high-contrast action buttons ("Classroom," "Calendar," "Learning Gym," "Help Queue") equipped with subtle hover states to streamline daily student workflows.

C. Structured Module Hierarchy

I injected custom CSS styles and strict indentation logical maps into the course modules:

Indented Text: Reserved exclusively for consumption-based reading materials and resources.
Non-Indented Capitalized Markers: Coupled with a custom Unicode arrow to clearly highlight actionable items requiring student submissions, such as quizzes and lab downloads.

D. Absolute Accessibility Compliance

I processed every page through the Canvas Accessibility Checker, swapping out illegal hex codes (e.g., changing bright red #fc0808 to accessible deep rust red #993300), establishing approved palettes for dark/light themes, and baking descriptive alt text into the raw HTML code.

Before

After