Million Paws Walk

UI Redesign & Development

Background

As part of the curriculum of the Graduate Certificate in UX and Web Design, this project presented me with an opportunity to redesign and develop across desktop, tablet and mobile formats the home page of a not-for-profit organisation website which I felt was noticeably in need of a refresh. At a glance, it appeared apparent that the RSPCA’s Million Paws Walk website would fit the brief. Each page of the website seemed to be put together by a different person, and I found my eyes darting all directions across the home page trying to discern and decipher key information, so it seemed questionable whether a design system had been created for the website.

Original design of the Million Paws Walk website home page

Heuristics Analysis

Before brainstorming redesign ideas, I conducted a heuristic analysis of the Million Paws Walk website to substantiate the pain points I suspected about the website. I referred to basic design principles published by Nielsen Norman Group, Interaction Design Foundation and Toptal as part of my research. The self-directed audit exposed some key shortcomings of the website to be:

Million Paws Walk - Issue with Unity

Unity

The lack of font hierarchy makes it difficult to distinguish the relative importance of different pieces of information.

Hierarchy

Poor visual weight choices of components and sections causes information clutter, lowering focus and comprehension.

Contrast

The absence of a conspicuous colour scheme is overstimulating, incohesive and distracting.

Aside from these pain points, I wanted to optimise the Million Paws Walk home page in line with the organisation’s key marketing messages in mind. A review of the call-to-action buttons on the home page revealed the primary persuasions were for people to sign up for, donate to and fundraise on behalf of the Million Paws Walk.

Redesign and Development

Based on the findings, a redesign of the existing Million Paws Walk in mobile, tablet and desktop formats were put together in Photoshop. These designs then drove the production of the new home page in all three digital formats via Visual Studio Code, incorporating HTML, CSS and Javascript. A basic design system was created as follows:

Million Paws Walk - Colour Palette Fix

Colour Palette

A highly salient turquoise and orange colour palette will help to instil cohesion between visual components.

Million Paws Walk - Call-to-Action Buttons Fix

Call-To-Action Buttons

Primary and secondary buttons will help to convey and supplement key marketing messages respectively.

Million Paws Walk - Content Organisation Fix

Content Organisation

Typographic hierarchy, uniform headings and clear section breaks will help to establish order and enhance readability of information.

Refreshed design of the Million Paws Walk website home page

Other Projects

Homeslice

What’s Up Doc