h2. Part 2 of 2
“Part 1”:/article/biola-undergrad-1 was published last week.
* _MM:_
You describe your role as “web developer and information architect” including “ColdFusion, Javascript, HTML templates….” Can you discuss the project management process, and your IA(Information Architecture) choices? Did you use any personas or wireframes?
* _DL:_
Organizing the content can often be tricky, and there’s been a number of different structures over the last several years. We knew we needed to clean things up, and we wanted to group the content together more overall. In the collegiate world, there are a lot of phrases that maybe aren’t the best but are commonplace and expected, so we did a lot of research to see what kind of liberties we could get away with. We ended up with two wireframes, and conducted some focus groups and user testing to see what was most successful.
* _MM:_
Tell us about “Biola red.”
* _DL:_
Pantone #185. “Biola’s”:http://biola.edu/ colors are red and white, so our web sites need to feature that color in some capacity. Usually it’s just in the mark, but on the “Undergrad site”:http://biola.edu/undergrad/ it’s used more prominently.
* _MM:_
One of “Godbit’s”:http://godbit.com/ premiere interviewers, “Yannick Lyn Fatt”:http://www.godsporch.net/, had some questions for you on the “forum”:http://godbit.com/forum/:
bq. what was the inspiration for the design (also the print design since the website was based on that)? I’m guessing the fact that the University is in SoCal had something to do with it (correct me if I’m wrong) but the design is certainly unusual for a school website.
* _DL:_
Here’s Jessica Nelson on that:
bq.. The general concept behind the design was the idea of conversation. We wanted the students and parents to feel like the university was inviting them in to Biola’s culture. The morphing that occurs in a lot of the illustrations comes from the idea that Biola is a university whose faith is integrated into every major – and that the campus on the whole is very integrated. We wanted to communicate the community that exists here, and the crossover between majors
Over the course of the project we had a total of 5 people work on this. My Creative Director, two designers, an illustrator and myself. So each person brought something new to the table. Being located in Orange County really helped, we are always inspired by the surf culture. We wanted to have fun, and we figured that if we were having a blast—then the students that would visit the site and receive the view-book would have a lot of fun leafing through the book. Four out of the five that worked on it are alumni, so we had an easy time of figuring out how to communicate the environment these students would find themselves in. I’d say the inspiration came from our memories of what it was like to go there.
Everything had to do with Biola’s location. Every element we designed was done for the kids in SoCal—or the ones who wanted to be. We added such ridiculous detail so that they would continue to come back for more. I remember having to convince my Creative Director that roller-skating was in, and that by the time this thing launched college age kids would be skating in flocks on the weekend.
p. * _YL:_
bq. Also what was the message/feeling that you wanted people to get from the design of the website. Did the principal and other administrators give you and your team free reign over the design? Did they play a role in giving you ideas for the design?
* _DL:_
I’ll let Brian Miller, who was the project manager for the entire Biola Undergrad campaign, answer that one:
bq.. When students visit our website or read our ads or print materials we want them to experience a high level of quality, professionalism and clear communication that leaves the distinct impression that Biola is a university focused on its mission to equip men and women to impact the world for the Lord Jesus Christ. The design style itself is not intended to be the focus, but rather the backdrop to the message we want to communicate. We believe the design and layout will serve to draw people in and set a background tone that enhances a curious student’s experience with Biola as they explore.
Biola administration has been very supportive of our endeavors to create quality marketing materials. They have empowered us to make decisions that are in the best interest of the university and we are very thankful for that.
p. !/images/100.jpg(Biola undergrad redesign – photo illustration)!
* _MM:_
Your “blog”:http://breadcrumbs.davejlowe.com/archive/80/project-launch-biola-undergrad mentioned the lack of “an elegant ColdFusion solution”, that you “needed something new”:
bq. following the MVC(Model View Controller)/MTV(Model Template View) as much as I could (it’s the “Django”:http://www.djangoproject.com/ influence on me) and the custom tag I designed merely includes two files. The first is something like a Django view except of course it doesn’t determine which template will be called; it just sets up some variables that the template will have access to. The second is the base template that the content page is extending.
So, is that a custom CMS(content management system), or what exactly in the backend?
* _DL:_
It’s not a full-fledged CMS because most of the content sit in html files on the server and are browsed to directly. That’s why it’s only marginally similar to Django templates. Pieces of content are managed by a ColdFusion solution I designed (a “personalization system” for lack of a better name). All the links in the footer and the counselor greetings and photos are from that system. Of course that makes it complicated when some of your content is in the file system and some is in a database. But when you’re dealing with a server that doesn’t have regex URL handling… well you do what you can.
* _MM:_
The “personalization system” sounds interesting, as a way of personalizing the site based on each person’s activity. You say “It’s currently only being used in a few places; one of the unfortunate realities is no one has a lot of time to sit and think about what’s possible.” Any thoughts on how it works and whether it can that be automated?
* _DL:_
It’s based on the information the visitor gives us as well as basic visit patterns, and on the concept of “goals” that the admissions staff wants each visitor to accomplish (which could be completing a form or just visiting a specific page). The value, or presence or absence, of any one of these bits of data can be leveraged to influence pretty much anything on the site.
For example, every feature on the home page could be adjusted to advertise events or content that is most likely appropriate from where you’re at in your research and interest in Biola. Or, every single student quote could be from students that are from a similar economic or cultural background. There’s a lot of potential. Ultimately, I think the system will need to be implemented in something like Django in order for that potential to be realized. Splitting up content between database and file system is a hindrance.
* _MM:_
Any specific challenges bringing the print design of the campaign to the web?
* _DL:_
One of the tougher challenges was keeping file size down. The many graphics and textures made that very difficult. In the end, it’s still a pretty hefty download but it could have been worse.
* _MM:_
I noticed the default blue+underline links; is that for accessibility purposes?
* _DL:_
One of our highest priorities was to make the information easy to find. The creative elements and illustrations are very important, but we wanted the content itself to be clean and readable, and links to be obvious. I think that’s why we didn’t stray far from the default blue.
* _MM:_
Elastic layout, very nice.
* _DL:_
Thanks! That was a feature I was very interested in adding. I created an earlier version of the core layout CSS(Cascading Style Sheet), and it used em-based dimensions so that the layout would enlarge or diminish based on the font size you had set. We quickly realized that sort of approach wasn’t best for our core audience, and Tim worked on implementing the elastic layout you see now. It’s one of my favorite elements, especially the banners at the tops of the main pages that adjust to the size change.
* _MM:_
Searching the site for “web design” yields zero results. Does Biola teach web design/development, and do they teach web standards?
* _DL:_
Unfortunately you’ve stumbled across a weakness there: it’s not a full-text search, just keyword-based and we’re missing a few keywords. Biola does in fact have an excellent art major BFA(Bachelor of Fine Arts) and a design emphasis. While traditionally much more print-oriented, the web courses are getting better.
A friend of mine has started teaching the classes and he’s very standards-aware and teaches CSS and valid XHTML. I had the opportunity to guest lecture last year, and will be involved again this year so I’m really looking forward to that. The interest in web design is growing, and I’m really hoping more students come into the program with the passion to learn and excel. Look for great things to come from Biola-trained web designers!
* _MM:_
Any recommendations for new web designers? How did you learn, and how should new web designers learn?
* _DL:_
The desire to learn is most important. Get your hands dirty. Learn how to write semantically-meaningful markup (you need good source material). Start playing around with as much CSS as you can. Don’t know what a specific property does? Find out! And get inspired by scouring the web for great designs. Figure out how they did what they did. Then start adding to your arsenal with things like DOM(Document Object Model) scripting and frameworks. The more you know about the bigger picture of web development, the better a designer you’ll be. Oh, and attend “Biola”:http://biola.edu/undergrad/. 😀
* _MM:_
Thanks again.
* _DL:_
Thank you, Michael, it’s been a pleasure. 🙂
_This article is © Montgomery 2007. Some rights released with a_ Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
_Also published at_ “Godbit”:http://godbit.com/article/dave-lowe-2.