Advertisements

[michaelvanputten.com may earn compensation through affiliate links in this story]

‘Cultural Connections’ Website Redesign

The Homepage of the Cultural Connections Website Redesign

I had the opportunity to work with W.F. Santiago-Valles, Ph.D. and Yvette Hyter, Ph.D.⁠—two very talented and passionate professors⁠—to redesign cultureconnections.org.

The website is part of a second Fulbright-Hays Group Project Abroad Program Award the professors received to address gaps in the inclusivity of Michigan K-12 and higher education curricula.

Goals of the project

Our goals for the website redesign project included creation of a modern web design that was easy to navigate while including the flexibility for the overall design and layout to scale as needed as more modules and content were added in the future.

The look and feel was designed to be visually rich while enabling the color photography to boldly stand out. The photography for the site was captured by team members who visited Senegal, West Africa.

A new home page

When the redesigned website was launched the homepage included 27 links. In order to keep the interface neat and tidy, we arranged these links into three main areas:

  • A welcome section – which included a fun photo of an ornate, hand-painted Senegalese bus paired with some general welcome/intro text and a link to more information about the project
  • Four content/category panels – which were used to provide some visual and information hierarchy for 22 links selected to provide direct access to key areas/sections of the site
  • A footer utility navigation – which included links to the main sections of the site on every page within the site

Landing pages

A Sample Landing Page from the Cultural Connections Website Redesign

Landing page layout focused on presenting content first (meaning, photo and text for the subject/topic of the page is displayed immediately in the upper left region of the page, just below the masthead), section navigation second (a navigation tool along the right side of the page, and a jump navigation to move between main section of the entire site).

Overall, I liked how this worked out⁠—our implementation “felt right” as we conducted usability testing and evaluation: the visitor selects a section from the homepage, reads the content first, is able to focus on where they might want to go next, and proceed with their session.

In other design/layout options, visitors often have to evaluate pages in a convoluted way⁠—”is this the page I was looking for”, “is what I needed in the primary navigation”, “is what I wanted in the secondary navigation”.

With the layout we designed, the visitor winnows down to what they need from the home page using categorized panels, reads the content, can choose to explore the section in more detail using the section navigation tool, or jump between main sections of the site.

What we accomplished

With the time we budgeted, I think we really accomplished a lot:

  • An improved visual design
  • An optimized information architecture
  • More flexible layouts and templates⁠—that enable Santiago and Yvette to continue to add content and new sections over time
  • The use of web typography⁠—the only graphics in the site layout are photos on content pages, background fills for panels and navigation tools, and a gradient in the masthead (i.e., not graphic files to render headings, mastheads, logos, etc.)
  • Addition of significantly more content⁠—the original site included 85 pages, the redesign includes 179

Closing thoughts

The Homepage of the Original 2003 Cultural Connections Website

Every project has strengths and weaknesses. If you were to compare the redesign to the original 2003 Cultural Connections website, I think you would agree that the new site is an improvement that integrates new design trends, practices, and thoughtful solutions. I respectfully salute the original design for its many years of service.

While we were very effective in allocation of the budgeted hours for the project, I would have liked to spend a little more time including additional accessibility features/functionality, more layouts, additional polish on interface elements and HCI cues, consideration of how content might be presented to enable students to use the materials as well (the target audience for the current site is faculty, instructors, and staff), and providing content within the units/tools section itself in multiple formats (e.g., PDFs, editable assets like DOCs and PPTs). A project is never done. I always anticipate and feel excited about the next iteration of a project.

I am thankful for the opportunity to have worked with Santiago and Yvette–who are brilliant and passionate about their work. It was also fun to work in the capacity of web developer, graphic designer, writer/editor, project manager, etc. (like a mini, one-man agency).

Leave a Comment

Advertisements