Boys playing soccer on a warm afternoon.

ABCD Website Redesign

Image
ABCD Website Homepage Layouts-Desktop and Mobile

Arlington Boulevard Community Development Organization (ABCD) is a volunteer-run endeavor serving the local community. They provide after-school activities, training and language instruction, as well as community outreach partnering with local organizations and government agencies. To build greater community awareness of their mission and resources, their online presence needed enhancement and expansion.

To address the design challenge, a user-centric approach was employed to make the most of limited resources. This included special consideration to textual content, since the community ABCD serves often speaks little English, and the number of languages represented—as well as editorial support—would preclude effective multilingual content. For the authoring experience, the site also needed to be user-friendly for quick updating. On the technical side, the careful balancing of visual content and acceptable performance on limited-resource platforms using responsively served content would be required.

 

Image
Displays of ABCD Website on mobile devices showing different site features.

Mobile screens of ABCD Website, showing multiple content types and the mobile site menu.

 

Image
Screen displays of ABCD Website event calendar - default view, desktop and mobile.

Due to the large number of events held at ABCD, an alternative approach to calendar displays was devised. This shows the default view, with all events for a given month shown. Users are able to filter this based on selected parameters.

 

Image
Desktop screen displays of alternate calendar and single event for ABCD Website.

Alternate calendar display and featured event. In this calendar display, listings are shown in category tag color for easy visual association. In the featured event display, relevant event details, such as location, time, and registration requirements are shown in a clear and consistent manner. In addition, similar upcoming events are automatically displayed. For events that are part of a series, the other dates for the given time frame (calendar month by default) are shown, and link to these.

Image
Screen displays of ABCD Program listing and contact form popup.

Individual program display, and contact form popup. Since many users of ABCD services don't use email, alternate methods of contacting staff are shown by default. For those that need online support, a concise, user-friendly popup form is provided.

 

Image
ABCD Site Redesign Style Tile

Site design style tile showing page elements and experiential concepts to secure stakeholder buy-in.

 

Image
ABCD Website Redesign Information Architecture Tree.

Information architecture tree showing site structure and hierarchy. An essential tool for planning effective content strategy and user-centered site experiences.

 

Image
High-level user flow diagram for ABCD Website redesign.

High-level user flows, showing representative tasks for select proto personas. Due to budgetary constraints, dedicated user research was not possible, so approximations were utilized to build experiences to model.

 

Image
Detailed user flow diagram for ABCD Website redesign.

These user flows are carried further, into detailed interaction mapping based on tasks. Outlining this process helps stakeholders visualize possible sticking points and frustrations, and helps to inform content strategy.

Image
Content wireframe layouts of homepage with annotations.

Content wireframes for homepage—showing multiple layers. These help facilitate discussion of content strategy, as it relates to the overall user experience, by separating visual design elements from the underlying content and regions. This allows the discussion to focus on the underlying structure and overall strategy.