Peregrine Senior Living
At The Gables of Brighton

Stakeholder Priorities

Gables of Brighton provided a list of information which they would like to feature on their new website. How the center limits COVID exposure and their new executive chef / food menu were priorities. The client also wanted to list available amenities and services on the website.

After reviewing their current website, applying UX best practices and adding color to make the website delightful were my design priorities.

How can we entice seniors to imagine that they can live at The Gables?

Role

UX / UI Designer

Tools Used

Adobe XD

Overview

I was tasked with creating a foundation for the website redesign of a senior care living facility. The template was chosen during the project proposal stage of the process.

Accessibility

Considering the senior care facilities audience, it was important to factor in WCAG Guidelines for accessibility. For the UI, I focused on the Presentation section of the WCAG checklist.

Meaningful order (1.3.2): Present content in a meaningful order and sequence so that it reads properly.

The primary navigation information architecture was sorted to avoid users asking, "But what about...?"

Color contrast (1.4.3): There must be a color contrast ratio of at least 4.5:1 between all text and background.

All text was kept at a minimum of 18pt for readability and text color was checked against background colors for color contrast.

Secondary Color

Hex: #89BDC0

Primary Color / CTA

Hex: #DB8068

Other Colors

Hex: #E5ECEC

Hex: #F0F0F0

Hex: #112D2F

Choosing a Color Scheme

In the current version of the website, CTA buttons were the same color as other buttons, with no clear hierarchy.

I wanted to add a punchy color scheme to the website so users can quickly differentiate between sections of information. A complementary color scheme was chosen with some additional pastel and dark colors for section backgrounds.

Hi-Fidelity Wireframes

Once the featured information was sorted and I had a better idea of what was grouped together within the site's information architecture, I created wireframes of the template. Below are the Hi-Fi versions of a various pages.