Apple
Rethinking the Shopping Experience for iPhone
Overview
Apple retail stores changed the game for how we physically browse and buy products. Shoppers are invited to play and explore. And retail associates are there to educate and support throughout the entire journey.
Our task was to elevate the online buying experience for iPhone to bring the same delight and helpfulness that customers have come to know and love about Apple.
role
Senior UX Designer
location
Remote
duration
May 2021 – June 2022
company
Apple
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Apple.
THE PROBLEM
iPhone customers struggle to find the information needed to purchase confidently
Based on extensive internal research, we learned that customers with a high intent visit apple.com to browse and research, but often decide to purchase their next iPhone elsewhere. At a high-level, they needed key shopping tools, and focused shopping information to purchase confidently.
Highlighted pain points:
Customers can’t tell which iPhone is best for them.
Customers don’t understand our tech speak.
Customers don’t view Apple as an affordable place to shop.
Customers aren’t clear on shipping and delivery details.
For confidentiality reasons, I've intentionally omitted the actual values of the metrics mentioned above.
THE challenge
Make it easier for everyone to buy an iPhone
Our goal for this project was to design a product detail page that flexes to support all customer mindsets and addresses their individual shopping needs.
Our high level priorities for the redesign were to:
01.
Make shipping and delivery details more prominent.
02.
Provide persistent on-demand shopping support.
03.
Showcase and clearly explain price and affordability options.
04.
Communicate why Apple Retail.
05.
Consider the end-to-end customer journey.
Defining success
Sell more iPhones
online at Apple
online at Apple
Increase customer
confidence
confidence
My role
I was part of the “availability” tiger team. We were hyper-focused on providing dynamic, easily accessible availability and fulfillment information to help support customers in their shopping journey.
I lead the experience design and strategy work. My core responsibilities were to:
Develop strategic UX flows.
Outline/annotate component logic.
Wireframe end-to-end user flows for proposals to our cross-functional partners, and
Provide oversight to the design team throughout the development phase to deliver the best possible shopping experience for customers.
For clarity, I also provided UX support on other areas of the iPhone PDP redesign, however; my biggest contribution was on the availability and fulfillment work. So, that’s what I’ll focus on for the rest of this case study.
The discovery
Picking up the pieces
At the project's outset, we revisited the latest insights from Apple’s internal research studies. Our objectives were to understand the key opportunity areas for availability and fulfillment and uncover the role they played for shoppers in the iPhone buy-flow.
iPhone 13 product detail page — before the redesign.
Customer insights
We collaborated closely with Apple’s research team to gather relevant data from their studies. Here are the key insights we leveraged to influence our strategic approach for availability and fulfillment:
Customers find getting their order a challenge due to the lack of shipping and delivery clarity.
A large percentage of customers said access to real-time product availability would influence their shopping choices.
We saw an increase in NPS for “Clarity of when your order will be delivered” for in-stock products.
We noticed a conversion lift for products that are available sooner than products with longer lead quotes.
The vision
Expand the scope of
availability and fulfillment
01.
Bring product availability and fulfillment details to more relevant places.
Showcase product availability and fulfillment information as early and frequently as possible to meet customers where they are in their shopping journey.
02.
Offer relief in moments of tension.
Provide customers with alternative product recommendations in constrained moments. (i.e., when their selected iPhone is out of stock or has a long lead quote.)
03.
Communicate why Apple Retail.
Create a dedicated space to highlight Apple’s competitive fulfilment options.
The Process
UX Strategy
My earliest design challenge was thinking through how availability and fulfillment information manifested itself in more relevant places throughout the product detail page. Below are some early sketches I created to showcase the UX strategy of how we could expand the scope of availability and fulfillment information in the iPhone buy-flow.
Sticky bar. A reflection of price and fulfillment details as a customer configures their device.
Summary box. A detailed breakdown of the customer’s selections and fulfillment info.
After getting alignment from the team, my next step was to explore each component in more detail. Unfortunately, due to limited engineering resources, we had to keep the existing summary box design as is to ensure we were able to meet the project’s deadline.
Sticky bar
Rather than jumping straight into the design, I took a moment to outline the various states that the sticky bar needed to account for.
In preparation for our team workshop, I took the next few days to dive deeply into the sticky bar, exploring how the content flexes at each step for desktop and mobile. The approach here was to provide relevant information at a glance, allowing customers to view more fulfillment options and edit their delivery or pickup location.
Early sticky bar explorations
Cold state
Lukewarm state
Warm state
Constrained state
Completed state
Overall, the workshop went well. My initial direction was on the right track. However, that’s not to say I didn’t get any feedback. We’ll cover a few of the key challenges for the sticky bar in a bit.
Wait, stop: scope change 😔
Towards the end of our workshop, we got the unfortunate news that we needed to simplify the scope of the sticky bar for launch. Due to limited engineering resources, we couldn’t show product-specific availability in the cold and lukewarm states, as shown above.
Pivot: Luckily, most of the work was still on the table. Based on the latest scope change, I revised my initial outline and got back to work.
Key challenge #1
How might we highlight more fulfillment options?
A critical element of the sticky bar was communicating Apple’s competitive fulfillment options at a glance. The trickiest part of this challenge was finding creative ways to balance the content in such a tight space.
Early explorations
Option 1: Contextual sub-text
Option 1.1: Contextual links
Option 2: Exposing multiple delivery options
Key challenge #2
How might we provide relief in moments of tension?
Providing relief in moments of tension meant we needed to elevate Apple’s Shop by Availability tool. In the SbA tool, customers could explore similar iPhone options available sooner.
The stickiest part of this challenge was determining the right level of prominence for the SbA tool and finding a way to integrate it into the sticky bar.
Early explorations
Option 1
Option 2
Key challenge #3
How might we communicate updates to the customer?
Referring to the data gathered earlier in the project, we knew that keeping customers informed of availability and fulfillment updates influenced their shopping choices.
The thorniest part of this challenge was exploring ways to communicate changes without the sticky bar becoming too much of a distraction for the customer.
I took inspiration from sports to help influence my approach to this challenge. I paid close attention to how they kept you informed of the score without distracting you too much from the game itself.
Early explorations
Key challenge #4
How might we optimize the sticky bar on mobile?
More than half of iPhone customers shop from their mobile devices. With this in mind, mobile shouldn't feel like an afterthought, so I designed both desktop and mobile in tandem.
The biggest part of this challenge was finding the best way to display availability information on smaller screens without the sticky bar becoming too intrusive to the buying experience.
Early explorations
The Solution
A dynamic, easily accessible sticky bar with availability and fulfillment information to aid customers throughout their shopping journey.
After frequent jam sessions and iterations with the creative team, stakeholders, and the producer, the final wireframe was ready.
Desktop
Mobile
The UX handoff
Bringing it home
I created 3 sets of UX documentation with annotations to communicate requirements to the engineering team.
The launch
Elevating the buying experience for iPhone
In the six months after the UX handoff, the team continued to evolve and polish the visual design.
In the development phase, I was reassigned to the project to provide quality assurance from a UX perspective.
On July 26th, 2022 the new shopping experience for iPhone launched globally — an impressive milestone for the team.
Stay tuned for the impact. At the time of writing (2 weeks after launch) there hasn’t been an update on the overall performance of the new iPhone shopping experience.
View live site
