Bookstore Website

Web Design

Location

Spring 2020

As my final assignment for my web design class, I redesigned the mobile and desktop website for a local bookstore.

Where It Started

Uncle Hugo's and Uncle Edgar's is an independent bookstore located in Minneapolis, MN. Their original website had not been updated since 2001, and after conducting user research and flow testing, it was apparent that many people had issues navigating the original site.

First Steps

Initial user testing of the website showed that many people were overwhelmed by the number of options presented on the side navigation bar.

A lot of options would eventually lead back to similar information, so the number of menu options was condensed. After narrowing down the number of tabs, testing also showed it made sense to switch to a top bar, rather than side navigation.

Wireframing

Various wireframes at different levels of fidelity were tested over the course of a few weeks leading up to this final design. The goal was to give the redesign a more modern and minimalistic look while still providing the same information.

Coding

Once the wireframe layout was finalized the website was coded using html, css, and some basic java script.

Mobile Site

After finishing the desktop version of the site, wireframes for a mobile version were created. The mobile version focuses on touch features and micro interactions, but still presents information in a similar layout as the desktop site.