Let me help you make a decision

Assisting customers in making informed decisions for their purchases.

‍

My Role in this transformation

• Visual QA and product testing
• Design enhancement
• Stakeholders involvement
• New patterns documentation

‍

Thinking about where to start

Apple, as a brand, embodies the ethos of simplicity and elegance, emphasizing products that are both robust and comprehensive, easy to use yet not oversimplified. In embarking on the Digital Mat exploration, our objective was to provide customers with a visually intuitive overview that goes beyond traditional charts, serving as a dynamic 'product page' widget. The Digital Mat empowers customers to make informed decisions by offering comparative insights before delving into detailed product descriptions on individual pages. Our design parameters prioritized simplicity, efficiency, and utility, ensuring that the Digital Mat experience delivers a seamless and informative decision-making process for customers.

‍

‍

So, What is are the business needs?

Through our kickoff meetings we learned that:

• the Digital Mat was a new view to use along side the product landing pages.
• The descriptions needed to be short but highlight the products key features.
• Compare like products, ex: iPhone 13 Pro and iPhone SE.
• Make it easy to scan for customers with strong images.

This lead me to starting the breakdown of the product timeline so that me and my team could manage the product before the iPhone 13 Pro launch date. Because this was going to be made from scratch we needed to make sure that there were enough components we could use from the product landing page, and featured cards. We also needed to bring Icons that best displays each products key features.

‍

‍

Nevertheless, we carefully considered the feedback and restructured it to align seamlessly with the Apple.com site's aesthetics and user experience. This iteration eschewed the larger image card in favor of a square gallery format, enhancing visual coherence. Additionally, we opted to optimize the placement and order of information such as product names, colors, and pricing to facilitate a smoother flow of information for users.

‍

‍

To facilitate navigation within the digital mat, we implemented a streamlined slider interface, enabling customers to effortlessly browse and select the product they wish to compare. This intuitive design element allows users to click on their desired product to access detailed information and comparisons with ease.

‍

‍

Next, back to being a graphic designer!

One of the enjoyable aspects of working at Apple is the opportunity for product designers to dive into graphic design tasks on occasion. In this instance, our focus was on crafting an icon package to complement the forthcoming device descriptions. To ensure design consistency, we utilized existing icons as a foundation. Each icon underwent meticulous planning and design, spearheaded by myself and a fellow designer who provided invaluable assistance with the more intricate aspects of the project. The icons showcased below represent the culmination of our collaborative efforts and have since been seamlessly integrated into the Digital Mats and other product pages, enhancing the overall product descriptions.

‍

‍

Upon deliberating on the various icon designs, we received images from the content and marketing team to incorporate into the digital mat gallery. A pivotal aspect of this process was arranging these images in an order that effectively showcased the product and provided customers with a comprehensive overview. At the core of Apple's design philosophy lies the understanding that design encompasses not only visual aesthetics but also the timing and manner in which information is presented to customers, influencing their decisions and perceptions. As demonstrated below, our organization of the images prioritized showcasing color options side by side, followed by depictions of the product in hand, and subsequently highlighting key design features such as the camera and side profile. This deliberate sequence aimed to guide customers through a logical progression, aiding in their understanding and evaluation of the product.

‍

‍

Putting it all together!

Following meticulous consideration of various elements and layout designs for the digital mat, it was imperative to consolidate all components into a cohesive whole. Each element underwent careful deliberation, ranging from the customer's perspective of the digital mat to the sequencing of gallery images and the design of special product features icons. Through each deliberate step, we worked towards crafting a final design that remains in use to this day.

‍

‍

‍

‍

‍

Conclusion

In this comprehensive case study, my role spanned visual QA, product testing, design enhancement, stakeholder involvement, and documentation of new patterns. Our initial goal was to create a visually intuitive overview for customers, beyond traditional charts, with the Digital Mat serving as a dynamic 'product page' widget. We aimed for simplicity, efficiency, and utility, ensuring a seamless decision-making process. Understanding business needs, we learned the Digital Mat would accompany product landing pages, requiring concise descriptions, product comparisons, and strong imagery. I spearheaded the breakdown of the product timeline, ensuring adequate components and icon selection for the Digital Mat. Through meticulous feedback consideration, we optimized the layout for user experience, implementing a streamlined slider interface for navigation. Additionally, we crafted an icon package and organized gallery images strategically to enhance product descriptions.

This exhaustive design process yielded exceptional results, reflected in a significant increase in user satisfaction from 24% to 56.7%, translating to a remarkable sales boost of over 13 million units for the iPhone 13. This success underscores the effectiveness of our collaborative efforts in meeting business objectives and elevating customer experience.