Rethinking the Shopping Experience for iPhone


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.
Senior UX Designer
May 2021 – June 2022

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 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.
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:
Make shipping and delivery details more prominent.
Provide persistent on-demand shopping support.
Showcase and clearly explain price and affordability options.
Communicate why Apple Retail.
Consider the end-to-end customer journey.
Defining success
Sell more iPhones
online at Apple
Increase customer
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.
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.
For confidentiality reasons, I've intentionally omitted the actual values of the metrics mentioned above.
The vision

Expand the scope of
availability and fulfillment

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.
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.)
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
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.
Key challenge #2

How might we provide relief in moments of tension?

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.
Key challenge #4

How might we optimize the sticky bar on mobile?

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.
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.