FIPPOA Website Redesign

Overview

Timeline
Jan. - Feb. 2020
Platform

Responsive Website

(Desktop)

My Role

UX Researcher

Designer, Team Lead

Tools

Figma

Our client, Fire Island Pines Property Owners Association (FIPPOA), was looking for updating the current website to better serve the community. My teammates and I learned from local residents and visitors that FIPPOA’s website was outdated and lacked useful information. We delivered a clear-structured website with useful community guidelines and updated visuals, which was approved for moving forward to the development.

Methodology in Use

Research
User Interview
Affinity Mapping
Heuristic Evaluation
Competitor Analysis
Comparator Analysis
Ideation
Design Studio
Information Architecture
Card Sorting Testing
Tree Testing
Design and Prototype
Mid-Fi Wireframes
High-Fi Prototype
Usability Testing
A/B Testing

Research & Analysis

By interviewing a mix of local residents and seasonal visitors and asking questions like “tell us about the last time you visited FIPPOA's website”, “walk us through your weekend on the island”, etc., we created two user personas. With a close evaluation and testing of the current website, we discovered major problems with the site structure and its accessibility. 👉Read more @ Medium.👈

Figure 1. Selective User Research Insights - Infographics
How might we redesign FIPPOA’s website to help Jack (a visitor) locate visitor information? And make Warren (a resident + FIPPOA’s member) feel the needs of FIPPOA members and the personality of the Pines are well represented?

Problem Space

By conducting user research and comprehensive analysis of the current website, we discover the following problem area: 

  • Users are frustrated with clicking back and forth to find the information that they need.
  • Users were unable to find practical rules and available resources that the island offers.
  • Members don't see the value of the membership while non-members don't have an access point to FIPPOA.

Figure 2. Selected Original FIPPOA Web Pages - Homepage, Membership, Facility Pages

Solutions at a Glance

We redesigned FIPPOA's website with rebranded designs and clear-structured information architecture to enhance  usability and accessibility. The new design included useful information and utilized images and icons to  add more visual interest. We treated the website as a collection of reusable modular for future scalability and easy maintenance.

mid-fi wireframes
Figure 3. Mid-Fidelity Wireframes - Modulars - FIPPOA Website Redesign

We tested the redesigned booking process at mid-fidelity level design with 5 users with car rental experiences. The task is to book a car for a road trip returning to a different location. 5/5 users successfully booked the reservation with no difficulties.

Feature Highlights

We implemented the new information architecture and design system throughout three main pages of the new site.

Sitemap

The new sitemap, tested and approved by multiple rounds of tree testing, reduced complex layers of navigation and was limited to secondary navigation. It saved users from clicking back and forth and helped users reach destination faster. 

Figure 4. Iteration of Sitemap
Homepage

Implementation of a navigation bar reduced the bounce rate while a quick scroll allowed users to access essential community information upfront. Buttons helped direct users to the destination while images offering visual delights.

Figure 5. Scrollable Image - Redesigned Homepage
Membership Page

We rephrased FIPPOA membership information into categories and sections and paired it with icons, photographs, and illustration. The redesign provided clarity among membership types and highlighted the value of being a member.

Figure 6. Scrollable Image - Redesigned Membership Page
Community Page

Users had a hard time finding available resources, rules and so on the current website. We grouped information into community guidelines and resources under one place with clear labels. The community history and photo gallery highlighted the charm of the Pines and FIPPOA through infographics and photographs.

Figure 7. Scrollable Image - Redesigned Community Page
Design System

I went the extra mile by rebranding, redesigning, and documenting the FIPPOA website design system, which helped us and the client's development team build consistency across screens. The new style guide enhanced the accessibility of the site and highlighted the personality of the community.

Figure 8. Scrollable Image - Selected FIPPOA Design System

Design Outcomes

We achieved a 97.9% success rate in usability testing and reduced time-on-task by 80%. The new information architecture helped reduce the bounce rate. This redesign project was well received by the client and moving forward to development.

It’s kind of hard not to find them(community guidelines and other visitor information). They are in multiple places.

Figure 9. FIPPOA Website Redesign Mockup

I like (that) it has a navigation bar now so I know where to go. And now I know where my membership dollar goes and see value of it.

What I Learned - Recognizing Technical Limitation

While presenting mid-fi wireframes to the client, our client raised questions on how to implement the design with preferably no customize coding on Wix. Afterwards in later design, I researched and tested every design elements with potential development difficulty on Wix to ensure the feasibility, for instance, adding local/Google font and a countdown clock, etc.

Video 2. Behind the Scene - Selected Process