Tasked with creating a more discoverable, more user friendly way for customers to find and purchase accessories for the HTC devices they own, my team designed a nimble and clean single-page solution.
Initially, we explored various options for configuring the store, each using different methods to sort, filter and/or search for products and even ways to visualize the pairing of device and accessory. From these we created a few wireframes illustrating the purchase flow and tested them with users.
Research found that users preferred to first search by the HTC device that they already owned or were interested in purchasing, so the final solution begins with directing users to first select the device for which they were looking to accessorize. We were able to conceive and build a fast and intuitive auto-complete field that draws from the full list of HTC devices.
Once the user selects a device, they are immediately presented with a full listing of accessories compatible with that device. This list could also be secondarily filtered by product type to aid in discovery.
On click, the product details would be presented on a modal allowing users to select options and purchase or close out and view another product right from the listing page.
Final wireframes showing the complete search and selection flow.