OVERVIEW

The Microsoft Education site is geared towards educational decision makers, professionals, and students. The EDU site presents various hardware and software solutions through the lens of how it would be helpful in an educational context (K12 – HED).

Navigating and way finding has been a challenge for customers, E.g. Students ending up on IT pages, IT pros not getting to the contact sales easily enough. Microsoft EDU sought to simplify the process for customers in selecting the most suitable products and resources from their extensive lineup. Understanding the complexity of their offerings, they aimed to create an intuitive tool to streamline decision-making and provide personalized recommendations.

MY ROLE

Lead Interaction Designer Wire Framing
Experience Strategy
Design Systems
Annotations

THE TEAM

1 Interaction Designers
1 Product Manager
1 Experience Strategist
2 Visual Designers
15+ Engineers

TIMELINE

Aug 2022 - Oct 2022

PROJECT GOALS

Provide recommendations

Match users with relevant devices, products, resources or support recommendations based on key self-selected criteria (audience type, content type, need/focus).

Easily accessible

The Help Me Choose Finder should be easily accessible throughout the site and be simple and quick to interact with (in-page module as opposed to pop-up or separate page).

Support users

Support users in navigating the site and introducing them to the wealth of products and/or resources it has to offer.

User data

Gather user data that can help inform personalized mechanics across the experience (in a single session or for a returning visitor that has not cleared cookies).

STRATEGY + UX

The "Help Me Choose Finder" was designed as an interactive decision-making guide, employing a user-friendly interface. It included a series of guided questions and filters tailored to different educational settings, allowing users to input their requirements and preferences.

Leveraging machine learning algorithms, the tool generates personalized recommendations based on users' input. It analyzes data patterns and aligns them with the user's educational goals, budget constraints, and technological preferences.

I worked closely with experience strategy to create a decision tree that would highlight each step from beginning to end. The decision tree enabled us to map out all the potential user flows particular to each audience group and allowed us account for all the different steps and sub-steps within each flow.

Step 1: User self-identifies audience

Auditing the Microsoft EDU site gave us insight into what their main audience sectors were. The most common audience members are students and parents, school leaders, educators, IT professionals and higher education. Learning this enabled us to begin constructing the starting point for all flow.

Step 2: User selects type of content or information

Matching certain products and recommendations to specific audience types is the next step. After selecting an audience type, the user is prompted to choose between devices, products, training, or resources. With this information we can filter the different offerings that are best suited for the corresponding audience.

Step 3: User chooses main area of focus

This step differs depending on the audience and their focus. Here the user is able to narrow down what they are looking for by choosing different priorities and selecting options within those priorities. Priorities to choose from are price, device type, brand, screen size, or features.

WIREFRAMES

The wireframe design for the HMCF began with a focus on intuitive user interaction. We evaluated the functionality, information hierarchy, content types, calls to action, suggested next-step prompts and technical feasibility. The layout strategically allocated sections for inputting user preferences, featuring a clear progression from general queries to more specific needs.

I designed four key example flows, one for each distinct audience type. All wireframe screens emphasized simplicity, with well-defined options and intuitive navigation buttons guiding users through the decision-making process. Visual cues and placeholders illustrated how the tool would adapt dynamically as users inputted their criteria, displaying loading animations for real-time recommendation generation. The wireframes ensured a responsive design, accommodating various devices seamlessly. View below for a step by step of each flow.

EXAMPLE FLOW 1: Device (Student, Parent, or Guardian)

EXAMPLE FLOW 2: Product/Software (School Leader)

EXAMPLE FLOW 3: Training/Resources (IT Professional)

EXAMPLE FLOW 4: Support (All Audiences)

EXAMPLE FLOW 5: Training/Resource (Educators)

Exiting Results

VISUAL DESIGN

The HMCF seamlessly integrates with the Microsoft EDU website, featuring prominently on the homepage and within relevant product pages. Since online quizzes have a lot in common with online games because they’re interactive and they provide a sense of achievement when complete. We wanted to illustrate this playful spirit and intrigue the user with a quiz design that feels fun, intuitive and seamless to use.We are championing the spirit of the brand look and feel by infusing the signature shapes, playful color palette, and warm human photography.

KEY TAKEAWAYS

The "Help Me Choose Finder" will significantly improve the user experience by reducing decision fatigue and expediting the product selection process. The tool's success will translate into higher conversion rates and increase adoption of Microsoft EDU products.

The "Help Me Choose Finder" exemplifies the pivotal role of user-centric design in simplifying complex decision-making processes. Its success underscores the importance of personalized recommendations and accessible interfaces in empowering individuals, educators and IT Professionals to make informed technology choices within the Microsoft EDU ecosystem.

Liza Feurtado

Product Work

Personal Work

About

2022 | UX Design, Interaction Design, & Responsive Design

An easy to use tool to support customers towards finding the perfect product and resource recommendations.