Design Solutions
Information Architecture
Besides making the site responsive, we first spent a lot of time working on the information architecture of both the entire site and of the home page in particular. Progressive Disclosure was the rule of the day, especially since we had three personas to consider.
Most important was to make it clear who the intended user was of every page. Parents and Donors want to see what is there for Students, so calling that out does not discourage these personas from discovering the information. Students are still primary, and since they typically have Parents, Parent data appears before Donor data.
Figure 1: new Information Architecture
The Staff, Student Board, Opportunities, Israel, Photos, Calendar, and Donor Events pages employ a Progressive Disclosure pattern, giving shorter but pertinent blurbs of individual people, programs, or events and providing links for more details.
The pages under About and Support Us are pretty self-explanatory. Under Students, “Student Stories” is testimonials from both current students and a few alumni, since a current member of the Board of Directors suggested that showing that Students continue their Jewish Journey after leaving Hillel is a powerful message. Under Parents, “Message to Parents” is a special message from Hillel to parents about what they can do for their children in a nurturing, caring environment.
The Progressive Disclosure pattern is continued in the architecture of the Home page.
Figure 2: new Home page information architecture
Each of the green boxes in Figure 2 is a "strip” on the home page, in the order shown. The orange boxes are the pages that are linked to from each strip, providing the progressive disclosure.
Most important is what is going on right now in Hillel, so the topmost strip has a place for announcements and also a list of some upcoming events. Students’ enthusiasm for photos is next with links to multiple photo galleries of events. Then comes an abbreviated mission statement, making sure users are aware of it, but not taking up too much room so we can get to more interesting information, like the featured professional or educational opportunity. Finally, a small number of Student Stories are there, like testimonials on many business sites. There are many things here for all personas.
Figure 3 is the resulting top part of the home page, also showing the top navigation with an added Donate button, for prominence/importance. See live content at Hillel’s site.
Figure 3: new Home Page (top parts)
Figure 3 also shows an organization of the photos into multiple photo galleries, and there are even galleries for donor events. The main “Photo Galleries” page has a single line of example photos for each gallery, encouraging discovery of other galleries.
Figures 4 and 5 show other examples of the progressive disclosure pattern. Not only does the Our Team page have smaller blurbs, the information presented is actionable, since you can click the email addresses or phone numbers to engage, in addition to clicking the names or images for more details.
Figure 4: new Our Team page
Figure 5: new Professional/Education Opportunities page (was “Job Listings”)
Visual Style
Figures 3 to 5 show an expanded use of color and imagery across most pages of the new site. Some of this is just to make it feel more current, some to make it more engaging. And sometimes the pictures are really worth a thousand words. In Figure 5, an AIPAC logo would draw the eye far quicker than even top-level headings and certainly more than the blurbs.
The same is true about the new calendar treatments. In Figure 3, you can see images next to each image of the Upcoming Events. You can also see them in the full calendar in Figure 6.
It is easy to see a recurring or multi-day event this way, plus with appropriate images you know exactly what it is without reading (the well-known Jewish holidays in particular, like on the 9th or 21st in Figure 6). It also establishes a connection to when the event appears in the list on the home page.
An image only appears on a date if there is only a single event on that date. Otherwise, event text and start time appear with another level of detail available on hover/tap on the date. Another click/tap on a particular event brings the user to a full page of detail for the event.
Figure 6: new full Calendar
This concludes the redesign study of the Hillel of Broward and Palm Beach website. Implemented changes have been well received by Hillel, with staff already making their own updates, particularly to events and announcements. I will be following up to determine any change to student engagement with the website and Hillel.
Scott did his own research in order to make the site the best it could be. If you are looking to redesign your website, Up A Notch Design is the way to go.
-- Aly Masciale, Senior Operations and Development Associate, Hillel of Broward and Palm Beach