DIGITAL FOUNDATIONS | BUILDING SCALABLE CMS WEBSITES FROM STRATEGY TO LAUNCH AT TCDS
Role: Website Designer & Developer
Duration: Dec 2024 - Present
Tools Utilized: Canva, Adobe Illustrator, Shopify, Squarespace, Civic Plus, Figma
Project Type: CMS Website Process
At Treehouse Creative Digital Solutions, I design and develop content-driven websites that transform complex information into clear, accessible digital experiences. My role spans strategy, wireframing, visual design, and full CMS implementation, with a focus on scalable structure, usability, and consistency.
This case study highlights a selection of websites I’ve built during my time at the company, showcasing my approach to content architecture, system design, and end-to-end execution.
Town of Friday Harbor
Redesigning a Municipal Website for Clarity, Accessibility, and Community Trust
Overview
The Town of Friday Harbor’s official website serves as the central digital hub for residents, business owners, and visitors seeking essential public information. However, its outdated structure, inconsistent layouts, and fragmented navigation created friction, making it difficult for users to quickly access key services and resources.
I led a comprehensive redesign to rebuild the site’s information architecture, streamline navigation, and implement a cohesive, accessible layout system. The website was redeveloped using CivicPlus, ensuring a scalable and compliant municipal CMS foundation. Throughout the process, I worked closely with the Town’s administration team to maintain content accuracy, meet public-sector standards, and align the digital experience with operational needs and community priorities. View the redesigned website here.
The Old Website
Problem
The existing website presented several usability challenges:
Disorganized information architecture with unclear content hierarchy
Navigation that made key public services difficult to locate
Inconsistent layouts across departments
Outdated visual identity that did not reflect the town’s character
Legacy content that lacked structure and clarity
For a municipal website, these issues directly impact trust, accessibility, and civic engagement.
My Role
Led the full redesign from audit to launch
Conducted a complete content and structural audit
Designed new information architecture and sitemap
Built new navigation and layout systems
Developed updated visual identity and color palette
Transferred and reorganized legacy content
Collaborated directly with the Town’s administrative leadership
Information Architecture & Sitemap Redesign
Before designing visuals, I focused on structure.
I conducted a full content audit to understand how information was currently categorized and where users experienced friction. Working with administrative stakeholders, I restructured the site into a more intuitive, task-based hierarchy that prioritized:
Departments
Government
Notices
‘How Do I’ resources
The result was a simplified sitemap that reduced redundancy and clarified relationships between departments.
Visual Identity and Color Palette
The redesign included the development of a refreshed color palette that:
Reflects the coastal character of Friday Harbor
Maintains strong accessibility contrast standards
Creates visual consistency across announcements, buttons, and call-to-actions
The updated visual system balances professionalism with warmth, reinforcing trust while reflecting the town’s identity.
Content Migration & Refinement
A major component of this project involved:
Transferring legacy content into the new CMS structure
Rewriting and refining copy for clarity and consistency
Eliminating outdated or redundant information
Improving content hierarchy to support scanability
This process required close coordination with administrative staff to ensure regulatory accuracy and alignment with public communication standards. I would attend and lead weekly meetings with staff to ensure that outcomes aligned with their vision for the new website.
Google Analytics
I studied user behavior through Google Analytics to identify trends in engagement and areas for improvement. I applied these insights to optimize content structure and interactions, enhancing user retention and reducing bounce rates. The site is currently undergoing further refinements and will be officially announced once updates are fully implemented. The numbers displayed are gathered before the official site announcement.
Reseach & Quality Assurance
To inform design decisions, I developed and distributed a Google Form to gather user feedback and identify usability gaps. I analyzed response patterns and key insights, then translated those findings into structural and visual improvements within the site.
Following implementation, I conducted a comprehensive page-by-page quality assurance review to ensure consistency, functionality, accessibility, and content accuracy across the entire platform prior to launch.
outcome
The redesigned website delivers:
Clearer access to public services
Improved navigation efficiency
Stronger visual consistency
Better accessibility and mobile responsiveness
A scalable structure for future growth
Most importantly, it strengthens the town’s digital presence as a trusted and accessible civic resource. Take a look at the new site here!
More Website Projects
In addition to the featured case study, I’ve collaborated on a range of website projects over the past year across different industries and CMS platforms.
The following sections highlight select projects where I contributed to design, development, content strategy, SEO optimization, and layout implementation — each tailored to the client’s unique goals, brand identity, and audience needs.
Warbass Way Marina | Website Redesign
Redesigned the Warbass Way Marina website by migrating the legacy site to a more dynamic, fully responsive Squarespace platform. I refreshed the brand by developing a new logo in Illustrator and enhanced the visual identity through curated photo editing for web optimization. The result is a modern, cohesive digital presence that improves usability and elevates the marina’s brand.
The Old Site
The previous website was significantly outdated and built in plain HTML, lacking a structured content system or cohesive formatting standards. Pages were text-heavy, with large blocks of unformatted content that made information difficult to scan, navigate, and understand.
Without a clear hierarchy, consistent layout patterns, or organized structure, users had to sift through dense content to locate essential information — creating friction in what should be a straightforward civic experience.
The Redesign
The redesign introduced a fully responsive system, ensuring a seamless experience from desktop to mobile. I implemented thoughtful typography pairings to establish clear hierarchy and improve readability across long-form civic content.
A refreshed color palette was developed to create visual cohesion while maintaining accessibility standards. Content was reorganized into structured, scannable sections with consistent spacing and layout patterns — resulting in a digital experience that is both visually cohesive and intuitively structured. Check out the new site here!
Salish Sea Soapworks | Shopify Website Development
Developed the Salish Sea website from the ground up in Shopify, crafting a cohesive brand presence alongside a fully functional e-commerce platform. I established the color palette, refined the visual direction, edited product photography, and created custom graphics to ensure a consistent and elevated digital identity.
On the technical side, I customized page templates using Liquid code and implemented custom metafields to enhance how product information is structured and displayed. I also built marketing automations and optimized site performance through Google Search Console to support visibility and long-term growth.
Sitemap
Design Brainstorming
Color Palette
Custom Phots + Copy Implementation
Marketing Automations
The Impact
The new website positions Salish Sea Soapworks as a premium, thoughtful brand while maintaining its approachable, handmade charm. The updated structure improves user confidence, supports conversion, and creates a cohesive digital identity that aligns with the brand’s values of sustainability and quality. Check out the new website here!
