Riverbend Community Center: Rebuilding Navigation Around Real Tasks
Riverbend Community Center serves about 12,000 residents with a $40,000 annual program budget. Its site was built in 2011 on a table-based layout and has not been restructured since. Analytics for the last 90 days show 71% of sessions on mobile, a 48-second average session, and a 63% bounce rate on the Programs page. A resident survey (n=310) ranks the top tasks as: find a class schedule and register (58%), rent a room (21%), and donate (9%). The current main navigation has nine top-level items, one of which - About Us - expands to 14 sub-items covering history, board minutes, staff bios, and a 2016 strategic plan. The board has approved a six-week redesign and wants a full-width autoplay hero video on the home page. One part-time staffer will maintain the site afterward. Roughly 40% of the audience is over 60, and many use Android phones more than three years old.
1. Using the survey and analytics evidence, which two information-architecture changes would most improve task completion, and what should happen to the 14 About Us sub-items? Explain the trade-offs.
Read the worked answer
Change 1 - Rename and reorder the top level around tasks. Nine top-level items on a phone forces scrolling and gives the two highest-value tasks no prominence. Collapse to five or six labels phrased as user goals: Classes & Registration, Rent a Space, Get Involved, About, Contact. The 58% top task should sit first, not share weight with a 9% task like donating.
Change 2 - Surface the schedule on the home page. With a 48-second average session, users are not exploring; they are scanning. A short list of upcoming classes plus one persistent Register button converts the top task into a single tap. Nothing deeper than two taps from home.
The About Us block: keep the content, demote it. Board minutes are a public record, so they stay, but they belong on a Documents or Archive page linked from the footer, not under a hover menu. History and staff can live on one About page with in-page anchors. The 2016 strategic plan should be dated or archived.
Trade-off: breadth versus depth. Deep nesting hides content on touch screens, but deleting governance content creates compliance problems later. The compromise is task-first navigation with an archive path for the long tail. Avoid hover-dependent mega-menus, since older Android devices and users over 60 handle tap-accordions better. Validate with a five-user task test before launch.
2. The board wants a full-width autoplay hero video on the home page. How should you respond, and what measurable criteria would you attach to whatever you recommend?
Read the worked answer
Start by separating the stated request from the underlying goal. 'A modern look' is the goal; autoplay video is one tactic, and a poor one for this audience.
Risks in this specific context: roughly 40% of visitors are over 60 and many use low-end Android phones, so a hero video means data charges, slow first render on mobile networks, and motion that can distract or cause discomfort. WCAG requires a mechanism to pause, stop, or hide any moving content that runs longer than five seconds and starts automatically; respecting prefers-reduced-motion is also expected. A single part-time staffer must also maintain the video as seasons change.
Recommendation: decline autoplay, and put a high-quality poster image with a short headline and a Register call-to-action in that space instead. If the board insists on video, make it click-to-play, muted, captioned, under roughly 2 MB, with a poster frame that renders the page correctly before any video code loads.
Measurable criteria: Largest Contentful Paint under 2.5 seconds on throttled 4G; home page transfer under 1 MB; no increase in mobile bounce; task success in usability testing equal to or better than the static version. Present a side-by-side prototype rather than an argument - the numbers will settle it.
3. Name three concrete accessibility decisions you would make for an audience where many users are over 60, and justify each against a specific failure the current site likely has.
Read the worked answer
1. Body text at 18px minimum, line height 1.5, contrast at least 4.5:1 (aim for 7:1). Legacy table layouts from 2011 typically set 12–13px text with light gray on white. Both reduce reading speed for older eyes and fail contrast minimums. Larger type and stronger contrast cost nothing and lift comprehension across the whole audience, not just seniors.
2. Tap targets of at least 44 by 44 CSS pixels with generous spacing. Old designs used 16px inline links packed into dense rows; on touch screens this produces mis-taps and back-button frustration. This matters more than any visual polish on the page.
3. No interaction that depends on hover or on color alone. Dropdown menus that open on hover are unreachable on touch, and 'blue text means a link' fails for color-vision deficiencies. Use underline styling on links, visible focus outlines, and accordions that respond to tap and keyboard.
Supporting detail worth including: form fields need persistent labels above the input rather than placeholder text, which disappears as soon as typing begins. Every one of these should be checked with keyboard-only navigation at 200% zoom before launch. The pattern across all three is that the fixes are structural and cheap, while the failures are exactly what a table-based 2011 site tends to produce.