Apple Support Site Migration
Design DRI
Mukund Asagodu Sanjeev
Design Team
Creative Director
Art Director
Head of Design (Manager)
Design Producer
Partners and Stakeholders
Leadership
Product Owners
Digital Production
Image Production
Business Affairs (BA)
Business Intelligence (BI)
Localization
Front-End Development (FED)
Information Systems & Technology (IS&T)
Quality Assurance (QA)
Given Brief
Migrate Apple Support Site leveraging the latest Design Systems.
Problem
Apple Support Site was built using a CMS tool that used an outdated design system lacking responsiveness and modern components, resulting in dated user experiences that did not align with Apple's design ethos. Additionally, the existing backend code presented significant challenges in accommodating future enhancements and migrations, making the need for modernization even more pressing.
Additionally discovered problem
The existing system was riddled with inconsistencies without any supporting documentation, leading to confusion and inefficiencies among stakeholders.
Design Goals
Simplify and enhance the components by leveraging latest SassKit, to create a unified, efficient, and aesthetic Apple Support Web experiences.
Challenges
Uncertainties and a lack of clear comprehension among diverse teams regarding the definition and implications of migrating to latest SassKit.
Uncertainties regarding the nature and timing of the future, particularly in light of the impending introduction of a new CMS tool.
Legacy systems and content on the pages had complex dependencies that were not immediately evident.
Change for Digital Production team was complex and repetitive.
Transition in Design Producers and a temporary absence of a Design Producer.
Insights into what happened
Pivotal moments and progressions that unfolded during and after the design journey.
Aligned cross-functionally
Simplified system
Introduced new components
Facilitated seamless education
Streamlined process
Aligned cross-functionally
Collaborating on defining and simplifying the design goals with Creative Director and internal Design team.
Championing the design vision, advocating the merits of SassKit 7 integration and migration to align with design standards.
Empowering the development team through design education on leveraging SassKit for a seamless and impactful transition.
Simplified system
Simplified parent system typography scale to establish ACD specific typography hierarchy and usage.
Defined a new responsive spacing scale and layout rules.
Streamlined the component library, reducing it from 22 to 14 components, while eliminating complexities and customizations.
Minimized variations within each component, achieving further simplification.
Championed accessibility, localization, and responsiveness.
Introduced new components
Introduced on-domain video experience, marking a significant first within the AppleCare Digital organization.
Introduced Tiles to enhance the overall aesthetics, aligning seamlessly with the broader Apple digital experiences.
Facilitated seamless education
Initiated and facilitated workshops, training sessions, and reviews to ensure seamless knowledge transfer and continuous improvement.
Crafted comprehensive guidelines for optimal component and imagery usage, strategic page structuring and thoughtful design consistency.
Streamlined process
Created an open communication channel for design reviews and discussions with stakeholders and partners.
Created Migration Creative review processes.
Collaborated on creating migration processes and progress trackers.
Results
A unified, efficient, and aesthetic Apple Support Web experience.
Established the structural and visual elements by defining and documenting key design foundations such as typography, spacing, and iconography.
Simplified system with 0 customizations.
Introduced new ways to discover and learn content on-domain.
Aligned to the latest Apple Design Standards - ultimately paving a path for easy future migrations.
Created cohesive web experiences that champion simplicity, accessibility, localization, and thoughtful consistency.
Seamlessly integrated Apple Support Web pages into the modern Apple ecosystem.
Received press coverage and gratifying swift, positive feedback directly from our community.
