Bringing the Foundation’s Story to Life
Our small team worked with the Barbara Bush Houston Literacy Foundation (BBHLF) to design and launch a microsite, using human-centered discovery and creative design to highlight a decade of impact.
Timeline
3 months
Role
Lead UX Designer
Team
1 UX Designer, 1 Visual Designer, 1 Creative Director
JUMP TO A SECTION:
Project Overview
The Challenge
In 2023, to commemorate its 10th anniversary, the Foundation partnered with us to design and launch a dynamic microsite showcasing its most significant achievements, contributions, and milestones.
The Goal
The organization planned to create an online microsite to capture their role in the community and to showcase real outcomes through quotes and impactful stories.
The Outcome
The microsite officially launched in Spring 2023. A few months later, the Foundation migrated their entire main website onto the new platform, effectively expanding the microsite into their primary website. Our redesigned site elevated the Foundation’s digital presence, and the intuitive page templates we developed empower their team to effortlessly manage and update content moving forward.
Design Process
Discovery
User Research
The goal of Discovery was to gain a comprehensive understanding of the Foundation’s goals with the microsite, the content that is available and should be included and to gather inspiration for layout and visual imagery. I was primarily in charge of meeting with organizations and stakeholders to begin to figure out the structure of the site while the Visual Designer worked on inspirational moodboards. I also delved into available Squarespace templates and functionality so we could hit the ground running with a solid foundation for the Design phase.
Stakeholder Interviews:
What content is important? What supporting materials are available for prioritized content?
Prior to conducting stakeholder interviews, I developed tailored moderator guides to ensure productive and insightful conversations with the different groups. Over the course of five days, I led 18 interviews with Corporate Partners, Literacy Partners, stakeholders, and beneficiaries. My objective was to gather perspectives on their experiences with the Foundation, uncover compelling stories, and identify key initiatives. These insights directly informed our decisions about which content to feature and how to structure the site for maximum impact.
During these interviews, I noticed common themes—such as the initiatives and milestones people mentioned most often, the ways the Foundation supported other organizations, and standout stories worth featuring. These insights helped me determine both the key content and begin to build the overall structure of the site.
Define
Synthesize & Align
The Definition phase focuses on synthesizing research findings and integrating existing knowledge to generate insights, make recommendations, and establish a strong foundation for successful design and development. For this phase, I analyzed the stakeholder interview notes to build out the information architecture for the site. Once approved by the Foundation, this structure would guide the creation of a content roadmap, outlining how to effectively add and organize content on the site.
Information Architecture (IA)
What content is important? What supporting materials are available for prioritized content?
After completing the interviews, I synthesized the transcripts to extract key quotes, uncover compelling stories, and identify common themes. This analysis revealed four primary themes:
Connector- Capability to Connect Others
The Foundation acts as a hub, bringing organizations together to collaborate and amplify community impact. Its involvement inspires enthusiasm and motivates others to participate.Community Partner- Consistently Shows Up
The Foundation provides meaningful support beyond financial contributions, building strong relationships and making recipients feel valued through its genuine commitment to the mission.Program Incubator- Develops Progrmas
The Foundation actively invests in and helps launch new programs, playing a key role in turning ideas into impactful, larger-scale initiatives.Literacy Champion
The Foundation leads Houston’s literacy efforts by raising awareness and guiding the community on key priorities to address the literacy crisis.
These four themes were identified as the primary (L1) landing pages for the future microsite. Under each theme, we recommended highlighting multiple related stories or programs, which would serve as secondary (L2) pages to further illustrate each theme. We delivered this proposed IA to the foundation and worked with them to come up with the final IA.
Design
Design & Build
In the design phase, we used our information architecture as a foundation to create wireframes, which helped define the website’s visual structure and layout.
Wireframes
Page Templates: Based on the proposed information architecture, I developed three reusable page templates for the microsite:
Homepage
The starting point of the site, clearly stating its purpose and emphasizing user pathways by providing routes to the L2 category pages.L2 – Category Landing Pages
These pages expand on the themes introduced on the homepage, connecting users to more detailed highlight (L3) pages.L3 – Highlight Pages
The final destination for users to explore the organization’s impact through in-depth content and various media.
Lo fidelity mockups of the page templates
I began by creating low-fidelity wireframes for each template, ensuring that each included dedicated sections to highlight key information. These wireframe options were presented to the client, allowing them to select the preferred direction.
Once the templates were selected, our Visual Designer applied the color palette and visual design elements to develop high-fidelity wireframes. These high-fidelity designs were then shared with the client for final approval on the overall look and feel.
I created low fidelity wireframe options for each template for the client to choose from.
Hi fidelity wireframes illustrating the final design prior to development in Squarespace
Style Guide & Implementation
Given the client’s limited experience with Squarespace, we used the wireframes as a blueprint to begin building the page templates directly on the platform. Squarespace’s “Saved Sections” feature allowed us to create and store reusable page templates for future use.
We built out each template within Squarespace and saved the key sections, enabling the client to easily create new pages that remain consistent with the microsite’s design. Additionally, we developed a comprehensive style guide to help the client maintain visual and structural consistency when building additional pages in the future.
Pages from the style guide we created for the Foundation.
Impact
“We’re very excited about launching this website, we really feel that it’s going to be a springboard for migrating our current website and really focusing on how we tell our story in a better way where we use social media, leverage our website and blog.”
— Julie Baker Finck, BBHLF CEO & President
“You and the rest of the team have been instrumental in bringing this project to fruition. We can’t thank you all enough. Very excited to share the site with you all once we go live!”
— Kevin Aguilar, BBHLF Marketing & Communications Manager
Lessons Learned
Presentation skills
I got better at presenting to clients, leading meetings, and helping them make design decisions.
Collaborating with clients
I gained more experience in collaborating closely with clients. This experience highlighted the importance of documenting questions or concerns to facilitate easier and more effective communication with clients.
Check out more work!
MyCity Business
Card Sort Prototyping Usability Tests
HHS Journey Map
Interviews Journey Mapping