Building a Sustainable Digital Platform
Club BD ADDA — French-American Cultural Program
Estimated reading time: 7 minutes
Summary
Timeline: 2024 (~8 weeks effective delivery)
Ongoing support: 2024–Present (quaterly updates)
Industry: Non-Profit Organization
Software & Platforms: Figma, Adobe Illustrator & Indesign, Wix, Google Workspace, Zoom, 1Password
Tools: Color Contrast Analyzer, WCAG 2.1 AA guidelines
Launched in 2017, Club BD ADDA is a volunteer-led French-American cultural program promoting French-language graphic novels across California.
I led the information architecture, UX strategy, visual identity, and post-launch quality processes, transforming a multi-page Google document into a structured, accessible, and scalable digital platform.
Key Achievements
- Delivered and launched the new website ahead of the annual program kickoff
- Established a professional visual identity now used in press and partner communications
- Delivered a modern, accessible website replacing the organization’s prior document-based web presence
- Introduced a dedicated contact form that increased inbound inquiries
- Introduced structured QA workflows improving consistency across quarterly updates
- Created a flexible site structure that continues to evolve with stakeholder needs
- The architecture has already supported two major page model updates without structural disruption
Overview
Club BD ADDA is a volunteer-led French-American cultural program that promotes French-language graphic novels through curated reading selections and community discussions across California. The club serves a dedicated community of 60+ readers within a broader regional French-speaking population estimated at approximately 60,000 residents in the San Francisco Bay Area.
The organization aimed to establish a professional digital presence to strengthen its visibility within the French-speaking cultural ecosystem in the U.S. and support member growth.
Its initial online presence consisted of a several pages long Google Docs document. I transformed this document into a structured, accessible web platform and created a new visual identity aligned with its cultural mission.
From the itinial presence to the actual live website (February 2026) updated by volunteer-team.
Challenges
How to design for a volunteer-run nonprofit ?
The team operated entirely on a volunteer basis. Initial ambitions included broader editorial initiatives (such as a blog, newsletter, and social media), which required alignment around scope, budget, and available contributors time.
This context called for a solution that would elevate the club’s professional image while remaining realistic to update and maintain.
My role from UX to product strategy
Building on my previous work supporting the French digital library program LirEncor, I was invited to lead the redesign of the Club BD ADDA platform.
I led the end-to-end design and implementation of the Club BD ADDA digital platform, including:
- Visual identity design (logo and brand guidelines)
- UX architecture and information hierarchy
- Accessible UI system and layout patterns
- Evaluated different CMS platforms (WordPress, Ghost, Square)
- Wix site configuration and implementation, including custom CSS enhancements (team elected Wix based on prior familiarity)
- Centralization and normalization of shared project assets in Google Drive
- Platform capability research (including Wix private member navigation)
- Content structure guidance
- Post-launch QA framework for ongoing updates
This project required careful alignment between design fidelity and the team’s operational capacity.
“We entrusted the development of the new Club BD ADDA website to Stephanie Lesperance, who successfully delivered the project on Wix. Thank you, Stephanie!”
— Danièle Archambault, CoFounder of BD ADDA (translated from French)
Brand Strategy
A sustainable brand foundation
Given the organization’s volunteer structure and limited budget, I developed a lightweight but production-ready brand foundation using open-source typography and a fully specified color system (Pantone, CMYK, RGB, Hex) to ensure consistency across both print and digital touchpoints.
Logo files, typography, and source design assets were centralized in a shared library, enabling volunteer contributors to implement or share materials independently.
Accessible Visual Identity
The logo color palette draws inspiration from La Francophonie, the global French-speaking community and cultural celebration, reflecting the Club BD ADDA’s mission to promote the diversity of French-speaking authors.
These colors were extended into the digital experience (hero sections, UI accents, iconography) to reinforce visual cohesion across the experience. I calibrated the palette to ensure sufficient contrast with both light and dark text. All combinations were validated against WCAG AA contrast requirements.
I developed a lightweight brand guidelines to support consistent implementation across volunteer contributors and print/digital touchpoints.
Information Architecture
The information architecture was the true starting point of the project. Before any visual design work began, I mapped the full site structure to clarify scope, user flows, and content ownership.
Initial ambitions included a blog, newsletter module, and expanded content sections. However, as a volunteer-led organization with limited editorial bandwidth, maintaining these features would have created long-term operational strain. Through several discussions, I helped the co-founders prioritize core needs that balanced visibility and usability.
This structure below intentionally goes beyond a traditional sitemap. It visualizes not only navigation but also content dependencies and maintenance responsibilities. Each Google Doc link represented recurring quarterly updates performed by volunteers. By mapping these explicitly, I coul demonstrate the hidden operational workload behind each feature.
Designing for sustainability was as important as designing for aesthetics.
The diagram shown here reflects a working version of the information architecture used during scope definition. It evolved through several iterations as priorities were refined and operational constraints became clearer.
Iterative Wireframing
During early discussions, one proposed direction was to display the full archive of 100+ titles directly on the homepage to showcase the Club’s history.
Through iterative wireframe exploration, we tested multiple layout approaches: grid density, grouping logic, visual hierarchy, and seasonal segmentation. These explorations made it clear that placing the entire archive on the homepage would significantly increase cognitive load, disrupt content hierarchy, and reduce clarity for visitors.
By visualizing both options, we were able to compare trade-offs concretely and align on a more sustainable solution: dedicating a separate archive page while keeping the homepage focused and scannable.
The "comic read" went through nine structured revisions before reaching its final form.
Early explorations tested the feasibility of displaying the full reading archive on the homepage.
The resulting layouts demonstrated excessive vertical depth, diluted hierarchy, and reduced scannability.
Final Design
The final interface balances clarity, editorial sustainability, and visual continuity with the Club’s cultural mission.
These are key screens from the live platform (February 2026), illustrating how the design decisions discussed above translated into a cohesive and maintainable experience.
Brand Extension
Extending the experience beyond the website
To reinforce the Club BD ADDA identity beyond the website, I designed a branded bookmark distributed with each book. This low-cost physical touchpoint supported community engagement and ensured visual continuity between the club’s in-person and digital experiences.
Post Launch
Anticipating long-term maintenance in volunteer-run environments
The initial product vision included the creation of a dedicated page for each graphic novel presented during the Club BD ADDA quarterly Zoom sessions. With four titles featured per session, this approach required preparing four pages presenting the comic or graphic novel, the author(s), their biographies, and relevant multimedia content, similar to a “product page” experience.
From the early discussions, I flagged that these pages would introduce a significant editorial workload. I recommended continuing to use the existing Google Slides presentations. The team nevertheless chose to proceed with the page-based model. I therefore designed a reusable page template and implemented the first four pages for the upcoming session.
After two quarterly updates, stakeholders reported that these comic presentation pages updates were more workload than initially anticipated. The organization shifted toward their previous solution.
Adapting Information hierarchy for real usage patterns
Following the stakeholder feedback, I was given the opportunity to redesign the existing Member page. We simplified the structure to reduce update effort and realigned the hierarchy around the natural flow of online meetings and member needs.
This example reinforces the importance of aligning feature scope with real editorial capacity.
Evolving the structure based on real usage and editorial capacity
Member Page: Launch Version
Member Page: After Two Quarters of Use
Establishing Sustainable QA Workflows
Club BDDA’s volunteer team performed quarterly content updates, which I systematically reviewed to ensure quality and consistency. These reviews included functional validation of key user flows (including the contact form and member access) to ensure the site remained fully operational.
I identified consistency risks and the need for a more structured approach to introducing quality assurance (QA). Building on my prior experiences with manual QA processes, I established a structured QA checklist and conducted recurring reviews covering responsive behavior, accessibility, performance, and functional integrity.
This process significantly reduced regression risk across quarterly content updates and helped preserve design and content consistency as the site evolved.
Excerpt from the last structured QA checklist used to monitor cross-device consistency and content quality across quarterly updates.
Conclusion
This project reinforced a principle central to my practice: digital products are built not only for users, but also for the teams who maintain them.
This experience strengthened my belief that product design is about creating systems that support people, and it confirmed my interest in mission-driven, community-focused work.
The launch of the platform contributed to increased visibility within the Bay Area French-speaking community, including coverage in MercisF.
⁂
Currently open to the right opportunity.
© 2026 Stephanie Lesperance
Original illustration by Leni Kauffman