Microsoft Store Design Systems AEM Survey Template

Overview

A total design migration of current survey website to streamline technical process when moving Microsoft Store's experience to Adobe Experience Manager (AEM)

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

Accessibility SMEs,
Content authors,
UI engineers

Designs

Survey template,
Technical handoff,
Design guidance

Problem

Improved survey experience and content creation flexibility while integrating a visual progress indicator 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

Architected modular survey template with visual progress indicator to improve front-end application efficiency and back-end 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

Managed stakeholder alignment with the AEM migration roadmap and uncertainties of integrating design with existing component libraries.

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

External stakeholders

Internal stakeholders

My approach 01

Strategized design roadmap by analyzing survey experience, data architecture, 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

Enhanced front-end survey data performance by integrating modular architecture to accelerate back-end efficiency

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

My approach 03

Reinforced survey accessibility by implementing input validation to increase data accuracy

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

Significantly increased design adoption by for a large-scale migration of design components

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

HP Virtual Devices IT Services Support SaaS Web App

Bullpen CRE Freelance Financial Analysts Signup

Hatch iOS App Onboarding