Responsive Website
(Desktop)
UX Researcher
Designer, Team Lead
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.
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.👈
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?
By conducting user research and comprehensive analysis of the current website, we discover the following problem area:
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.
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.
We implemented the new information architecture and design system throughout three main pages of the new site.
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.
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.
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.
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.
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.
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.
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.
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.
