Hennessey + Ingalls
E-commerce website redesign
Story
Hennessey + Ingalls is a specialty bookstore in Los Angeles offering the largest Visual Arts and Architecture book collection in the US. They want to create a better navigational experience for customers in their online store.
Overview
This project was a full UX/UI redesign of the H+I e-commerce website. Major aspects addressed include restructuring of information architecture, the checkout process, UI aesthetics, and adding features to improve overall usability and flow.
Role: UX/UI Designer
Tools: Sketch, InVision, OmniGraffle, Excel, Whiteboard, Post-Its, Pen & Paper
Goal
Create and design a more intuitive and enjoyable experience for customers in H+I's online store.
Research
Heuristic evaluation
An initial assessment based on best design practices found usability issues throughout the H+I website.
Efficiency and flexibility: The global navigation, site features and checkout process are difficult to use.
Consistency in standard practices: Unfamiliar search bar and shopping cart placement and functionality.
Aesthetics: Misalignment and formatting issues persist through every page.
User research
Interviews with H+I's key user group, 25-45 year old college educated academics, artists, and designers, were conducted to understand their current experience with the website. Alex, a proficient freelance graphic designer, embodies their collective voice. He wants to purchase a book on tree house design for a future project.
Alex, "creative explorer", 29, Los Angeles
Fascinated by visual artists and always on the lookout for new inspiration
Enjoys studying architecture and going camping in his free time
Prefers e-commerce as he values others' insight and likes to compare products before making purchases
Frustrated by inefficiency and poor design
Customer journey
Let's follow along with Alex as he searches for the perfect tree house guide.
Alex finds his book, but at the cost of a very unpleasant experience. He concludes by saying he much rather use competitor site Amazon next time around. Issues highlighted by the Heuristic Evaluation are confirmed and help outline four key areas to work on.
Pain points
Confusing global and site navigation
Unable to compare products or read reviews
Tedious and frustrating checkout process
Unappealing UI and alignment on each page
Ideation
It's time to address pain points.
Information architecture
To address confusing navigation, users were asked to do a card sort to determine which organization schema made the most sense to them. This revealed overlap and duplicate information within multiple sections. A new site map was created merging relevant topics into fewer categories while eliminating redundancy. This enhanced users ability to find and move through relevant content.
Feature prioritization
A comparative & competitive analysis determined top competitor sites had customer reviews and ratings along with many other features H+I was lacking. These features were added to the redesign to improve the enjoyment and flexibility of the shopping experience. Giving features users have come to expect while rectifying the inability to compare products.
Checkout optimization
The frustrating checkout process caused Alex lots of grief. A comparative task analysis found the most efficient process from start to finalize checkout took 25 steps (3 minutes and 30 seconds) on H+I compared to 9 steps (30 seconds) on Amazon. Longer checkout times lead to higher drop out rates and less conversions. Removing and condensing unnecessary prompts in the H+I checkout form reduced this to 11 steps (1 minute!).
Design
Wireflow
Low fidelity wireframes were sketched exhibiting user research for new features and improved functionality.
Prototype
With the sketches as a guideline, a high fidelity prototype was created. User feedback was incorporated and UI and alignment issues were fixed for cleaner aesthetics. The redesigned H+I website now lends credibility to a store of the visual arts.
Results & user feedback
Alex was happy to report how much smoother the redesign felt and looked. He said it was easier to navigate and the added review and ratings features helped him feel informed and confident when making his purchase. The checkout process was now manageable and fluid. When finalizing his order, he said he'd definitely return to H+I for future purchases.
Best design practices and user backed research to test and validate assumptions resulted in a successful redesign and better navigational journey through H+I's online store. Future analysis will show if added features, such as best sellers and customers also viewed, will increase sales further. The user flow from start to finalize checkout is faster than Barnes & Noble at 11 steps (1 minute). This allows customers to complete purchases easily and quickly without dropping out. Pain points and usability issues have been addressed, culminating in an intuitive and enjoyable H+I e-commerce experience.