Buy Online, Pick Up In Store

One of my favourite projects was the redesign of the Buy Online, Pick Up In Store (BOPIS) feature on the Sport Chek website. I had the responsibility to do the market research and wireframes. I also created the high fidelity mock ups with the support and collaboration of the test & learn team. When creating the redesign, I had to take into account the current functionality and create a phased approach to implement the new design.

Market Research

I started by reviewing REI.com, Homedepot.com and Bedbathandbeyond.ca to see how other popular e-commerce sites designed their BOPIS (or similar) worked. I took screenshots of designs of features and design elements and made note whether they were helpful or hindered the ease of use. I then made a list of helpful design features and a list of hindrances to ease of use.

PDP In Stock w_ Default Store Stock Limit Warning.png

Modal w_ Default Store Unsellable Online.png

Modal w_ Default Store Out of Stock w_ Open Store Details.png

Wireframes

Once I found the features I thought would best help Sport Chek’s customers, I created wireframes and a workflow in Balsamiq.

FSDP-13399_BOPIS-FIS--pdp-widget--online-only_max-width (324).png

FSDP-13399_BOPIS-FIS--pdp-widget--out-of-stock_max-width (324).png

FSDP-13399_BOPIS-FIS--pdp-widget--bopis-only_max-width (324).png

FSDP-13399_BOPIS-FIS--modal--store-details_desktop (600+).png

High Fidelity Mock ups

Once all of the kinks were ironed out from the wireframes, I created the responsive high fidelity mock ups in Sketch and imported them into InVision for the developers to better understand the flow and functionality of the redesign.