After seeing the social media advertisements, customers would travel to the website (beersbooks.com) to view the inventory to view and reserve/purchase books. Beers Books does not offer shipping, so purchasing books through the website provides a secure checkout (as opposed to over the phone) and acts as a reservation for pickup.
initial sketches for planning touch points - inventory catalog, product page, and checkout
I wanted people to be confident in the books they were looking to buy. Used bookstores, Beers Books included, have multiple copies of books in different conditions or editions and it is reflected in different prices. I originally wanted to include the condition or edition on the main catalog screens, but found it difficult to make it fit and still be legible (especially since one of my main concerns was the lack of accessibility.) I ended up omitting the descriptions from the main pages, and instead keeping it on the individual products pages.
The call to action was "reserve books" in the social media campaign - so the goal is to actually reserve/purchase the books in this touchpoint. I created the inventory page to browse, a product page to view details on a specific book, and a checkout page totaling purchases and a secured checkout process. This allows the customer to reserve books without needing to call or email the store.
additional sketches for category options. these ideas ended up not being used but i played with them a lot in hopes i could make them work.
ThriftBooks screenshot
barnes & nobles screenshot
I used Barnes & Noble and ThriftBooks.com as a reference for this - since used bookstores don't typically have websites of this capacity, I needed to use a commercial retailer to draw reference from. I actually found their website to be confusing and borderline annoyingly repetitive, so I knew that was something I wouldn't be using or doing for this project. Barnes & Nobles catalogs are really long and kind of difficult to get to the place you really want, so I wanted to create only straightforward ways to get to the product catalog. I used their "from $-" in my designs to show the variety of prices. ThriftBooks uses the button selectors and is also a secondhand book website so I liked referring to this for ideas.
Beers Books doesn't have nearly the inventory Barnes & Noble does, so I assumed it really wouldn't be an issue to not include as many categories and options to get to the actual browsing page. I struggled with deciding whether or not to add a quick add to cart option under the product thumbnails from the desktop version, but I ended up deciding it could be added as a hover over feature. The quick add is seen as the green circle with the plus sign in it on the mobile versions.
physical mockup - screen no. 1 of planning touchpoint: inventory catalog
screen 1 - inventory catalog. i
In my original designs for this screen, had included each "condition" of the book all on the same screen. After multiple rounds of feedback from peers, I took out each condition and instead included only one version of that specific cover on the main inventory page. I used "from $-" to indicate there was more than one condition available in that edition.
In this screen, I included the publication information for the edition. This would change based on the product listed. I originally had a drop down bar to choose the condition, but after feedback changed it a button selector instead. This way it shows how many are available and in what condition at first glances. Each product listing changes (price wise) when selecting different buttons for the customer to choose the condition of the product.
screen 3 - checkout screen
I felt like this was a pretty standard looking checkout screen - summary of purchases on the left, and input form for payment and billing information (other stores might include shipping in here as well, but Beers does not offer shipping).
FINAL mobile versions (in order left to right: catalog, product page, and checkout)