Hennessey + Ingalls
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.
Investigative Research
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.
- What are some of the problems you face when searching for a book to buy?
- What are some of your goals when reading a book? (i.e. entertainment, education, ect.)
- Where are you most likely to purchase a book?
User Persona
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.
Scenario
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.
Goals
- Stay up to date
- Get ahead
- Get inspired
Painpoints
- Overwhelmed with choices
- Indecisive
Journey Map
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.
Heuristics Evaluation
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.
Competitive Competition
Analyzing where my test subjects were getting frustrated I created a Competitive Comparison to see how other competitors were solving similar problems.
Card Sorting
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.
Site Map
Based on the feedback I received from the card sorting I redesigned the site map that is simpler and more intuitive.
Sketches
After receiving the results from card sorting, I started brainstorming many different layout options to see which layout maximized efficacy and fulfilled our objectives.
Lo-fi Wireframes
Once I got some basic requirements figured out I transitioned to some lo-fi wireframe brainstorming.
Wireflow
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.
Hi-fi Wireframes
Once I established the general flow I transfered the low-fi wireframes into high-fidelity mockups.
