hd_header

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.

You can see the Hearing Dogs site here.

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.

hd_sitemap

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.

hd_user_flow

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.

hd_wire3
hd_wire2
hd_wire1

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.

hd_hp_wire
hd_hp_mock

The end result is a fully responsive site which educates and inspires the viewer, offering a simple way for them to get involved with this great cause.

You can see the Hearing Dogs site here.

hd_responsive

More projects

Concept. Design. Illustration
Concept. Storyboarding. Matte Paint. Sculpture
UX Strategy. Rebrand. UI Design
UX Strategy. UI Design
Concept. UI Design. 3D Modelling & Printing
Concept. Illustration. UI Design
Social Content Strategy. Design
Content Strategy. Design
UX Strategy. E-Commerce
Social Content Strategy. Video. Papercraft