Story Dogs Website Redesign

Story Dogs is an Australian non-for-profit which provides research-backed reading programs for children who are behind in literacy and might need extra support to improve their skills and confidence. The program pairs children with an accredited ‘Story Dog’ for reading time, where children read aloud to the dog with the support of a volunteer.

I love the work that this charity does, and share Story Dog’s passion for education. The original website, though, showed a number of critical usability issues that would erode the goodwill of a user interacting with the site. Providing a consistent and clean interface with a logical underlying structure and flow between pages is an essential part of building trust with users. Building a positive relationship with users is important for all organisations, but this is especially the case for non-for-profits, which rely on donations from the community.

An initial view of the original website showed a number of critical usability issues.
I saw three main problems with the website:

1. It was visually ‘busy’ — this included many elements, elements close together and lots of text
2. It was confusing — it was unclear which elements were clickable buttons vs. decorative graphic elements, and the page labels didn’t make sense
3. It was inconsistent — many different fonts, type sizes were inconsistent and had conflicting hierarchy, and visual elements (e.g. shape, colour, pattern) didn’t seem to relate to each other.

Additional usability issues included confusing navigation and lengthy pages.

Based on this initial exploration of the usability issues, I focused on:

• redesigning the home page

• improving the IA and navigation structure

• redesigning the donation page and improving the flow to make a donation.

Process

I ran initial user tests (5-second, first-click, and usability tests) to confirm my hypotheses about the usability issues on the site. I then started mindmapping and contextual exploration to better understand users; I needed to understand this more in order to effectively restructure the navigation, plus the home page and donation flows.

I mapped out the original site tree of Story Dogs, then started simplifying the navigation. During these iterations, I conducted several tree tests to check the logic of my updated navigation design. After each test, I used the insights to improve the design.

Following this, I explored other ways I could better understand the structure of different pages within the website. This led me into learning more about content strategy and IA processes. I used Semrush to give me more insights on the number of pages in the website, and which pages would be useful compared to which pages could be cut or condensed.

I started sketching out wireframes for the home page and donation screens. I developed wireframes for a user flow of someone donating to the charity. There were one or two areas within this flow that were more challenging, and didn’t quite work. I reviewed a couple of flows from existing products to better understand the sequence within this products, and used those insights to improve on my donation sequence.

Following these sketches, I created different iterations of low-fidelity wireframes, then built the best wireframe into a high-fidelity design.

I conducted usability tests on these updated designs to better understand the impact of the redesign, and to understand how to improve the design in future iterations. These tests showed that users had greater recall of the redesigned page and used more positive descriptive words when remembering the website. Additionally, 60% of users felt ‘extremely confident’ they knew where to donate on the site, compared to the original design where users had an average confidence level of ‘very low’.