Posts Tagged ‘Web Design’

Western Michigan University was established as a teachers college in 1903. Over the course of 54 years the college expanded its offering as an institution of higher learning, and what was once Western Michigan College officially became Western Michigan University in 1957 ¹. The college is locally and internationally recognized as one of the best public colleges in the state of Michigan, offering a wide array of undergraduate and graduate programs.

Having been born and raised within 40 miles of the University, I am certainly familiar with the impact the University has in our region. It has become one of the primary destinations of students, due to its proximity and quality as an institution; because of its size and importance, access to information concerning a given program, tuition, or college should be readily available to prospective and current students, but it appears that information is prohibitively difficult to find on their current website.

Initial Impressions

The organization of information is par for the course when it comes to university websites, but it could be improved. In terms of the user interface, it can be a little difficult to navigate the site easily (that is to say that the front page offers little in the way of jumping to certain actions that would be expected of prospective or current students), however it works quite well and is very simple in some regards; since you don’t want all options available all the time and in all possible combinations on the front page, this isn’t so bad.

The current Western Michigan University website.

The design is just about right for a site that was probably launched sometime around 2001 or so. It doesn’t look bad, just dated, and probably gives the impression of an organization that is not focused on technology–an impression that is neither true nor warranted.

My goal with this self-directed case-study is to see if I can improve the perception of the University on the web as a Top 100 university through the use of more modern design and typography to give the site some visual appeal and a more functional UI.

One Possible Solution

This is merely one possible solution among many. The color choices here may not appeal to many folks, but I am limited by the University’s colors, and chose one route that is unlikely to be selected; instead I hope that it would spur the appropriate people in a direction that would help to improve a site that needs a slight update.

The proposed Western Michigan University website.

Since colleges and universities are notorious for including a banner of various photographs of scenes in and around campus, I wanted to expand on that device and integrate that kind of imagery into a header that would highlight some aspect of the University. The photo and information would then rotate through a progression of different photos and text automatically, but could be navigated by a user if desired.

Below this section I wanted to ensure that certain areas were highlighted and organized in such a way as enable users to find these important sections quickly and easily. I specifically chose a few profiles to design for.

1. For the prospective student researching institutions to attend; they may wish to know what undergraduate or graduate programs are offer, how much it will cost, and how to apply. Additionally, they may be interested in athletics or other extra-curriculars.
2. For the prospective student interested in research opportunities at the university
3. And then for the combined profiles of current students and alumni.

Using these profiles, I organized the homepage in a way that might cater to each one of them.

Perhaps the decisions here won’t work, but it is a good place to get started. WMU, take a look and consider the possibilities.

I kind of set out to write a scathing little entry here about the ‘trend’ to shut off or not include comments in a few recent redesigns around the design community. A couple of big name folks have decided to go down this road, and sure enough a few of the smaller players followed soon after, and this sort of follow-the-leader game bothers me–as it always has. It looks like a trend to me.

So, not too long ago I asked myself, “what purpose do blogs serve on the web, if not as a place to engender and encourage conversation?” Isn’t this what the medium has become, and isn’t this it’s purpose? I’m not entirely sure how to answer this question–my own notebook here isn’t a bastion of discussion so much as it is a one way soap box–but there are many who have decided it is no longer important to maintain the debate on their own site. And now that I’ve let this thought stew, I can’t blame them.

If you operate a site that receives substantial traffic volumes it can become more of a chore than it is worth to moderate and maintain comments, and so a few of these folks have turned to encouraging the use of Twitter, Facebook, or a reader’s own blog, to continue the discussion. This is perfect, except that a disconnect can exist between the content, author, and material being discussed.

And I get why people would want to utilize social tools for encouraging discussion. Any one of these formats is better suited to the purpose of getting a community involved around discussing various topics. Frankly, they’re much better than blogs, despite the disconnect I cited a paragraph ago.

You see those of you who have not been working on the web in the past fifteen years might not know, but blogs have advanced a great deal over time, adding a wide range of functions and becoming outright CMS’s in some cases, but in researching and thinking about this entry, I have to ask myself if their original use was bastardized to fit a need that wasn’t met at the time?

Blogs are essentially online journals; a place to fill the diminishing role of analog pen and paper, where one could write one’s thoughts in an environment they were more likely to be involved in. Creating a social environment around this seemingly simple use is tricky, particularly when the traffic volume increases exponentially–but it’s all we had until someone took the need and created a product that fit a community participation model better than blog software and commenting models ever could.

In my situation, that is in a low traffic one, this sort of thinking doesn’t have to apply as I rarely see a comment come across my in box. I have very little to moderate, or discuss, which begs the question, who am I even talking to right now? Myself perhaps? But, would my site be better served by eliminating comments altogether? Would it give the appearance of being more widely trafficked if I didn’t reveal that my site is rarely commented on, thus appearing rarely visited? That’s intellectually dishonest thinking, but that doesn’t mean keeping comments is the right move.

I’ll keep comments open for the time being, because I still like the model for my purposes, but what say you fine reader? Does this eliminate anything in your mind, or could you care even less about this now than you did when you didn’t even think about it?

I’ve been working on a format for my portfolio for a long time now–about six months in fact. But coming up with a way to showcase your own work is kind of tough in an own-worst-critic sort of way. At the moment I’m in the process of getting the details and design together, with the former being the most difficult.

In the past I put together a custom portfolio management app; it was crude and poorly programmed, but it got my feet wet in working on that sort of thing in php and mysql, and has launched me onto many experimental ideas. But it became a bear to manage as it was built with one design in mind, and when I moved on to others I had to adapt my site for that format. Not ideal in the least.

Most recently I put together a small manually built portfolio. It showcases a few pieces, and that’s about it. Not very impressive, but minimally invasive.

At this time, I’ve chosen to work with a second WordPress install to run my portfolio. This will allow me to categorize and tag my work as I add it to the portfolio, managing the work in a way that I’ve never really done in the past. Hopefully I get an opportunity to launch it soon, but in the meantime, take a look at my current portfolio.

Lake Michigan College is a relatively small and old community college located in beautiful Southwest Michigan. Founded in the period following the second world war, it has served to prepare individuals for the eventual transition to a four year institution, technical training, or for the completion of several different degree paths. It has become an integral part of the area’s success in many ways, mainly because of the pool of trained workers it provides local business.

For this reason, it is important to ensure the public can access information about opportunities at the college. In some ways they’ve worked towards this goal, but they can do better.

I’ve been a student at Lake Michigan College in the past and at the time found the website to be very frustrating to use as as a resource; this is perhaps a little less true now than when I attended, however, judging by my explorations of the site, the experience has only improved marginally in that the IA is a bit troublesome and the overall experience is a bit overwhelming visually.

LMC Web Site as of 3/24/2010

My First Observations

The current site is a bit of a mystery to me. It appears to be run on the Joomla CMS, which in my mind is perhaps a little strange for a college of this size, though I can understand the appeal of open source (hello WordPress!); but what gets me is the URL structure of the site. You end up with a very long query string on the end, e.g. index.php?id=3342&Itemid=13. This creates a bit of a mess in terms of SEO, though their interests may be focused primarily on the front page. I find it hard to believe that they wouldn’t be interested in such a small but crucial part of their overall SEO strategy. From my small bit of research, it appears that enabling search engine friendly URLs in Joomla is relatively simple, though perhaps their server capabilities prevent it.

The front page focus is pretty evident when you browse the site, as EVERYTHING is located on the front page, gladly not all shoved “above the fold.” This might not be as much of a problem, but the various elements on this page have no evident unified structure or design to speak of. This is a bit chaotic, and can overwhelm the user with choice. It really is unnecessarily busy. In an organization like this, there are probably many competing factors going into the design decisions, though a more organized approach would help to increase ease of use for students.

Lastly, and this is really the part I like best, the drop down menus have markedly improved from the version preceding it, though this menu is not without its faults. The drop down menus on the site are a bit overwhelming in terms of how much choice an individual has, and in some cases choices are duplicated across a few different drop downs. While this structure has served to make it easier in relation to previous versions, the IA could use a great deal of work in order to simplify things for users.

Possible Solutions

First and foremost, I’m really only proposing one possible solution of many. I wanted to capture what makes LMC great for this community, and remind folks that it is an affordable institution, close to home, ready to get you the training you need.

To do that, I wanted to update the logo–but only slightly. Perhaps giving it just a little refinement in terms of type treatment, and in process ensuring any updates I made remained true to the college’s current identity. In a lot of ways that identity has a great deal of traction around here, and it would be a mistake to ignore that.

Current Logo on the left, my proposed update on the right.

My first decision was to simplify the logo mark as much as possible while retaining it’s character. This was relatively easy to accomplish as I eliminated the border surrounding the mark, ensuring only the most important aspects of it remained. To my eye, this cleaned it up significantly.

My second decision was to refine the type; I’m not entirely sure what the typeface is for “Lake Michigan,” but it appears to be warped out of it’s designed ratios. This isn’t a particularly good practice as it can hinder legibility. In this case, it might not, but to get a good handle on its subtleties I needed to use a typeface I was mildly familiar with. I chose Jenson as an appropriate substitution for the serif and retained the small caps format, albeit a little more exaggerated. I wanted to set “College” apart, as it seems to be of secondary consideration in the overall scheme. I chose a sans-serif face, Futura, that would add a bit of distinction and would be appropriate to carry over into the rest of the web site.

Overall, the quality isn’t there quite yet, but the direction is obvious. A more refined logo mark and type treatment could go a long way towards polishing the college’s image. My ideas here are only a beginning, a possible direction, but I would like to see the institution refine an already well-known local brand.

The New Web Site

As discussed earlier, the current site is a bit of a mess, and my whole approach was designed to refine it and make things simpler for the user. After doing some studying of the current site I came up with a rough structure that I thought would help to address the needs of future and current students a little bit better by paring down some of the menu bloat that was evident before. Also, I wanted to clean up the front page in general, as there were a lot of different elements that served as distraction rather than as useful information. My focus in this redesign is to make it easier for prospective and current students to navigate the site and find what they’re looking for.

The proposed new site design. See full size. See portfolio entry.

There was a lot happening in the current site that helped to focus attention away from primary content. Colors were one of those distractions in my view. There was no real coherence to the color decisions that were made and their actual branding materials, something a casual reader or browser might not be aware of. There is a great deal of red throughout their printed materials; in fact, school colors are red and gray, so color decisions were pretty simple. I decided to limit colors on the site for this rough mockup to red, gray, and black. Hopefully this will help to keep one’s attention on relevant information and aid user’s in deciphering the interface a bit better. And, more importantly, keeping a coherent branded message across all mediums.

Additionally, I wanted to re-purpose the, what I’ll call, pictographic highlight at the top of the site. Currently it’s a an image rotator, with no real purpose in terms of what it provides the user, yet it takes up a rather large portion of the screen. In order to take advantage of an element that could provide great photography, but also be useful, I decided it would be the perfect way to highlight some aspect of the campus that might interest a prospective student.

Conclusion

Overall the mockup is a solution designed to aid in the navigation of the site, create a more obvious information hierarchy, and hopefully address some of the underlying problems with the current site.

This isn’t an end all approach, but one solution of many based on my understanding of the needs of the possible users of this site. The aim was to improve upon, rather than to prove something about, the inadequacies of the current site; hopefully this helped to address them in some small way, and ultimately will get you thinking about the possibilities of a well planned site design.

I wrote a post some months back discussing a tool I put together that would generate numbers for a lottery, as well as analyze some past winning numbers to determine patterns.* Well, that last part didn’t really pan out, as I stopped updating the number list after a month.

I figured if I was going to continue providing that tool for use, I should rid it of that bloated bit of analysis and make the number generation a little bit more seamless.

My project, Numb3rs & Nothing Else, is now ready for your entertainment.* Number generation is submitted through an Ajax call, making the process a little less jarring, and the results are toggled into view.

Numb3rs & Nothing Else

In addition to that change, I’ve completely eliminated any analysis, as the results were just plain muddying up the mini-app with unnecessary data, I’m now running the css through a custom minification script, the site utilizes minify for javascript, and I’ve implemented gzip compression across the board.

Not that this app receives much traffic or anything, but this is one of those “best practices” things. I’ve implemented it on this website, as well as several others I operate, and YSlow seems to like it. I’ve noticed slight performance gains so far. Nothing to complain about.

Anyway, this is among one of the many little projects I’ve put together for training purposes, so for what it’s worth, enjoy.

Typekit is a service designed to meet the changing typeface needs of the modern web and, in their words, “is the easiest way to get real fonts on your website.” In short, Typekit allows you to use a wide range of hosted typefaces on your site for a reasonable price. Select typefaces based on your needs, determine your selectors, and attach a little javascript to the <head> of your document and you’re set.

I’ve eschewed its use on my personal site for a while, but recently decided to give the trial account another run–you’ll notice the Typekit badge docked to the bottom of the page, indicating that I’m freeloading the system until I decide whether or not to utilize the service on a paying basis–in order to determine its usefulness for me. What are my needs here?

I would certainly like to use a typeface that can be seen uniformly by all users, and this definitely provides the necessary functionality, but I will have to be careful in the choices I make; there are a wide array of font families to choose from, and you’re apt to go wild when first given access to such variety. It is a variety the likes of which have never been seen before on this here web. At the moment I’ve chosen Droid Serif made by Google Android, in all 4 weights and styles for the body copy.

I’m using both Typekit and Cufon to include non-standard typefaces, but would like to eliminate one of the two at some point, and I would prefer to eliminate Cufon because of text selection and licensing issues. I look forward to testing the Typekit service further.

Is it the start of a new year that often gets you thinking about what made you so disappointed with your efforts last year, or is it simple pessimism? Because I’ve found myself not only reinventing my branding and website in an effort to clean out the cob webs of creativity, but writing many posts relating to said motivation, writing, and goals for the year. Not that this is necessarily an unusual or unwanted thing; it serves to get me moving and motivated for the year. It helps give me a renewed sense of purpose in my design efforts, though I still have procrastination issues.¹

Believe me, most tasks I undertake are neither difficult, nor do they warrant such a reaction,² but I find myself a little terrified of starting something that could become overwhelming. In order to move past that nasty procrastination stage, and arrive at an appropriately acceptable result, I employ a couple of simple strategies that makes the given task a little less daunting.

Find a mitigating factor. In the case of getting projects started at work, I often need to find something that helps to lessen the impact of a larger task. In most circumstances that means finding a solution that makes the project easier to finish by speeding up the menial tasks; often I’ll see if there is a way to use php to my advantage by setting up a little script to run through a file, file names, or output some code that would have taken me quite some time to do manually. In other cases, I’ll take advantage of actions and batch processing in Photoshop in order to run through a long list of images in the shortest amount of time, with the least amount of manual processing possible.

Delegate tasks efficiently. Which tasks are of the need-to-do-now variety and which are less important? In a lot of cases I tend to block early sections of my day for the easy to do tasks in order to get them done, as well as to do something that requires less concentration in general, and devote the rest of the day to one or two of the more important projects on the docket. This doesn’t always work well and may not be what others recommend, but it helps me to work through tasks efficiently as well as to prepare myself mentally for the most important project; I do break this pattern if important projects are more urgent than usual. The reason I adopted this pattern was primarily as a way to deal with early morning meetings, as meetings would often interrupt my creative flow on the larger projects.³

Look on the bright side. You could always be doing something less fulfilling than what it is you are getting ready to start. I’ve not written much in the past year as far as short stories, editorials, poetry, and web design posts go, and this is because I lacked the motivation to do so. Why? Because I don’t always appreciate my skill and look pessimistically at my ideas. Don’t emulate that. Look for the good in your ideas, and you’ll be less likely to put them aside.

Make your goals public. It’s more difficult to slack off when others are holding you accountable, though it is easy to cheat that one if you’re doing it online only. Make the announcement on your blog, but make sure you’ve got a living person breathing down your neck to make sure you’re completing a task.

To summarize. You should find a mitigating factor, delegate tasks efficiently, look on the bright side, and make your goals public in order to make sure you get yourself motivated. As I said, these are simple things that I’ve done to motivate myself, and they work for me; which means, they may not work for you; which means…that you should think of things that help to motivate you, write about it, and act on it. Get to work, and hold yourself accountable to your goals.