Hennessey + Ingalls is the largest art, architecture and design bookstore in the western United States, and probably the largest retail operation in the country dealing just with books on the visual arts. H+I wants to create a better navigational experience for their customers in their online store.
Given that Hennessey and Ingalls is a specialty bookstore that focuses primarily on Art and Architecture I tried to find people that fit this category in order to get an idea on what their goals and frustrations are when shopping online for new book. My interview with an interior designer gave me great insight about the motivations of the key user.
I created a user persona from the data I collected to help represent who Hennessey and Ingalls key demographic is and so I can keep them in mind during the design process.
Sarah has a family trip coming up and she likes to read while traveling and relaxing by the pool. She’s doesn’t have a book in mind but is looking for a new book that’s going to inspire her for when she returns home and starts working again.
I watched a user go through the current Hennessey and Ingall's website and created a journey map to better illustrate the users emotional experience when trying to buy a new book online.
Using the Neilsons Heurstic Evaluation Method I found that Hennesy + Ingalls had an average severity level of a 2.65/4 with the main issues being User Control and Freedom as well as Flexibiltiy and Efficiency of Use which scored upwards of a 3 and 4 on the severity scale.
Analyzing where my test subjects were getting frustrated I created a Competitive Comparison to see how other competitors were solving similar problems.
In order to better understand the current navigation and how to improve upon it, I had users card sort the current navigation items on sticky notes, in ways that made most sense to them. This helped show many inefficiencies such as categories that overlapped or simply things that did not make sense.
Based on the feedback I received from the card sorting I redesigned the site map that is simpler and more intuitive.
After receiving the results from card sorting, I started brainstorming many different layout options to see which layout maximized efficacy and fulfilled our objectives.
Once I got some basic requirements figured out I transitioned to some lo-fi wireframe brainstorming.
Once I settled into a design that I felt met all the needs of the user, I designed a wireflow to document the process of a user working through a common task on the site (e.g. “purchase a book”) at each step in the workflow I designed a simple wireframe to show the screen available to users at each step in the process.
Once I established the general flow I transfered the low-fi wireframes into high-fidelity mockups.