Riviera Village

Bill pay portal for the residents of Riviera Village Park. See the live website.

SErvices

UX Design,
UI Design,
Front-end Development.

Platform

Webflow

timeline

Feb - April 2024

outcomes

+Reported on-time payments

beautiful, simple, effective.

Riviera Village is a 55+ community that needed an online bill pay portal. The client was also looking for a place to post newsletters and community updates. Our collaboration went so well we went on to create an intuitive and interactive webpage for the park rules, nine months after completing the initial site.

Because I was designing for older adults, I challenged myself to meet AAA accessibility standards. I also had a hunch I would need to

1. Keep it simple
2. Design for mobile responsiveness

01 accessability

I used the WCAG 2.2 AAA checklist and WebAIM accessibility guidelines as a guide. Each point is linked to the WebAIM guidelines for a more complete definition.
Here is how I met these prestigious standards.

1.3.6 Identify Purpose

🏔️ Regions/landmarks are used to identify page regions.

1.4.6 Contrast (Enhanced)

✍️ Text has a contrast ratio of at least 7:1.

1.4.6 Contrast (Enhanced)

✅ Large text - 20px

✅ Small text 18 point and bold

✅ Contrast ratio of 16.42:1

2.5.5 Target Size

Clickable targets are at least 44 by 44 pixels in size.
I was able to keep tap targets at a minimum of 44x44 pixels on smaller screens by using a larger tap target than the button presented to the user.
⚠️ Icon alone falls short by 4x4px
✅ Tap target exceeds standards by 76x81px

3.3.5 Help

✅ Instructions and cues are provided in context to help in form completion and submission.en the text size is doubled.

3.3.6 Error Prevention (All)

✅ User receives verification upon form submission.

02 obvious always wins.

I aimed to create something that was as intuitive as possible for users in my age demographic by using good design principles.  
Large tap target in the top left corner
✨ Menu Button: Extra padding and stark contrast ratio
The bright orange accent color captures the user's attention immediately
CTA buttons easily reachable with your thumb
Prominent "hint" text
Wide margins, easily accessible and legible

03 responsive by design

71% of the population pays their utility bills online via mobile devices. An even larger percentage of my users, considering their age and income demographics, access the internet through mobile phones. Therefore, ensuring mobile responsiveness was crucial for user success.
*Stats by The Financial Brand, 2024

04 travel anywhere in 2 clicks

Nine months after successfully launching the bill pay portal, the client contacted me for help with formatting a Word document. Instead of just formatting the document, I proposed a better solution: creating an interactive, responsive webpage that would allow tenants to navigate to any statute in just two clicks.

So far, going great.

The client has reported significantly increased payments made by tenants. We look forward to working together on future projects.
"My family reached out to Katelyn to design and build a website for our RV park, and she was an absolute pleasure to work with. Katelyn took our vision and feedback and transformed it into a functional, visually stunning site that perfectly meets the needs of our tenants. Her attention to detail and commitment to delivering exactly what we wanted were impressive. We couldn't be happier with the outcome!"
-Edd DiLuck, Client