Problem
Literati's website wasn't well suited for e-commerce
Like many other businesses, Literati was forced to close during the pandemic. In order to stay afloat, the store had to move almost completely online. Literati’s website prior to the pandemic was primarily used for booking tickets to events and purchasing gift cards, and after a while proved to be ill suited for browsing and purchasing books.
Solutions
Improving the shopping + checkout experience
One of the main complaints about the old Literati website design was that it wasn't user friendly. Customers were having issues finding and ordering the books that they needed. My main goal for this project was to figure out how I could improve the shopping and checkout experience for Literati's customers.
Improved navigation
Literati's previous navigation was way to extensive and included a lot of navigation items that customers didn't really need. I went through all of their navigation items and resorted and recategorized them based on what the store owners considered most necessary. A lot of the items ended up being able to be condensed, which helped shorten the navigation overall.
.png)
Second Navigation
The second navigation on the homepage consists of some of the sub categories that users can find in the main navigation. This was included to provide quick access to some of the most searched items on Literati's website.
Checkout Experience
In order to limit the amount of information that customers have to process at one time during checkout, I decided to opt for an accordion style checkout experience. After the customer finishes one section of the checkout it collapses and shows the information that the user inputted. This makes it possible for customers to review their inputted information throughout the whole checkout experience, rather than just at the end.
Cart
Customers mentioned that the cart was difficult to find and navigate on Literati's old website. In the new design, The cart slides out from the right side of the page when the cart button is clicked. This also makes it easier for customers to go back to the page that they were previously on by clicking out of the cart.
.png)
Product page
For the product page I wanted to make all of the book information readily accessible to the customers. On the previous website, it was difficult for customers to find information about the author or the book reviews. All this information can now be found on the right of the book image. Each element is collapsable so that the customer can still see the book cover and price while reading.
Reflection
Small business, big impact
It was exciting to get to work with one of Ann Arbors biggest small business's on this project. Figuring out how to reflect the in store experience on the website was definitely one of the most difficult parts of this project, but talking with the owners and bouncing ideas off of them made it easier.
.png)
