Boyden & Youngblutt Website

I had multiple roles in the design and development of Boyden & Youngblutt’s new responsive site. I helped put together rationale behind undertaking the project highlighting shortcomings of the old site and additionally outlining opportunities for growth with a redesign. In addition I helped choose our development partner and served as the main liaison throughout the project.

I led B&Y’s digital team in determining strategic priorities such as increasing the efficiency of our inbound efforts, improving our blog and it’s capabilities, standardizing our work projects, and gaining additional SEO value through observing best practices. I was also responsible for information architecture, wireframing, and design for the entire site along with leading meetings with upper management to communicate progress and functionality.

B&Y Team:
Ian Mosher – Creative Director
Bartholomew Fish – Designer/Digital Strategist
Gavin Saxer – Social Media Specialist
Justin Branscomb – Integrated Strategist
Shardi Carroll – Copywriter

 

Client:
Andy Boyden – Principal/CCO
Jerry Youngblutt – Principal

Home Page & Full Screen Menu

One of the big changes that we introduced was a full-screen menu. We made the choice based on our desire to bring in a more predominant inbound channel, and project planner while still keeping the navigation clean. It also added an interactive element that we felt added some “delight” and for our market represented some innovation when compared to our competitors.

mobile-1170x820home6-1170x820home5-1170x820BY_WEB_FSMENU2-1170x820
Site Icons

I created a set of 20 icons for the site to communicate B&Y’s core business offering. A challenge that our team faced at the beginning of the project, was how could we take our Services/Capabilities list and make it useful, relevant and informative.

BrandThink – Company Blog

The blog was an area where we felt we could make a lot of improvements. On the old site, it had several limitations.

  1. It featured the most recent 10 posts, but when a new article was posted, the oldest post would disappear. There was not an easy way to find older posts,
  2. Urls were not friendly and were difficult to track
  3. Because of the format, articles had to be a shorter format and didn’t allow for video embeds, and had limits on the type and number of images that could be included in the post.
  4. Author attribution was limited to a text line, and there was not a “related posts” option
  5. Blog content in the past had revolved around primarily writing about digital trends, and did not consider other topics that may be relevant to our clients.
Services & Capabilities

Our solution for making B&Y’s services sections more dynamic and useful, was to create “contextual pages” that pulled relevant content from other areas of the site. Icons were created for each page to help add some visual interest and communicate aspects of the category.

Each contextual page also has an inbound page tailored to the category, to encourage interested parties to reach out for more information.

Since the blog is organized around the same four core categories, Research, Strategy, Design and Digital, there was an opportunity to pull in relevant posts on each Services page. The team also decided to use hashtags for each category that would not only provide additional context, but also drive what type of content we shared. We also brought in related works, which are projects where one category was particularly important. While most of B&Y’s projects have elements of all four services, we felt like it was another entry point to discover B&Y’s work.

Work Detail Page
The work pages for B&Y’s new site were the biggest challenge our team faced, for a number of reasons. Here are some of them:
  1. Flexibility When creating work pages in the past, we got around some limitations of the web by designing layouts as large images. Part of the challenge was how could we keep some flexibility in our layouts while staying within a responsive framework. It’s nearly impossible to have as much freedom as creating a layout in photoshop or indesign and being able to create any type of grid or arrangement. I started by going through every project page and identifying common design patterns and outliers (patterns that were only used 1-2 times).
  2. SEO Most of the text in work pages was images, and it was common to have several images laid out as one large image. This was something I advised that we get away from, as not only were we not observing best practices we also were losing seo value.
  3. Consistency Over time the work pages had morphed as new initiatives were created and old pages weren’t updated. In addition some projects had unique characteristics and content so they didn’t have a standard to draw from.

Working closely with our development team was crucial as we explored possible solutions. In the end we landed on a solution that was user-friendly on the back-end, and was optimized for mobile. Our talented team of developers helped craft a slider solution that degraded to mobile gracefully, using swipe gestures or touch to navigate. The image slider was a solution I proposed as a way to consolidate images that were of a similar orientation and present them in a mobile-friendly format. The final solution allowed users to add a media type, choose a layout option and include a title if applicable. From a user standpoint, no code was needed to make these choices, a user can easily re-arrange elements’ order and create layouts that were custom to the project’s needs.