Microsoft Store Design Systems: Multi-Step Survey Template for Adoption Success and CMS Authoring Flexibility

Overview

An architect redesign of current survey website to streamline Microsoft Store's technical implementation process for AEM migration

The design streamlined Microsoft Store's technical implementation process when migrating current survey experience to AEM. By breaking down to multiple steps, the survey template empowers content authors to tailor each survey section effortless with efficiency in AEM.

Role

Product design,
Data migration,
UX infrastructure,

Team

A11y SMEs,
Content authors,
UI engineers

Designs

A11y SMEs,
Content authors,
UI engineers

Problem

Enhanced Survey Engagement and  Content Creation Flexibility with Custom Visual Progress Indicator Design Integration for  AEM Migration

After meeting client to clarify the project scope and confirm design requirements, I understood the main business goal was to improve current survey experience, content creation flexibility, and integrate a visual progress indicator when implementing migration content to AEM platform.

Solution

Architecting Multi-Step Survey Template with Visual Progress Indicator for Improving Front-End Application Efficiency and Back-End Data Authorization Flexibility

By integrating modular architecture with Microsoft Store's design system's existing library components, I created reusable survey components to improves front-end efficiency and back-end authorization flexibility efficiency. Survey participants will be asked a stack of questions with dynamic feedback visual progress indicator responed as the flow proceeds.

Challenge

Managing Stakeholder Alignment with Uncertainty in Integrating Existing Library Components for Migration Roadmap Design

Mapping customer journeys and potential design opportunities by using the Jobs-to-be-done (JTBD) framework , I scoped AEM migration roadmap with multiple stakeholders alignments.

External stakeholders

Internal stakeholders

My approach 01

Strategizing Roadmap Scope by Analyzing Survey Architecture, Content Accessibility, and Technical Feasibility

I coordinated meetings with accessibility SMEs and AEM architect for initial WCAG principles and technical feasibility considerations. I also analyzed survey content, data structure, and component inventory to understand current survey experience and website data architecture to facilitate my design roadmap planning and AEM migration strategy.

My Approach 02

Enhancing Survey Data Performance with Modular Architecture to Boost Front-End and Back-End Efficiency

Based on design requirements and analysis takeaways, I scoped modular survey template architecture to improve front-end data performance and back-end integration efficiency to enhance content creation flexibility.

My Approach 03

Strengthening Survey Accessibility and Data Accuracy Through Input Validation and Visual Progress Indicator

To ensure accessibility compliance and data quality, I worked closely with engineering and accessibility SMEs teammates to incorporate input validation to help survey participants provide accurate information at each step with full completion.

Impact

Achieved Design System Adoption Success and Initiated Sandbox Examples for Next-Phase Planning of Large-Scale Design Component Migration

The design currently has been handed off to engineering team for next phase of AEM migration planning with client acceptance. This survey experience also got highlighted on internal documentation catalog website to showcase design scalability and brand awareness of Microsoft Store's design system.

This project is currently under NDA. If you want to communicate with more details or other work projects at Microsoft, please contact me via LinkedIn or chen.tse.hungtw@gmail.com.

View Next Project

Sam's Club Claims App Modernization

HP Virtual IT DaaS

Bullpen App Customer Onboarding

Hatch iOS App Signup