Microsoft Social Emotional Learning Case Study

Overview

Click to go to the SEL Page portfolio

SEL Hero

As a Web Producer and UX Designer at Microsoft Education, I led the redesign of the Social Emotional Learning (SEL) page, a project that exemplified my expertise in UX/UI design, stakeholder collaboration, and accessibility compliance. The goal was to improve usability, enhance the user journey, and ensure the page met the highest standards of accessibility, ultimately driving user satisfaction and engagement.

The Challenge

The existing SEL page suffered from outdated design, poor usability, and limited accessibility, which hindered user engagement and failed to meet Microsoft’s brand standards. Key challenges included:

  • Low user satisfaction: The page had a high bounce rate and low engagement metrics.

  • Accessibility gaps: The page was not fully compliant with WCAG standards, excluding potential users with disabilities.

  • Ineffective user journey: The content structure and navigation were confusing, making it difficult for users to find relevant information.

The Process

Research & Discovery

  • Conducted user research to identify pain points and gather feedback on the existing page.
  • Analyzed analytics data to understand user behavior and identify areas for improvement.
  • Collaborated with stakeholders to define project goals, including improving usability, accessibility, and visual appeal.

Wireframing & Prototyping

  • Created wireframes and interactive prototypes in Adobe XD to visualize the new design.
  • Focused on simplifying the user journey by reorganizing content and improving navigation.
  • Incorporated stakeholder feedback to refine the design and ensure alignment with Microsoft’s brand guidelines.

Visual Design & Custom Graphics

  • Developed custom graphics and visual elements to enhance the page’s aesthetic appeal and align with the SEL theme.
  • Ensured consistency with Microsoft’s design system while adding a unique touch to the SEL page.

Accessibility Compliance

  • Conducted accessibility audits to identify and address WCAG compliance gaps.
  • Implemented accessible design practices, such as color contrast adjustments, keyboard navigation, and ARIA labels.
  • Tested the page with screen readers and other assistive technologies to ensure inclusivity for all users.

Collaboration & Implementation

  • Worked closely with a project manager to refine the copy and ensure the content aligned with the new design.
  • Coordinated with developers to implement the design using the Forrit CMS, ensuring a seamless transition from prototype to live page.

The Results

The SEL page redesign project showcased my ability to combine UX/UI design expertise with strategic thinking and technical skills to deliver impactful results. By focusing on user needs, accessibility, and collaboration, I successfully transformed the page into a user-friendly, inclusive, and visually engaging resource that aligned with Microsoft Education’s mission. This project not only improved key metrics but also demonstrated my commitment to creating meaningful and accessible digital experiences.