Rebrand and redesign of JFS Houston's website
JFS Houston ( JFS ) is an established non-profit that relied on 8+ websites to educate users about their programming and services. Their primary website was outdated, difficult to navigate, and did not communicate the quality of social/clinical services that they provided.
- This project kicked off one week after the city of Houston announced a Stay Home, Work Safe order due to COVID-19. Both teams worked remotely throughout the entire project
- The project scope was limited. I was to design 12 responsive web templates that address the needs 3 organizations, 2 websites, and 9 audience-types
- We followed WCAG 2.0 principles and guidelines in design and development, to ensure JFS's site is inclusive to all of its different clients
Our project goal was to create a web platform that scales with the organization, positions JFS as a welcoming, quality service provider and improves the overall user experience for all audiences. Our challenge was to combine merge 5 of the websites into a single platform. As the lead designer, I designed 12 responsive web templates that address the needs of 3 organizations (JFS Houston,Houston Jewish Family Foundation, and Reelabilities Houston), 9 audience types, and spanned 2 websites.
We worked in bi-weekly sprints to move through each phase of the project. The project kicked off in March 2020, one week after the city of Houston announced a Stay Home, Work Safe order due to COVID-19. Both teams worked remotely throughout the entire project.
The two websites launched one week before the 2020 winter holiday, in time for the 2021 ReelAbilities festival promotion schedule.
The JFS website hosts information about multiple programs and services, event information, and many many resources; the site has exceeded 350 pages since launch. Comparing the web analytics 3 months before and after launch, the website now averages 170 visitors a day. Before launch, the original website averaged no more than 150 visitors a month.
- 622% increase in visitors since launch
- 756.8% increase in "Donate" views
- The website is a finalist in the Non-Profit Category of the 2021 AMA Houston Awards
At the onset of the project, it was clear that JFS would rely on us to help prioritize the goals of their many stakeholders. Throughout the project, we refined how we presented our work and recommendations.
We conducted 15 individual and group interviews with executives, staff, clients, and board members to understand the organization holistically. Learning of the agency's history of adjusting its services offerings and serving as a local emergency responder, the new website had to be flexible enough to expand and evolve with JFS.
We conducted almost all of our interviews in the first three weeks of the project. We learned how JFS facilitates its services, its plans, and we captured individual needs for the future website.
We shared over 40 design elements with our stakeholders including many board members we interviewed. We used this phrase to introduce some initial design recommendations such as a mega-navigation and a content-focused hero.
Informed by our stakeholder interviews and previous meetings, the strategist organized the goals, responsibilities, pain points, and needs of all prospective personas. We documented 9 primary audiences.
The persona phase helped the strategist and I employ the same language and understanding of the target audiences that the website and new brand would be serving. Because JFS applies to grants as a profit, our client utilized the persona sprint to document the granular needs, roles, responsibilities, needs of 35 unique personas to inform future applications.
- Prospective Clients
- Current Clients ( 8-types )
- Prospective and current donors
- Partners and Sponsors
- Community and Business Leaders
- Event Attendees
- Media Member
Using our initial site audit and insights gathered, I organized a high-level structure of the two websites' pages. This helped me visualize page hierarchy and group page type so I could define each template's purpose. We collaborated closely with our client over 3 weeks to iterate and finalize our plan. We learned the site design would need to be modular.
With a visual sitemap, I was able to define the content structure of the 12 templates. The challenge was to restructure the services pages because JFS had recently reorganized their service departments before this project kickoff and was still determining how they might present these services to the public.
Our stakeholders did not want to approve our content architecture documentation without seeing wireframes as they struggling to visualize the templates from a perspective. To gain approval on the sitemap and the strategy document, we provided initial wireframes of the homepage.
The project limited the website to 12 unique page designs across 5 departments, 3 organizations, and 2 websites. Below are the 12 template types:
- Landing Page
- Program Details ( "catch-all page" )
- Dynamic Content Landing Page
- Event Details
- News Post ( "catch-all page 2" )
- People page
- Impact / Financials
- Signup form pages
- Search / Search Results
We completed four sprints in the design phase, I created, iterated, and presented on 4 templates at a time over a 2 and half week sprint.
I designed 4 high-impact templates during the wireframe sprint. The client had begun writing content for the new site, during this sprint, we iterated on high-level design solutions as new use-cases emerged.
The wireframe sprint ensured that the client and I could focus on high-level design solutions without the distraction of colors and images. When I had extra downtime, I captured ideas and blocked out the layouts of the other templates. The wireframe phase was successful from my perspective because the high-fi sprint incorporated the majority of the solutions established during this time. However, our client was overwhelmed with the pace of the project and struggled to deliver timely feedback so both teams could hit the launch date.
With the new logo in place, I defined the visual style of the website and planned out the CMS structure. During the 4 hi-fi sprints, I continuously updated the design library of 40+ responsive components.
As the sole designer of all things web, I had to keep pace with the many revisions, what-if questions, additional recommendations, and documentation. I created 2-5 static mockup examples per template to demonstrate our modular design in action at two breakpoints.
The primary goal of the website was to improve the overall user experience for each audience type and increasing the total volume of donations. We knew this site would push Webflow to the limits, my challenge was designing modular components per template to give Editors as much control/flexibility as possible. Our client was deep in content writing during this sprint, so our list of technical features grew during this phase.
Between annotated mockups, word-docs and, late-night slack messages the Webflow Designer and I built out all collections and templates in 10 weeks.
The JFS site would rely on custom code and multi-reference logic to support this massive, modular website. We did not initially plan to out-source the development so I was not prepared to hand off annotated files. To keep our Webflow designer on schedule I had to straddle CMS setup while wrapping up the final hi-fi design sprint.
I worked with the solutions architect and development teams to implement several custom features such as the event calendar, recurring events, on-page collection filtering, and mega-navigation interactivity.
During the content migration phase, some templates and collections required change and I had to restructure some of our CMS-driven pages. I completed the final QA sweep alongside our clients and their stakeholder, we implemented UserSnap to manage tickets and other feedback. My team was on standby to launch the site in early to mid-December.
We launched both the new JFS Houston and ReelAbilities Houston websites right before the 2020 winter holiday. The JFS website is a finalist in the Non-Profit Category of the 2021 AMA Houston Awards.
Comparing the web-analytics a 3 months prior and after launch, we saw
- 622% increase in visitors since launch
- 756.8% increase in "Donate" views
- a 20% increase in average session duration, with regular and organic search users spending the most time on the site.
Whew. This project presented challenges at all angles. design, development, planning and other professional challenges.
- 12 responsive, modular web-page templates
- 2-5 static mockup examples per template to demonstrate modularity
- Responsive, accessible, CMS powered Webflow site
- Style guide and photo size guidelines of JFS Houston and Reelabilities colors and web-styles
- Webflow Editor training & instructions