Microsoft Learn
Unlock early developers' potential: post, learn, and connect on Microsoft Learn platform with community challenge.
Clients
Overview
My Role
Product Designer
Researcher
Video Editor
Team
2 Product Designer
1 Researcher
1 Product Manager
Duration
Jan - May 2024 (5 months)
About Our Client
Microsoft Learn is an online platform where people can learn about Microsoft tools and technologies. It offers courses and certifications to help users grow their skills and careers.
Problem Statement
Microsoft Learn needs more than just courses; it lacks a strong community where users can connect, share, and learn together. Engaging young Gen Z users, especially enter level developers is a challenge they face.
Our Goal
We want to transform Microsoft Learn into a vibrant, engaging community platform that fosters a supportive, growth-oriented environment for users, especially early career developers.
Final Solution
Learning Journey On-boarding
Quick registration personalizes learning paths for early career developers, focusing on community-driven skill development and mentorship.
Interactive Post Engagement
Enhances engagement with developer-friendly tools and AI-powered commenting, making posts informative, polished, and visually appealing.
AI-Assisted Content Creation
An AI Writing Assistant helps users overcome writer's block, offering prompts and ensuring posts are professional and error-free.
Daily Check-Ins & Rewards
A reward system encourages consistent learning, offering points and mentorship opportunities for active participation in learning challenges.
Impact
User satisfaction
In a user test with 12 participants, 80% said they would like to use the new feature of learning challenges in the future.
Time on Page
The new feature increased user time to stay by 20 %, from 20 minutes to 28 minutes, compared to the time users spent on the original page
Research
We understand our client's need, how about our target user groups?
Our client wanted us to focus more on developers in the college student community. So how do they perceive the existing popular developer community? and how do they think about the current functions of Microsoft Learn? For this reason we asked three research questions:
Research methodologies we used
What we found?
Lurking is typical among early-career developers
Gamification boosts participation when aligned with user goals
Engagement varies with participants' learning goals and preferences
Developer community interactions are driven by core values & goals
Supportive interactions boost engagement in developer communities
AI is the new trend for learning programming and solving problems
User Group Segments
Based on our research, we've delineated two primary user groups: "Interest Explorers," consisting of students seeking career opportunities and skill enhancement, and "Impact Builders," representing experienced professionals aiming for career progression. While we cater to both groups, our primary focus is on supporting students due to their greater need for guidance and skill development.
Ideation
Sketches & Crazy 8
For our design process, we brainstormed the problem statement to prioritize which issues we could address using affinity diagram. We then used the Crazy 8's exercise to generate ideas for solving our users' pain points.
Concept Testing
We do a primary wireframe design based on the two ideas selected by our Crazy8 poll, focusing on showcasing the flow of features. And we selected 6 users from our respondents to test the functional concepts. They were asked to rate the two different features and select the one they preferred to use.
Decision
We decided to adopt the concept of a "30-day challenge". Users preferred the goal-oriented nature of the challenge and the corresponding rewards offered in the end, as opposed to the exploratory nature of the drift bottle. Second, they felt that this interaction would give them more opportunities to learn and communicate.
What values we can bring to Microsoft Learn and users?
Enhanced Diversity & Inclusion
Learning Challenge promotes Microsoft's values by creating an inclusive environment, attracting a diverse group of developers.
Strengthened Brand & Engagement
Featuring user-generated content from the Learning Challenge boosts the Microsoft Learn brand, driving long-term loyalty and advocacy.
Boosted Feature Adoption
Leveraging Microsoft resources to help early-career developers increases usage and engagement with existing platform features.
Motivation & Mentorship
Gamification and access to expert mentorship keep participants engaged and confident throughout their learning journey.
Inclusive, Community-Driven Learning
Peer sharing and beginner contributions create a supportive and judgment-free learning environment.
Learning & Skill Enhancement
Time-bound sprints on Microsoft technologies improve programming abilities quickly.
Prototype & Testing
Before diving into prototyping, let's define information architecture
After we sorted out the functions, we created user flow, and we added new community sharing on the existing functions of Microsoft Learn. Here's a before and after comparison of the key changes.
Mid fidelity pages
After we had defined the user flow and the specific information architecture and site map, due to time constraints, I started to create a medium fidelity prototype in order to quickly put it into the first round of user testing.
User testing & Iteration
Based on these 4 sessions of usability testing we iterated on the prototypes by prioritizing based on users concerts and these were the results:
Iteration 1
Issue: The introduction page is too cluttered, making it hard for users to focus on key points.
Visual Hierarchy: The page lacks a clear structure, so users can’t tell what’s most important. Everything seems equally important, leading to confusion.
User Experience: Users struggle to find and focus on critical information due to the lack of visual cues.
Iteration 2
Issue: Tool bar not give clear explanation, which can cause confusion if not clearly distinguished.
Lack of Visual Cues: The interface may lack clear visual indicators to differentiate options, making it hard for users to predict changes.
Iteration 3
Issue: Users are confused about how to view prizes after redeeming them.
Visual Indicators: The interface might lack a clear “Redeemed Prizes” section, with complex or hidden navigation making it hard to find redeemed items.
Missing Cues: Without obvious icons, buttons, or links, users are left guessing where to view redeemed prizes, leading to frustration and an unintuitive experience.
Design System
For the design guideline, we primarily used the existing Microsoft Design System, Microsoft Fluent 2 Web. We followed this design system (typography, colors, spacing, grids and components), and created a few additional AI components to address the missing pieces that our features required.
Final Design
Takeaways
🤝Teamwork Fueled Success
Reflecting on this project, I see the profound impact that collaboration and open communication had on our success. By embracing our team's diverse skills and perspectives, we were able to create a UX design that was both innovative and user-centered.
🛡️Strengthen AI regulation and data privacy
More consideration of data use and regulatory issues in research on AI use, and how to circumvent the occurrence of AI abuse in the community and improve the realization of regulatory mechanisms.
