PAYG Brand Population

From one look to another

My role in this UI project was to integrate the newly developed branding elements into both the app and the website. This involved making considered decisions around colour palettes and font weights, ensuring they were not only appropriate for each platform but also visually coherent with the chosen imagery.

As with many branding processes, the app went through several iterations of colour exploration. The original palette was more youthful and playful, intended to attract a younger audience. However, we later recognised the importance of creating a more reflective and timeless aesthetic that would resonate with a broader age range. As a result, we refined the colour choices to achieve a calmer, more inclusive tone that better reflects the spirit of Pray As You Go.

Font Population

This aspect of the project required me to determine the appropriate typefaces and font weights for both the app and the website. Our chosen display typeface, Gelica, is used for titles to convey a sense of friendliness, carefreeness, and calm. 

According to the brand guidelines, the italic style serves as an accent font. However, its use across the app and website is limited due to accessibility considerations, ensuring readability and inclusivity remain a priority in the overall user experience.

Colour Population

As mentioned above, achieving the right balance of colour and identifying appropriate placements for the call-to-action colour were key aspects of this UI project. Careful consideration was given to how and where this accent colour would appear, ensuring it remained impactful without overwhelming the overall calm and reflective tone of the brand.

During the process of applying colour to the icons, we encountered several accessibility challenges. The original colour palette did not provide enough tonal variation to support the full range of icons, and some of the lighter shades lacked sufficient contrast—particularly at smaller sizes.

To address this, I developed a darker complementary palette that aligns with the existing accent colours while improving visibility and contrast. This ensured the icons remained consistent with the brand identity while meeting accessibility standards and maintaining clarity across the interface.

The visuals below illustrate the evolution of the colour palette from the initial concept through to the final refined version.

Designing appropriate Icons

At the beginning of the branding process, the agency provided a small set of icons for use across the app and website. However, as I began applying the branding system, it became clear that the initial icon set was not comprehensive enough to represent all the required features and elements.

To address this gap, I developed additional icons to ensure consistency and full coverage across the user interface. In total, I created more than 40 icons, providing a cohesive and flexible library that supports a wide range of use cases within the product.

Finding the right Images

Selecting suitable imagery presented a smaller but still significant challenge when uploading content to the admin portal. Beyond ensuring the image aligned with the intended theme and message, I also needed to carefully consider whether its colour scheme and overall mood complemented the brand identity.

Accessibility was a key consideration in this process. As text is often placed over the images, they needed to be clean and visually balanced to maintain readability and sufficient contrast.

We also discussed how to make the admin portal more intuitive and “foolproof,” so that team members could use it confidently without relying on prior knowledge or internal guidance. We decided to implement a feature that automatically applies a colour filter overlay when an image is uploaded. This significantly reduced the time required for manual testing and adjustment.

However, while the automated filter improved efficiency, we still conduct visual checks before publishing to ensure that key elements within the image do not interfere with the legibility of overlaid text.

Accessibility

Ensuring strong accessibility has been a central focus of this project. Our goal was to make both the app and website as user-friendly as possible, particularly considering that many of our users are older and may be less tech-savvy. This meant carefully designing for readability, contrast, and ease of navigation. As part of this, I worked extensively on refining the colour palette to maintain sufficient contrast, which became one of my key responsibilities. Similarly, the accent font was deliberately limited in the app and website to prioritise clarity and legibility.

Later, we initiated a sign language accessibility project, specifically addressing the needs of deaf users. One of the key decisions we made was not to include subtitles in signed prayers, as they could be distracting for deaf users relying primarily on sign language. This approach reflects our commitment to tailoring accessibility features to the specific needs of different user groups.