partial view of a new visual design for Bridge Family Center's home page

Project Overview: Bridge Family Center

Problem

By their own estimation, The Bridge Family Center’s website is “out of date” and “not very easy to use.” More specifically, they had not taking accessibility into account and made every link on their site visible at on nearly every page, an overwhelming experience.

My Role

I was the sole designer on this project, so I implemented all the solutions below, plus met with the client to gather requirements and answer questions afterward.

Constraints

• 10-20 hours for the audit
• 10-20 hours for the visual design

Solutions

• Perform a content audit
• Improve accessibility
• Improve the information architecture
• Freshen up the visual design

My Process

As I performed the content audit, I took screen shots and explained aspects of the site that might be improved. I included a total of 11 such slides in my report.

How I kept track of my project:
• Spreadsheet
for the content audit
• Screenshots with annotations
• Journaling to make sense of everything

the client's original design with annotations explaining what's wrong: Too many colors, low contrast text, unclear links.slide 2 of client's original site, with notes about how buttons look like banners, text is within images, links don't look like links.Slide 3 of client's original site, notes saying the contrast of footer is too low, links are multiple colors, banner is indistinguishable from button above.

Results

"Megan, wow!  This is incredible – thank you for arranging all of comments in such an easy way to follow. Greatly appreciate all the time and detail you put into this."
- Doreen

Original Sitemap

To keep track of the vast number of pages and how they referenced each other, I used Miro to create a site map and added my thoughts right on the slide.

site map of the original site, with 9 top level navigation pages, a web of pages linking to other pages in redundant ways.

New Sitemap

To show the information architecture I developed, I created a new site map, color coded for clarity. It has fewer nav bar links, drastically reduces multiple references to the same content, and combines several short pages into longer pages.

New site map with color coded tiers, 7 main pages linked in navigation, page headings outlined, subheadings and sub pages, only two cross links

Visual Design

For the visual design, I recommended simplifying the color scheme. The client agreed that it looked chaotic, but wanted to keep the "Bridge blue" and make sure it looked bright and not sanitized. I also simplified the header by separating the content into pages instead of complex dropdown navigation.

• No dropdowns, only pages
• Obvious calls to action, above the fold
• Simplified color scheme
• Featured stories are easy to distinguish

New home page design for bridge family center showing clear call to action buttons, and simplified color scheme.

Conclusion

"Thank you so much for creating this prototype. It feels a little weird to see all of our information presented in a different way but do like how much cleaner it looks."
- Doreen

The folks at The Bridge Family Center are currently looking into grants that will fund a total revamp of their website.

Images courtesy of The Bridge Family Center and Unsplash