This is a snippet of a much larger project. Over a period of months my teammates and I have been collaborating with a large group of partners and stakeholders to try to make our Wireless shopping flow more efficient. This has involved moving away from a “hub and spoke” model to a more linear flow model, as well as reducing the volume of information in especially complex screens, and avoiding unnecessary repetition. The process of streamlining such a complex flow has involved tweaking just about every screen involved, and this is one example.
This screen, referred to as the “accessory interstitial”, offers customers a variety of accessories that match a device they’ve already added to their cart. It allows customers to shop for accessories without leaving the flow they are already in, highlights relevant deals, and is responsible for a pretty good chunk of revenue. Here’s what it looked like prior to this project:
The first step was pretty straight forward — we had developed a “device wayfinder” that would contextualize each screen so that the customer would know which device they were modifying or adding on to.
However, once we started to work on multi-device purchases, we ran into a problem. In the original hub and spoke flow, it was logical to show this screen once for each device. But, once we began to streamline things, this felt like an opportunity to condense the flow a bit, and find a way to only show this screen once.
We had to come up with a way to allow the customer to filter the accessories for each device, without showing the same screen in multiple points in the flow, and we played with quite a few options.
Ultimately, we chose something that would be easy to use, and works equally well on desktop and mobile.
This is what we have right now, but we will continue to iterate on and test this screen and this whole flow.