Helping customers get the most from their devices
Designing a more scalable support experience
1
Research
I spent four weeks compiling an inventory, meeting with various teams, and examining Apple’s design system after discovering that a specific set of information was inconsistently displayed across the Apple Support pages, articles, and customer tools. I set out to create a more consistent user experience by shipping a standard component for the Apple ecosystem.
To understand the larger context of the project, I compiled an inventory of all instances of inconsistency across Apple's support domain. I gathered component requirements and discerned which parts of the ecosystem could be affected.
Apple Design System
To ensure that the designs would align with Apple’s well-established brand I examined its comprehensive design system, which included design elements, spacing, typefaces, and interactions.
Team Interviews
With the aim to improve workflow efficiency and consistency, I held sessions with various teams that owned the products that would benefit from a versatile yet standardized design component.
Scalable across Apple ecosystem
Ensure that the new designs match up with the Apple brand and scale across the array of pages, resources, and tools.
Flexible for multiple use cases
Accommodate different uses with versatile content blocks, imagery, iconography, and interaction within any single use case.
Clear guidelines for implementation
Provide practical, sharable usage guidelines for layout and styling for the product, design, and engineering teams.
2
Approach
I spent six weeks pinpointing the specific content requirements, mapping out a component architecture that accommodates multiple use cases and variations, and creating high-fidelity mockups with a mobile-first approach.
Requirements
Must-Haves
• Product image
• Nickname
• Model
• Serial Number
• Color and capacity
Supplemental
• Additional details
• Icons
• Links
• Eligibility sub-text
Edge Cases
• No nickname
• Tiles
• Confirmation icons
• Status tag
Component Architecture
I analyzed the wide range of use cases across the Apple ecosystem to determine three different base components, which could cover all scenarios. These components could be added to or subtracted from to adapt.
SM Viewport (iPhone)
MD Viewport (iPad)
LG Viewport (Mac)
Product Imagery
Based on the algorithm that generates Apple’s 6,000+ product images, I learned from iteration that the most suitable treatment for images was to float them centered in a fixed sized container.
3
Execution
I spent three weeks creating a comprehensive guide with details on usage, layout, and styling that I circulated between our teams—spanning product, design, and engineering—for reference and implementation.
Specifications
Annotations
Description
The ‘primary’ component is typically used as a hero at the top of the page. It features a product image, device nickname, e.g. Jane’s iPhone, and device details. Different layouts and elements are required in different scenarios, see guide.
Standards
Image: center-aligned
Nickname: ‘callout’ SM style, center aligned
Product details: ‘Body style’, left-aligned
Used In
Check Coverage
OAS: Eligible Devices
Lightning: Lost Mode
PDP Coverage and Activity
Product Registration
Product Cases
Usage Guide
“My Coverage” was a ten-week project that leveraged the new design pattern. The tool enabled customers to fulfill two primary needs: check the Apple Care coverage and confirm the authenticity of their device.
Best Practices
I looked at how companies, such as Chase and Nerd Wallet, comforted their users by confirming authenticity and displaying unique details of the customer's products.
I also examined how companies, such as Capital One and Amazon Prime, empowered their members by curating and pairing key benefits with calls-to-action.
Learnings
Comfort users with details about their specific product
Assure users of their current status
Curate content that’s relevant to the user
User Flow
We worked through mockups to accommodate the key screens and functionality as outlined by the user flow. By leveraging the new guidelines, we saved time and effort as we shipped the “My Coverage” customer tool.
Device Coverage - Authenticated
We successfully shipped this new addition to Apple’s design system. It continued to be shared and referenced across the teams at Apple Support, enabling them to streamline projects and deliver consistent on-brand experiences to Apple’s customers. It served as a foundational component in Apple’s design system, allowing for adaptations as the teams continued to leverage it in launching their products.
Standardized and referencable pattern
Scalable across ecosystem
Streamlined workflow
I received all-around positive feedback from the different teams at Apple on the usefulness and thoroughness of the new designs. Though, I felt that I could have carried out the project faster. It was only towards the end of the project that it crossed my mind to hold one-off meetings with stakeholders to get quicker final sign-off, rather than waiting for the next review cycle. I continued this practice to expedite future projects.
