Migration Center Mapping Tool
Tool for allowing users to easily transfer data from legacy systems to ArcXP
Tool for allowing users to easily transfer data from legacy systems to ArcXP
Product Designer
Lead Senior Designer, Product Manager, and Engineers
Sep 2022 - Jan 2023
- Interview
- User flow design
- Low-fi and high-fi prototype
- User testing
- Engineer handoff
- MVP product sprint planning
Migration Center helps onboard new users transforming their original content to ArcXP's CMS.
ArcXP(Arc), a division of the Washington Post, is a cloud-based SaaS platform with a large suite of application for end-to-end CMS experience, including content creation, page building, and media management.
New clients need to migrate their contents into ANS language to use Arc products. ANS language is complicated and unique coding language for Arc products.
.png)
Migration content to Arc is currently highly manual and speculative, leading to unpredictability in costs and timelines for our clients and the business.
.png)
How does current user migrate content?
After aligning on goals with PM and engineers, we conducted internal interviews with staffs from customer experience team who have been closely working with target users and help them migrate the content to ANS.
We found some user needs from the pain points...
1. Guidance
Templates for different content types to start with.
2. Flexibility
Flexibility to customize mapping fields.
3. Trial & Error
Preview the result before coding and actual migration.
How might we create a visual mapping tool for users to preview the ANS file before actual migration?
According to the user needs, we created simple sketches that contains the main features.
MVP features prioritization with PM and engineers
Product manager, engineers, and designers discussed what features should be included in the minimal viable product.
User flow
According to the MVP features, we defined the user flow.
.png)
Design Challenge:
How to reduce cognitive load for new users?
1. Color coding indicates mapping progress
Users understand the migration progress thanks to color coding and clear labeling.
2. Mapping fields intuitively
Considering better accessibility and easier learning curve, the mapping field contains status badge and the transformation.
Low-fidelity prototype
According to the ideation and early assumptions, we built low-fidelity prototype for the next stage user testing.
Assumptions to validate:
1. Users can understand how to create and complete the map to transform their original file to ANS format.
2. Users are able to refer to original file section during the mapping.
3. Users are able to add additional fields that are not listed in the template.
Insights from the user testing...
Key Iteration 1: Simplified user flow
In order to eliminate confusion about the terminologies, we simplified our user flow.
Key Iteration 2: Tooltips for technical terminology
Users need to refer to external documentation for the technical terminology. Therefore, embedding the definition in the tooltips can save user's time for searching additional documents.
Template Map
Original file in XML and JSON accepted
Auto-generated mapping template according to content type
Visualized Mapping
Tree-view original file side by side
Flexible mapping original fields and ANS fields
Clear guidance for new user
Progress Tracker
Color-coded progress tracking helper
Accessible status badges
1. Understand the entire agile product-development cycle with design lead, product manager and engineers.
This is the first time that I design a product that does not exist yet. The communication with PM and engineers to understand the feasibility and priority for the MVP was very helpful.
2. Provide solid design with time constraint.
Due to the time limitation, we are not able to conduct many early stage research before we start the design. But we made design decisions first, communicate with stakeholders regularly, and then iterate our design along with the user testings.