🛠️ Behind the Build: Redesigning a Learning Module for Accessibility and Engagement

-

In my last post, I explored the future of online learning platforms and how personalization is reshaping education. Now, I’m pulling back the curtain on how I apply those principles in my own instructional design work—starting with a recent module redesign that reflects everything I value: clarity, accessibility, and learner-centered design.

This wasn’t just a visual refresh. It was a strategic overhaul to ensure the module is recruiter-ready, technically sound, and genuinely supportive of diverse learners.

🎯 Defining the Redesign Goals

Before touching a single line of code or content, I asked myself:

  • Is the navigation intuitive for all users?
  • Are accessibility standards like WCAG being met?
  • Does the layout reflect my updated branding and technical skills?

These questions shaped every decision—from structure to styling.

🧩 Layout & Navigation: Building for Flow

I started by refining the HTML structure to ensure a clean, modular layout:

  • Consistent section headers for easy scanning
  • Keyboard-accessible navigation for inclusive usability
  • Responsive design that adapts across devices and screen sizes

I also updated my README file to visually mirror the site’s structure, reinforcing clarity and cohesion for both users and recruiters.

🖼️ Visual Identity: Making It Personal

To reflect my professional brand:

  • I added a clean, professional headshot that aligns with my visual identity
  • Updated the color palette and typography for readability and polish
  • Ensured all images included alt text for screen reader compatibility

These changes weren’t just aesthetic—they were intentional steps toward inclusive representation.

🧠 Content Strategy: Modular & Learner-Centered

I restructured the content to support autonomy and engagement:

  • Used plain language to ensure clarity
  • Embedded interactive elements where appropriate
  • Provided real-time feedback mechanisms to support self-paced learning

Each section was designed to be digestible, purposeful, and aligned with adult learning principles.

🧪 Accessibility & Debugging: No Detail Too Small

Accessibility wasn’t an afterthought—it was a priority. I ran multiple checks to ensure:

  • Keyboard navigation worked seamlessly
  • Contrast ratios met WCAG standards
  • All links and buttons were functional, descriptive, and easy to locate

I also tested across browsers and devices to ensure consistency and usability.

🔗 Explore the Module Live

Want to see the redesign in action?
Visit my instructional design portfolio here:

👉 cjohns4.github.io/ChanteJohnsonSite

Whether you're a fellow designer, recruiter, or curious learner, I’d love your feedback.

📣 What’s Next?

In upcoming posts, I’ll share:

  • How I tailor modules for healthcare onboarding
  • How I design learning experiences that build confidence and communication
  • Simple ways I test modules to make sure they’re easy to use for everyone

Thanks for following along—I’m excited to keep building, refining, and sharing. Because great design isn’t just about how it looks. It’s about how it works for every learner.

Comments

Post a Comment

Popular posts from this blog

Designing Learning That Fits: How Educators Can Personalize Education for Every Student

-
Image
Personalizing education isn’t just a buzzword—it’s a commitment to seeing each student as an individual with unique strengths, challenges, and interests. While it may sound like a tall order, it’s absolutely achievable with the right mindset and tools. In my own experience as an instructional designer and trainer, these strategies have helped me create more inclusive, engaging learning environments: 💬 Real-Time Feedback Builds Confidence Instant feedback allows students to course-correct quickly and learn at their own pace. Whether it’s a quick comment during a live session or automated feedback in a digital module, timely responses help learners feel supported and capable. 🎨 Mix Up Your Teaching Methods Not every student thrives in a lecture. Incorporating hands-on activities, visual aids, group discussions, and digital tools ensures that diverse learning styles are honored. Variety isn’t just engaging—it’s essential. 🔄 Flexible Grouping Encourages Collaboration Grouping students b...
Read more

📊 Designing for Understanding: Breaking Down Complex Concepts with Clarity

-
Image
Instructional design isn’t just about presenting information—it’s about making it stick. In my latest ECON module, I focused on helping learners grasp two often-confused market structures: monopolistic competition and oligopoly . These topics can feel abstract, but with the right design approach, they become accessible, engaging, and relevant. 🎯 My Design Goals for This Module Before building anything, I asked: How can I make these concepts relatable to everyday experiences? What structure will help learners compare and contrast effectively? How do I support different learning styles without overwhelming? These questions guided every decision—from layout to language. 🧠 Making Economics Feel Approachable Here’s how I brought clarity to a complex topic: Plain language explanations that avoid jargon and focus on real-world examples Side-by-side comparisons to highlight key differences between market types Guiding questions that prompt learners to think critically about c...
Read more