Wanna know more about Fire Island-FIPPOA Website Redesign, a UX Client Project

Image for post
Image for post

Overview

This is my first real-world client UX project working with three team members. Our client is FIPPOA — Fire Island Pine Property Owners Association while our work is to conduct user research and redesign FIPPOA’s current website (desktop) in two and a half weeks. During this two-week sprint, we encountered and overcame challenges and roadblocks and delivered a successful presentation and report to our client.

My Role

I worked with three amazing team members to accomplish this client project. I was involved in each stage throughout this website redesign process, from research to ideation and design. As one of the four UX Researchers in the team, I participated in designing a screener survey, conducting user interviews, synthesizing insights from user interviews to persona, and analyzing FIPPOA’s current information architecture.

Moving along the UX process, I took the lead of designing and prototyping during the design phase. I initiated a visual style guide, designed the mid-fidelity and high-fidelity prototypes, and completed a specification document including design decisions, components dimension. I was responsible for the redesign walkthrough during the final presentation to the client.

Client’s Needs

  1. A redesigned website with a clear information architecture

2. A website that helps accomplish FIPPOA’s business goal - Promote community space/service that is underutilized

3. A website helps recruit more members and gain membership retention

Challenges and Roadblock

1. Time Constraint and Tasks

We only got a little more than two weeks to finish this project while this was a massive project to succeed. We had to run the full UX process, information architecture analysis, and UI redesign within the time frame. We dedicated a week and a half for deep user research and five days for design and final testing. We worked collaboratively and independently, and fully trusted each other’s strength.

2. Recruiting Users— User Type Really Specific

We encountered a shortage of users for interviews and card sorting tests since the users of FIPPOA’s website were very specific. Though our client provided a user list and worked really hard to get more users for us, we had to outsource users on our own to make sure the users were unbiased. We reached out to our network and our networks’ friend circle and got the right amount of candidates within our time frame.

Research Phase

We dedicated an entire week to conduct research. The research methods we applied were a screener survey, user interviews, affinity mapping, heuristic analysis, competitor & comparator analysis, and current sitemap analysis. At the end of the research phase, we accomplished to translate insights into two personas, understand the current problems and user needs, learn about our client’s website thoroughly and inspire by the competitors and comparators.

Recruiting Users and Conducting Interviews

We got a user list including 11 users (a mix of Fire Island Pine property owners and renters) from our client. However, we need more users with a more diverse demographic and experiences of Fire Island Pine in order to collect enough data for two personas. We set up a screener survey and found 3 candidates (out of 16 responses)for later user interviews. In the first week dedicated to research, we conducted 11 interviews in total and then translate user insights into one primary persona and one secondary persona.

Screen Survey

Synthesizing User Insights

We received massive insightful data from our 11 interviewees. During our group reviewing interview notes, we found that seasonal renters for years had similar experiences and needs of FIPPOA’s website. However, the distinction of current experiences, needs, and goals was between short-term visitors/first-time renters and long-term renters/property owners. We conducted five rounds of affinity mapping to generate final insights. During these five rounds, we had restarted from scratch once, divided into two mini-groups, conducted silent rounds and then moved/pitched for slight changes.

Affinity Mapping Documentation

Personas and Problem Statement

As our client mentioned that he would like to have two personas during the onboarding meeting, we translated our findings from the user interview into a primary persona and a secondary persona. However, we found out that the distinct differences of user’s needs, goals, and current experiences were directly related to the number of years they had with Fire Island Pines. As a result, the two personas were a long-term community member (property owner or renter) and a short-term community member instead of a property owner and a seasonal renter as our client assumed.

Image for post
Image for post
Primary Persona — Warren
Secondary Persona — Jack

Heuristic Analysis

While we were scheduling interviews, we conducted the heuristic analysis, competitor & comparator analysis, and analyzed the current website’s information architecture. Dara took the lead on running a heuristic analysis on FIPPOA’s current website. Besides a general analysis using Abby Method, there was an accessibility analysis that emphasized and further broke down the color contrast and etc.

Current Website Overall Heuristic Analysis — Credit to Dara (Click to view details)
Accessibility Analysis Break Down — Credit to Dara (Click to view details)

Competitor and Comparator Analysis

During the one-week research phase, we also did competitor and comparator analysis. I took the lead on competitor analysis while Nicole was focusing on comparator analysis. I compared the PtownTourism website, as our client listed it as FIPPOA’s major competitor and Nicole looked at two other homeowners association’s websites. By looking at competitors and comparators, we got the inspiration of property owners association’s must-have content, as well as visual design elements.

Left: Competitive Analysis — Credit to Victoria; Right: Comparator Analysis — Credit to Nicole (Click to view details)

Sitemap — Current FIPPOA’s Website

We analyzed the current website’s information architecture. The website consisted of massive content under unclear nested tabs. This sitemap provided a clear visual clue of the current unstructured (no navigation bar) website.

Current Sitemap — Analyzed by the team, Digital Sitemap by Victoria

Ideating Phase

During the ideating phase, we revised the sitemap based on our research finding and then used open and closed card sorting, and tree testing, to validate our changes. We also conducted two rounds of the design studio to come up with website layouts and later translate to mid-fidelity design. At the end of this phase, which took us a little less than a whole week, we accomplished to have a final version of the revised sitemap, finished mid-fidelity wireframes and testing, and got ready to move to the high-fidelity mockup.

Proposed Sitemap

Since there was no structure or category of the current website, applying card sorting tests of the current website won’t optimize the time usage and results for revision. We combined the content of FIPPOA and its affiliate Pine’s Foundation as our client mentioned that these two didn’t need to stay separated as they were on the current website. We also created clear structured navigation based on our user research and comparator analysis. While we were designing the proposed sitemap, we had our client’s technique limitation of using Wix.com in mind. As a result, instead of having a number of secondary navigation that requires more pages and user clicks, we only created primary navigation and pictured all the content embedded into one scrolling page.

(Left: Proposed Sitemap for Card Sorting Tests; Right: Revised Proposed Sitemap for Tree Testing. Credit to Victoria.)

Card Sorting Tests

We conducted both open and closed card sorting tests. The tests were run by optimalworkshop.com and each of them contained 30 cards(content items of the website). For the open card sorting, we sent it out to people from the client’s user list as they were more familiar with terms like “minutes” and “FIPPOA PAC”. The closed card sorting was for anyone, ideally not so familiar with Fire Island Pines or FIPPOA, to provide a little bit more context (primary navigation categories) and find out the confusing terms.

The open and closed card sorting data proved that most of the proposed sitemap was working. As a result, we revised the first version of the proposed sitemap a little bit. And then the second version was ready for tree testing.

Open Card Sorting Data. Left: Optimal Workshop; Right: Analyzed by Nicole.
Closed Card Sorting Data. Left: Optimal Workshop; Right: Analyzed by Nicole.

Tree Testing

We conducted a tree test on the revised proposed sitemap and got responses from 18 users. Overall the success rate was pretty high. However, there were minor tweaks should be done before moving forward.

Final Verison — Revised Sitemap

Based on the result of tree testing, we further revised our proposed sitemap. As users saying that the “our” word in the primary navigation confused them, we took it out to ensure the inclusiveness of the website. Users also mentioned that for some navigation tabs, such as“our community” and “our events”, they would expect there was secondary navigation underneath. So for the final sitemap, primary navigation items including multiple call-to-action contents would have secondary navigation instead of a scrolling page.

Final Version of Sitemap for FIPPOA’s Website Redesign — Credit to Victoria

Mid-Fidelity Wireframes

While moving to Mid-fidelity Wireframes, we kept our client’s technique limitation in mind. We designed everything as reusable block components that a page could mix and match block components that best suit the content. The mid-fidelity wireframes were the skeleton of the redesign in grayscale that was intended to only test the functionality and usability.

Mid-Fidelity Wireframes — Reusable Block Components, Credit to Victoria
Mid-Fidelity Wireframes — Main Pages, Credit to Victoria

Usability Testing

The usability testing with 6 tasks was conducted with 6 users. We also did an A/B test on task 6 to find out whether we have the right language for the navigation. Overall we received a 100% success rate thought there were a few areas of further improvement.

Raw Data from Usability Testing
Mid-Fi Usability Test Report — Synthesized by Nicole

Design and Prototype

We dedicated four days to finished the high-fidelity prototype and its usability testing. I took the lead of this phase and generated a twenty-five-page specification document of the hi-fi mockup. By the end of this phase, we had a refined hi-fi mockup that both the team and the client were pleased.

Insights to Design Features

Each of the design decision was directly driven by user insights. The high-fidelity mockup also followed the responsive web design guidelines:

  • We designed many elements of the website, such as the hero carousel and interactive infographic section as reusable block components for consistency, to help replicate future pages and for ease of maintenance.
  • The reusable block components design allows for personalization. A scrolling page could mix and match different block components upon on featured content.
  • UI components and visual elements are laid out on a 12-column responsive website layout (Bootstrap responsive website — columns layout theory). As a result, individual elements are designed to take over space of 2 / 3/ 4/ 6 columns that 12 could be divided by.
Design Insights from the Primary Persona
Design Insights from the Secondary Persona

Visual Style Guide

The style guide was created based on the “Sand Book” that our client gave to us. The primary color palette included FIPPOA’s branding color and a darker green that could pass WCAG AA color contrast. The secondary palette was taken from the “Sand Book”. The high-fidelity mockup included three different typefaces that were inspired by the printout book as well.

Style Guide — Color, Typography, Buttons.

High-Fidelity Mockup

We designed every section as a modal that a page could mix and match different modals that best fits the content. We focused on three navigation tabs and their associated pages, which stated in our statement of work with the client. After designing and prototyping, specification documentation over 50 pages was generated for further implementation of the design.

Hi-Fi Main Screens

Usability Testing

We conducted one round of usability tests on the hi-fi prototype with 8 users. The final result was satisfying. The recommendation of changes from this round was implemented to the final hi-fi prototype for the client.

Raw Data from Usability Test
Hi-Fi Usability Test Report — Synthesized by Nicole

Next Steps

  1. Continue building the “Event” and “About FIPPOA” pages.
  2. Waiting for the board to approve the proposal and implement the changes to the website.

My Takeaway

This is a challenging project since it is for a real-world client, which means more pressure and less acceptance of error. However, we did a great job during the presentation and the debrief with our client. During the debrief session, I was able to explain every design decision backed up by (user and technical)research and responsive web theory (bootstrap) when the client had a question reviewing the spec doc. Moreover, I was able to learn and practice bootstrap responsive web theory to inform better design working FIPPOA redesign project.

Written by

A New York based UI/UX designer who codes.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store