Goals
Migrate all Microsoft store pages from current MSFT platform to Adobe Experience Manager
Standardize store page layouts for easy current and legacy updating.
Create a new information architecture for all store pages.
My Role
This project was broken up between myself and one other designer. I was in charge of design for all product description pages (PDPs) and the other designer was in charge of design for all category pages.
Understanding Project Scope
This project was a large undertaking with a lot of moving parts. For one, Adobe Experience Manager (AEM) is a new tool that was previously unused within Microsoft Core Store. I, along with the other designers on the team, taught myself the content & asset management system as we went along in the project, working closely with the PMs and Adobe support team in order to file and fix bugs, pressure test our designs and integrate new components into the pages.The work naturally split where I took on PDPs (around 220 pages) and the other designer took on Category pages (around 60 pages).
Categorizing
My first goal was to take screenshots of every page identified as a PDP needing to be migrated - a list of urls from the PM that I QA'd as I took screenshots. We made adjustments as necessary in order to standardize all nomenclature for the migrating pages.
After grabbing all the screenshots and sorting them into similar-layout groups, I was able to identify the types of templates we would need in order to create all layouts.
One of the hurdles I came up against in the initial phases was trying to get various stakeholders on board with standardizing pages in order to reduce the amount of layouts needed.
Initially I created 1:1 layouts that reflected each page. This allowed me to show the stakeholders the amount of layouts that would need to be created without any standardization. After reviewing the 200+ pages I had 126 layouts.
Three Template Structures
Once I understood the complexity of the pages, I identified three template structures. These structures would be changing in order to accommodate each layout, but they were a good starting point to describe and illustrate my intentions for creating all layouts to leadership to get their buy-in for moving on to the next step. I found that all PDPs could loosely fit into one of the three template structures and having the ability to categorize each layout will help with handing off the layouts to the engineering team.
Layout Design
Once I received the go-ahead from leadership, I worked on finding all commonalities between the pages in order to create drafts of layouts that all grouped pages would fit into. At this point in the process I had gotten the amount of layouts down to 44, with the goal to reduce this count even more.
Final Layouts
After testing pages against the proposed layouts I was able to finalize them and present them to the stakeholders. At this point I had a conversation with stakeholders to address two concerns: 1) meeting the business objectives for standard layouts to ease any future work for updating pages across the layouts, and 2) the importance of standardized layouts to develop recognized patterns throughout Microsoft store.
We ended up with 12 standard layouts that all current and in-development weeb
