Counting for Life

This project involved re-designing an active not-for-profit website to suit responsive design and improve navigation and overall user experience. In this case study, I worked across design, coding and development to build and optimise a new website that better supported a user’s journey through the Counting for Life online platform.
role

Web Designer and Web Developer

industry

Not-for-profit

Contributions

Adaptive Design, Web Development, Front-end Development

tools

Adobe Dreamweaver

🔎 Discovery
Counting for Life is a subset of the non-for-profit organisation, Learning Links, which advocates for the education of children with disabilities or those who are at a disadvantage by providing in-person services and support. With government funding limited, Learning Links aims to "expand their geographical scope" and successfully market their services to collaborate with schools, early childhood settings and parents.

An opportunity to refresh the brand and continue to promote their cause online is essential to the Learning Links board, fellow advocates and customer experience.
💬 Research

Through a deeper understanding of the Counting for Life organisation and business, and through heuristic competitor analysis, I worked to define the scope of information needed to be included and refined in the website re-design.

💡 There is a need for a better navigation system and information hierarchy for potential stakeholders to understand the services.

💡 Incorporation of new interactive features will showcase how people can contribute to the cause in an engaging manner

💡 As the organisation revolves around physical workshops and tutoring programs, highlighting the locations of the program through external map embedding can show users various school locations where they can be involved.

Counting for Life's existing site, which limits information shown above the fold
Stakeholders to take into consideration, highlighting the impact of a brand refresh and website re-design at a local community to nationwide level.
📊 Process
A series of high-fidelity wireframes were produced with a responsive design approach to adapt the new website layout to various screen sizes. Using HTML5, CSS3 and Javascript, the new site was developed and coded from scratch.
Process diagram for the design and development of the site.
I prepared coding documents in HTML and Desktop/Tablet/Mobile CSS to design and build the static landing page.
💻 Designing with Impact
✔Accessibility and Validation
All this content was placed on a single page landing- an increasingly used method for packaging a wide range of information within complex website structures- to increase user engagement and reduce the potential loss of customer interaction from ‘hidden’ or ‘inaccessible’ information. An external Google Maps script and embedded components were more tools implemented to increase the user experience of the site to drive traffic and generate leads.

The website was designed to industry standards and was validated using W3C with a sitemap generated. As the business goal was to broaden the scope of engagement, the website was also compressed, animated and prepared for Search Engine Optimisation, and tracked using Google Analytics.