Hearing Dogs: E-commerce UX Strategy and UI Design
The Hearing Dogs UK site needed a visual refresh and improved E-commerce UX strategy, and who can turn down the opportunity to work with such special animals.
The challenges faced for this project were plentiful. Design a responsive site which tells the Hearing Dogs story, showcases the hard work they do and above all, allow the users who want to donate to the cause the right system to do so as seamlessly as possible. Nobody enjoys a laborious checkout process on a website and our system had to deal with both recurring and individual payments, using different payment methods within a single basket.
First stop, the sitemap. Upon reviewing the existing site, it was clear that too much content was being presented to a user. Our aim was to simplify the user flow and give maximum stand out to the donation and sponsorship routes.
The simplified content hierarchy shown below was devised to present information to a user in manageable amounts. With the donate and sponsor options displayed prominently within the header area.
Now that the content hierarchy had been decided, the ‘check out’ user flow needed to be developed. Purchasing a product from the store, adding a monthly puppy sponsorship via Direct Debit and buying your friend a gift, maybe a single donation for one of the puppies in training, all needed to be handled in a single process and this needed to be as seamless as possible, otherwise purchase drop-off was immanent.
The system we designed was based on importance, each type of purchase type was given a status and this status was used to decide the transaction order.
Below you can see a small sample of the many purchase path diagrams created to help our developers build an appropriate system.
Wireframes were then developed based on the new content hierarchy and UX strategy. Focus was placed on utilising the fantastic photographic content Hearing Dogs produce to generate interest in the content.
Below are examples of some of the most vital pages on the site: Donations, Sponsorship and Volunteering.
The aim of the Homepage was three-fold, we wanted to: Educate the audience, inspire them and show how they are able to help, all within the first few seconds of landing.