Microsoft Logo Microsoft

Personalize AI-Generated Plans

This portfolio showcases my personal work and design projects. While some of the content may reference my professional experience at Microsoft, all views, opinions, and designs presented here are my own and do not reflect the official policy or position of Microsoft. Any data or information displayed is either publicly available or has been anonymized to protect confidentiality. This portfolio is intended solely for the purpose of demonstrating my skills and experience in UX design.

The "Personalize AI-Generated Plans" project aims to leverage AI to create personalized learning paths based on user preferences and goals. This initiative ensures users gain relevant skills efficiently through a unique, structured, and supportive learning journey with milestones and progress tracking.

My role:

As the design lead for AI-Generated Plans, I led the design efforts and collaborated closely with other designers through design critiques and feedback sessions. The collaborative design critiques and feedback sessions with other designers helped refine the design, resulting in a polished and effective solution.

image shows the AI Generated welcome page

Goals

The primary goal of the "AI Generated Plans" project is to harness the power of artificial intelligence to create highly personalized learning paths tailored to individual user preferences and goals. This initiative aims to revolutionize the way users engage with learning content by providing a customized and efficient learning experience.

This project represents a significant step forward in the field of personalized learning, combining cutting-edge AI technology with user-centric design principles to create a truly innovative and impactful learning solution.

By leveraging AI, the project seeks to:

  • Enhance Learning Efficiency: Ensure that users gain relevant skills in the most efficient manner possible by creating learning paths that are specifically designed to meet their unique needs and objectives.
  • Improve User Engagement: Increase user engagement and motivation by offering a structured and supportive learning journey that includes clear milestones and progress tracking.
  • Provide Flexibility and Customization: Allow users to adjust their learning plans to better fit their schedules and learning styles, ensuring a more personalized and adaptable learning experience.

Research and Insights

Before the design phase, extensive research was conducted to understand the potential of AI in the learning landscape.

Form Advisor & AI Chat Tutor Hybrid Study: The current study aimed to collect feedback on how AI-driven features and experiences can be tailored to support learning and career advancement. Users were asked to provide feedback on their expectations around engaging with AI enabled experiences and expected workflows when creating a personalized learning plan.

Key Findings

  1. Users desire an AI chat experience that is conversational, persistent, proactive, and engaging throughout their learning journey.
  2. Providing a holistic trial experience is crucial for user adoption and platform commitment, allowing users to explore features before committing their time, money, or data.
  3. Users prefer a personalized learning experience tailored to their specific needs and goals, rather than one based on aggregated customer data.
  4. Accurate and relevant personalized learning plans are essential for professional development, instilling trust and carrying value.


User Personas and Journey Maps

Admin

Alex Johnson

Junior Software Developer

Bay Area, San Francisco, CA

Name
Alex Johnson

Age
25

Background
Recently graduated with a degree in Computer Science. Currently working at a tech startup.
Goals
  • Enhance coding skills in specific programming languages.
  • Gain certifications to advance career prospects.
  • Learn about new technologies and industry trends.
Pain Points
  • Limited time to dedicate to learning due to work commitments.
  • Overwhelmed by the vast amount of available learning resources.
  • Difficulty in finding relevant and high-quality content.
Screenshot of how the desktop experience requires to enter the installation code
Journey map

Gamification features:

  1. Motivation and Reward: Gamification introduces rewards such as badges, points, and leaderboards.
  2. Progress Tracking: Visual indicators of progress, such as progress bars and achievement levels, help users see their advancement.
  3. Competition and Collaboration: Leaderboards and social features foster a sense of competition and collaboration among users.
  4. Immediate Feedback: Gamification elements often provide instant feedback on performance. This immediate response helps users understand their strengths and areas for improvement, making the learning process more responsive and adaptive.
  5. Goal Setting: Gamification allows users to set and achieve specific goals. Breaking down learning objectives into smaller, manageable tasks with clear goals can make the learning process less overwhelming and more achievable.
  6. Engagement through Challenges: Incorporating challenges and quests can make learning more exciting.
  7. Personalization:Gamification can be tailored to individual preferences and learning styles.

Key features

Explain how users can modify AI-generated plans to better fit their needs, including adjusting timelines, milestones, and learning outcomes. Highlight the engagement and nurture capabilities introduced to help drive the completion of plans

  • Intuitive User Interface: The design of the AI-generated plans focuses on simplicity and ease of use. The interface is clean and intuitive, allowing users to navigate through their learning paths effortlessly.
  • Responsive Design: The plans are designed to be responsive, ensuring a seamless experience across different devices, whether users are accessing them on a desktop, tablet, or mobile phone.
  • Visual Hierarchy: The design employs a clear visual hierarchy to guide users through their learning journey. Important information and actions are prominently displayed, making it easy for users to understand their next steps.
  • Customization Options: The design includes various customization options, allowing users to personalize their learning plans. Users can adjust timelines, set milestones, and choose preferred learning formats, ensuring the plans meet their individual needs.
  • Engaging Visuals: The use of engaging visuals, such as icons, progress bars, and badges, enhances the overall user experience. These elements not only make the interface more appealing but also provide visual cues that help users track their progress and stay motivated.
  • Accessibility: The design prioritizes accessibility, ensuring that the learning plans are usable by people with diverse abilities. Features such as keyboard navigation, screen reader compatibility, and adjustable text sizes are incorporated to make the plans inclusive.
  • Feedback Mechanism: The design includes an easy-to-use feedback mechanism, allowing users to provide input on their experience. This feedback is crucial for continuous improvement and ensures that the plans evolve based on user needs.

Design Artifacts

Wireframing

The wireframing process was minimal because I worked with a pre-existing design library, which allowed for a more streamlined and efficient design process.

Image shows an example plan generated by AI

Mockups

I also used Figma to create high-fidelity mockups. This was essential for visualizing the final design and ensuring alignment with stakeholders. Figma's collaborative features made it easy to gather feedback and make adjustments in real-time, facilitating effective communication with Engineering, content designers, and other designers. Additionally, I included entry points for the Plans, mobile version, and Dark mode to ensure that Engineering had everything they needed for implementation.

Image shows an example plan generated by AI

Prototyping

Initially, I used Axure RP for creating prototypes due to its robust features for detailed interactions and dynamic content. However, as the project progressed and the need for more collaborative work arose, I switched to Figma. Figma's real-time collaboration capabilities allowed for seamless teamwork and faster iterations.


Testing

I collaborated with the UX Research team to create the mobile prototype. We used NFC tags containing the prototype link at Ignite 2024. This innovative approach allowed participants to quickly and effortlessly access the prototype by tapping their mobile devices against the NFC tags, avoiding the hassle of manually typing URLs and eliminating the need for moderation. Additionally, we tested the Desktop version in a controlled study to gather comprehensive feedback and ensure a seamless user experience across different platforms.

Feedback

The feedback from the user testing was overwhelmingly positive.

Participants appreciated the personalized and adjustable AI-Generated Plans, highlighting the ease of use and clear visual differentiators. The innovative use of NFC tags at Ignite 2024 for mobile prototype testing was particularly well-received, making access seamless and hassle-free.

The desktop version also garnered praise for its intuitive interface and smooth performance. Users found the AI-generated text to be highly relevant and appreciated the ability to save, discard, and share plans. Overall, the feedback emphasized the enhanced user experience, effective collaboration, and the significant improvements made based on user input.

Participant

Verified Graduate

"I was really impressed with how personalized the AI-Generated Plans were. The ability to adjust and customize the plans to fit my specific needs made the learning experience much more engaging and effective. The visual differentiators for different content types were a nice touch and made it easy to navigate through the plans"

Participant

The interface was intuitive, and the performance was smooth.

Participant

Verified Graduate

The plans themselves were well-structured and provided clear milestones and learning outcomes. I felt more motivated to complete the plans because they were tailored to my goals.

Patrick Abrams

Verified Graduate

The AI-generated text, such as titles and descriptions, was spot on. It felt like the plans were created just for me. The ability to save, discard, and share plans was very convenient. Overall, the user experience was top-notch, and I can see myself using these plans regularly for my learning and development.


Success Metrics

  • User Engagement: Achieved a 30% increase in user engagement with the AI-Generated Plans.
  • Plan Abandonment Rates: Reduced plan abandonment rates by 25%.
  • User Satisfaction: Improved user satisfaction scores by 40%.
  • Accessibility: Ensured compliance with accessibility guidelines, making the plans usable for all users, including those with disabilities.

Challenges

  • Balancing Personalization and Complexity: One of the main challenges was balancing the level of personalization with the complexity of the AI-Generated Plans. Ensuring that the plans were highly personalized without overwhelming the users required careful design and iteration.
  • Collaboration Across Teams: Coordinating with cross-functional teams, including development, content creation, and user research, posed a challenge. Effective communication and collaboration were essential to ensure that all team members were aligned and working towards the same goals.
  • Ensuring Accessibility: Making the AI-Generated Plans accessible to all users, including those with disabilities, was a priority. This involved following strict accessibility guidelines and conducting thorough testing to ensure compliance.
  • Performance Optimization: Optimizing the performance of the plans to ensure fast load times and smooth interactions was challenging. This required continuous testing and refinement to achieve the desired performance levels.
  • User Feedback Integration: Integrating user feedback into the design process was crucial but challenging. It required careful analysis of feedback, prioritizing changes, and iterating on the design to address user needs effectively.
  • Innovative Testing Methods: Implementing innovative testing methods, such as using NFC tags for mobile prototype testing, required careful planning and execution. Ensuring that these methods were effective and provided valuable insights was a key challenge.
  • Restricted Design System: The design system was very restricted to new controls, which posed a challenge in creating innovative and user-friendly designs. Overcoming these restrictions required creative problem-solving and close collaboration with the design system team to find feasible solutions.

Conclusion

In conclusion, the human-centered design process for the AI-Generated Plans was a comprehensive and collaborative effort that focused on understanding user needs, ideating innovative solutions, and rigorously testing prototypes.

By leveraging tools like Axure RP and Figma, and employing innovative testing methods such as NFC tags for mobile prototypes and controlled studies for desktop versions, we were able to create a highly personalized and user-friendly experience.

The positive feedback from user testing, along with impressive success metrics such as a 30% increase in user engagement, a 25% reduction in plan abandonment rates, and a 40% improvement in user satisfaction scores, underscores the effectiveness of our approach.

Next steps

Additionally, we will continue to gather user feedback and iterate on the design to ensure the AI-generated plans remain user-friendly and effective.

Our goal is to create a seamless and intuitive experience that empowers users to achieve their learning objectives efficiently.