FIPPOA Website Redesign

Video: FIPPOA Redesigned Website Prototype Walkthrough

Overview

Timeline
One Two-Week Sprint
Platform

Responsive Website

(Desktop)

My Role

UX Researcher

Design Lead

Tools

Figma

Photoshop

This is a complete website redesign client project for FIPPOA, which stands for Fire Island Pines Property Owners Association. The client was looking for a website with clear information architecture and appealing visual language to improve the user experience and highlight the organization's role. This complete redesign project includes three phases- research, ideation, and design. I collaborated with three other team members and accomplished to generate an over 80 pages final deliverable, as well as a final product walk-through to the client. The client approved the design for moving forward into development.

Client's Needs

  • A responsive website redesign focusing on desktop
  • A website with useful information and easy to navigate through
  • An in-depth user research focusing primarily on homeowners and renter, and potentially visitors
  • A redesign fulfilled its business goal
    • Increase the number of membership(renters and visitors)
    • Promoting current community resources that are underutilized

Methodology in Use

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

Research & Analysis

During the research process, we interviewed 12 users, a mix of community homeowners/renters from the client's user list and renters/visitors by outsourcing. By synthesizing user data by affinity mapping, we discovered trends of users' pain points and needs, and then translated qualitative data into insights. A clear distinction of user behavior and needs between long term community members and users had a relatively short time with the pines informed the personification.

Current Problem

Fire Island Pines is historically an inclusive safe haven for LGBTQ+ community, as well as a convenient and relaxing getaway from New York City. However, FIPPOA's current website does not represent the personality of the community and the needs of current members. It also lacks of useful local rules and visitor information.

Figure 1. User Persona

Sitemap

We analyzed the FIPPOA's current site's information architecture, and revised twice to accomplish a final sitemap. We conducted open and closed card sorting on the proposed sitemap to validate our changes. After a slight edit, we tree tested it again and finalized the revision.

Figure 2. Iteration of Sitemap

Design & Rapid Prototype

After validating our proposed changes and conducting rounds of design studio, we moved to the final design and prototype phase. As the design lead, I managed to deliver fully functional mid-fi wireframes and a high-fidelity prototype, as well as a complete style guide and a full specification documentation. We ran one round of usability tests of designs at different fidelity and achieved a satisfying success rate.

Video 2. Evolution from Mid-fi to Hi-fi
before and after 1 before and after 2
Figure 3. FIPPOA Website Before vs. After

We conducted 8 usability tests and had a 97.9% success rate. Users had no difficulty to find out information of community rules, membership benefits, and reserve Whyte Hall. The client was very pleased with the hi-fi mockup, as well as the new branding visual design. He was bringing the project deliverable to the FIPPOA board to implement the redesign.

Style Guide

I took the initiative to start the specification documentation for development. We generated a spec doc over 30 pages for the client, which includes a color palette, typography, all CTA buttons and icons in use, etc. It also presents how I apply Bootstrap responsive layout during design.

# Color
# Typography
# Icons & Buttons
# Bootstrap Responsive Layout

What I Learned

Recognize technical limitation
During the mid-point meeting, the client was happy with the design solution and mid-fi layout but he was hesitant on how to implement the design within the technical constraint of building on Wix. Moving to the hi-fi design, I researched and tested on every potential developing difficulty to make sure that they are feasible to build on Wix, for instance, using local/google font, adding a countdown clock, etc.
"A good design is all about the user."
During the debrief session, the client looked through our 80+ pages report and raised questions of design elements. I was able to explain them backed up by (user and technical)research and responsive web theory (bootstrap).