The Better Website Blog

May 03 2011

BrehmCenter.com: 180 Design Process

Posted by Chuck Norton | May 3rd, 2011
BrehmCenter.com: 180 Design Process

The Brehm Center is an emphasis program of  Fuller Theological Seminary who leads an age old dialogue on the correlation between art and faith. Their thoughtfulness when it comes to the way they communicate is encouraging, and one of 180’s primary roles was putting together a plan for how to introduce them to the virtual world.

Below is a glimpse of the design process 180 lead to create the new BrehmCenter.com website.

Note: This article only covers the BrehmCenter.com design process, which is the first part of a new website build. To read more the entire 180 process, continue here.

Research

The original challenge that needed to be overcome was that what the the Brehm Center’s does is potentially hard to communicate. The goal of the research phase was to walk away with 1) a more simplified way to describe what the BrehmCenter does, and 2) a way to engage with the target audience and give them a great site experience.

180 spent 4 weeks in research mode. With Brehm’s generous permission, you are free to  view some of the findings here:

  • Survey (Non Students)
  • Survey (Students + Alumni)
  • Focus Group
  • Creative Brief
  • Moodboards

    Next, in order to help us think more clearly about the mood we want the site to convey, we created simple moodboards. Separating aesthetic design from the content is extremely helpful (from the designer point of view) in allowing clients to articulate the more abstract emotional value they want the website to create for viewers. This is exactly what moodboards allow us to do.

    We created boards with colors, fonts, and imagery on palettes which you can view here:

  • Moodboards
  • Wireframes

    Wireframes are just what they sound like: a wire version of the website. There are no aesthetic design elements here, but just the basic content by itself. Here is the full document:

  • Wireframes

  • 180 decided to take a slightly controversial approach to the website content: less is more.

    By stripping the entrance page of everything except a single picture, we created a funnel for people’s eyes to focus on the 2 most important aspects of this (and most) home pages: what is this organization, and how can I move around?

    What our design team came up with is this:

    The hunch (backed up later by user testing) was: if people don’t have anything to click on, they will immediately start using the navigation. On the BrehmCenter.com home page, users will 1) read the tag line, 2) engage with the navigation.

    180 then dreamed up a navigation to not only house a large organization, but to include snippets of text explaining what the organization was about.

    Users will see tag lines describing each section of the website, and simultaneously read key words & language which gave users a quick feeling for what Brehm is all about.

    All within about 2-5 seconds, visitors see a beautiful (& clean) landing page, get used to navigating the website, and get a basic understanding of what the Brehm Center organization does.

    Frontend Design

    After all the above work, everyone involved in the project had a good idea of what the actual page designs might look like.

    Here is how the finished home page turned out:

    Here is a revised way to have online dialogue in the “Conversations” section:

    Here is what an online exhibit looks like:

    Here is what mobile visitors of the site see:

    And also very useful, here is a better ways for administrators to manage it all using in-page modal windows:

    180 was thrilled that the Brehm Center welcomed the 180 process, encouraging thoughtfulness & creativity more often than not. They proved that in fact they are leaders in their (unpublished) goal of encouraging artists to be their best!

    Please join the conversation at BrehmCenter.com, and let us know what you think!

    About the Author: Chuck Norton

    Comments (1)

    1. by Christopher says:

      Love this!  A perfect and concise overview of the 180 approach.  I love what you all are doing: making sites both appealing and effective!

    Commenting is not available in this channel entry.