overview
The Jewish Community Center is a meeting place for everyone of all backgrounds and ages. From fitness classes to the preschool, there are numerous programs to join. With the restructure of the organization, a new website needs to reflect the updates.
CHALLENGE
To restructure the hierarchy and navigation of the website as well as redesign the top three level landing page templates.
SOLUTION
I improved the navigation by consolidating the main level pages and therefore created more page-specific content and reduced the overall scrolling time. As programs continued to grow, this allowed for quicker access to find classes, programs, and resources, while also providing opportunities to cross-promote.
role
UX Designer
Client
Jewish Community Center
TOOLS
Adobe XD
research
EVALUATION
The website presented struggles for the both the user to navigate and find content and for me, as the web master, to determine the best placement of new or updated information due to the restricted editing capabilities. The limitations caused a lot of challenges as the organization and programs expanded overtime. Over the course of 6 months I documented all of the challenges I faced as a user and web master in order to ensure they would be addressed during the redesign.
COMPETITIVE ANALYSIS
We researched 30 other JCC and YMCA websites. Our team divided up the locations to review the navigation, design, and features of each website organized in a spreadsheet.
build
site map
The site map was restructured to highlight the three main “centers” the JCC offers: Fitness, Arts, and Youth. The level 1 pages of the main navigation was reduced from eight to five to simplify the content.
WIREFRAMES
I reworked the wireframes to maximize realty space on the page and create a stronger impact of programs and experiences offered by the J while improving the navigation for the user. A new template was added between Level 2 and 3 for a total for 4 levels which made the reduction of content in the nav bar possible and helped create a simplified structure.
LEVEL 1
I reduced the intro copy and removed elements in the first section. This allowed me to bring the thumbnail images up higher to have more priority. The larger images become more visually enticing and bring a focus to the programs with a brief description and CTA button. The thumbnail images at the bottom were the last section on the page; however, they were most important as they served as a secondary navigation and a click-through to the next level without having to access the nav bar.
The gallery was moved to the bottom and aligns more with the rest of the content on the page by increasing the size and adding a description. This gallery is added to every layout of each page.
LEVEL 2
The side nav bar was removed from all pages in order to give more room for the content. Cards for each program were added below the intro copy to access the next level of content.
LEVEL 3
I restructured level 3 to better organize the information by removing the side nav bar and grouping accordions into sections. The teaser at the bottom allows for cross promotion of programs in different centers. Level 4 will follow a similar to structure the original level 3. Because level 4 is used to display detailed information for only one specific program or event, it will not need multiple sections to break up content.
final designs
HANDOFF
I handed off my final wireframe designs to the vendor to create the changes. These mockups were designed and developed by Mission Media.
learnings
for the next redesign
Unfortunately, I missed a critical step in the beginning when I did not do a full audit of the website during the initial research and wireframing process. This resulted in forgetting that pages with a dedicated layout for specific content would not work with the new templates nor would the new style transfer to these pages. In the contract, these specific one-off pages were not included.
While it wasn’t ideal, we chose to pay for updates to pages with a higher priority based on content. The most important pages were reworked for functionality before the official launch. For the other pages, the header images and titles were redeveloped to match the style of the new templates after pushing the site live to prevent further delay. By not redesigning the full page, it saved money while still creating consistency throughout the site.
Moving forward for any redesign, I have learned to thoroughly review every page to ensure all pages and content are included in the process of the new design.