All posts by

Portal Redesign Part 2: Some Web Design Challenges

by Jacob Johnson on March 2, 2012 in Portal, Web Design, Web Redesign with 1 Comment

It was like an old farmyard pig, starting to get a little ornery and a little rotund around the middle. We needed a solution to make it more appealing, and we knew it wasn’t bacon.

We were stuck with ‘ole Blink, Bethel’s community portal, but need to prettify it. So, we harkened back to one of the most memorable quotes spoken by a vice presidential candidate in 2008. We broke out the lipstick.

A new login screen

First, we tackled the login screen. The old one was filled all sorts of information like why Blink existed, how to get help, a link to a virtual tour, and the animated eye .gif that actually blinked. Oh, and there was also a little form you used to log in.

To cut down on distractions, we stripped away everything that wasn’t essential to the task at hand—logging in to Blink. That meant putting the login form front and center. Only 4 other links survived, and they took secondary spots on the page or moved to the footer.

A few CSS surprises

Then we moved on to the portal interface. Once we started to change the colors and typography, we found crazy CSS split into multiple stylesheets with tons of style overrides. What does that mean? A maintenance nightmare. And once we started to edit the CSS, we started poking around the HTML to see what we could change and—surprise!—we found tables.

So we were sitting on an antiquated, table-based HTML structure with CSS that was built on exploiting browser quirks, specifically in Internet Explorer.

To move forward, we decided to keep the base styles intact, strip out any additions that had accrued along the way, and put a reset.css stylesheet over the top to normalize things across browsers. Next we started applying Bethel-specific styles, like our university colors and typefaces. The result wasn’t great, and we ended up having to pull back on some of the additions to the CSS to make the management areas of Blink work properly. But we managed to unify all of Bethel’s styles into one document, making it easier to maintain in the long run.

This allowed us to better reflect Bethel’s branding and colors as well as unify the typography. We also added some CSS3 techniques to remove all images from the interface to speed page load times, aside from the logo and icons.

To create a more seamless navigation, we brought the main navigation forward in the design and used spacing and borders to make the channels look more discrete and the titles more prominent. This was all completed in the winter of ‘10-‘11 with the intention of launching summer of ‘11.

A delayed launch (which paid off)

Due to the unforeseen circumstances, the launch date was pushed back indefinitely. But little did we know, like so many good things that come with time, this would work in our favor. Responsive web design was gathering steam and by the time we resumed work, the techniques were solid enough to put to use.

We first tried to make the tables responsive. That didn’t work, because of course, that is not what tables are made for. Then we made the crazy decision to convert all of the tables to divs, which took lots of time, patience, and chocolate. At the 11th hour we did it, applying media queries to produce 3 breakpoints—phone, tablet, and desktop.

The site has gone from looking suspect on a desktop, to looking quite spiffy in all browsers, on tablets, and even on mobile devices. Good ‘ole Blink went from country bumpkin to Babe, Pig in the City.

If you’re not a Bethel community member, check out the new Blink using our guest login:

user: demo
password: demo

Portal Redesign Part 1: A New Look on an Old Blink

by Jacob Johnson on February 20, 2012 in Portal, Web Design, Web Redesign with No comments

Hey Bethel, you’ve probably noticed that your old friend Blink has a new look. We thought we’d take a minute to answer a few questions about what changed and why we made the update.

I see Blink is different. Did you do something? Why yes, thank you for noticing. We redesigned it.

Did you change everything? No. All of the content should be the same except for the login page. We simply took what was already there and spiffed it up a bit.

Are you going change the content? Yes. Certainly. We know that a lot of the content also needs refreshing. However, that will be an ongoing project slated to begin early next year.

Why the redesign? Well, the short story is that 2001 called and it wanted its website back. ^_^’ But on a more serious note, we wanted to clean up the interface and highlight navigation to hopefully make it easier for visitors to get to the content they want to see and to complete the tasks they’ve come to do.

Why now? We were hoping to launch it last summer, but the underlying technology was a little antiquated, which lengthened the project a bit. In our next post, we’ll share more about those challenges and how we worked through them.

Also, due to new developments that rolled out in the Internet over the last few months, we were able to make Blink more useful on mobile devices. This is something we’re really excited about.

Will it work on my phone or tablet? Hopefully, most of the content will be accessible on common devices, but we can’t make any full guarantees. And if you’re hitting the site from an older phone, all bets are off.

Where’s the blinking eye? To every thing there is a season.

I don’t love it. Can you change something? If you have comments or questions for the Web Services team, feel free to post your thoughts here.

Stay tuned for our next post when we’ll share about the technical challenges we worked through to give Blink its new look.

Design Decisions

by Jacob Johnson on December 11, 2009 in Web Redesign with No comments

A desire path is a path worn in the ground by people walking between paved surfaces. Usually just dirt, these paths often represent a shortcut. If you are familiar with Bethel University, you may have seen a few around campus, especially near the Freshman Hill area.

Park planners and architects have been known to visit new spaces after every snowfall to view newly created desire paths. When the snow covers the existing paths, people tread wherever they prefer.

When a person uses a website, they usually have a place they want to go. Rarely will users take the “sidewalk”, they will muddle around until they find their own way. In the web world, we don’t have the benefit of seeing the physical evidence, so we have to rely on feedback from users. We can also try to guess where desire paths may exist, and design the website accordingly.

Originally, we positioned what we’ve termed “task-based” navigation on the top row of the new site, as you can see in the screenshot. This included options like Login, Directory and Find People. We also positioned what we’ve termed “user-based” navigation in drop-down menu in the upper left corner that included options like Parents, Alumni and Prospective Students.

 

We decided to swap this location of the two menus in an attempt pave a potential desire path area. The drop-down menu has now become “Tools & Resources”, instead of “Information For”. Looking at the initial design, we wondered if we were creating too many paved areas that didn’t cut right to the content, but took a circuitous route instead. The decision was made in part because of the size of Bethel’s website. It has the potential to be daunting to first-time users and we determined that if would could get a user to quickly identify who they are, we could consistently and efficiently send them off in the right direction.

A parent, for example, may not know exactly where to go on his or her first visit to the site. Now that we have a navigation item on the top of the page called “Parents”, hopefully that will catch their eye and get them to click.

Website optimization is an ongoing process. Even after the new design has launched, we’ll continue to identify areas where the site can be improved and to pave the desire path areas for our users in order to create a great web experience.

HTML/CSS Development is Under Way

by Jacob Johnson on December 3, 2009 in Web Redesign with No comments

mStoner will begin developing our site this week in HTML/CSS. This is
the point in the process where the design transitions from a concept to
a live web site, and also represents a transition from planning to
producing.

Up to this point, the concepts that we have presented have been static
images. This initial concepts were created in Photoshop, which allows a
designer to create visual samples and make quick visual edits, without
being bogged down by actually having to program the page.

In total, we’ll be starting with 12 templates. Once we’ve got the templates in our hands, we’ll begin moving content from the current bethel.edu site to the new site.

Wireframe Testing

by Jacob Johnson on June 25, 2009 in Web Redesign, Web Services with No comments

The web services team, along with Patrick and Brian from mStoner, ran through the first round of wireframe testing on Tuesday (6/23).

Wireframe testing is used to gather information about how users might perform specific tasks on a website. We can use the testing to see if certain features of the site make sense to first-time users and to help uncover any problems before the design stage begins.

The team came up with a lists of about 10 tasks that would be common for Bethel’s website users, and then observed as prospective undergraduate and graduate students tried to complete the tasks. Each session lasted between 15-25 minutes. Some of the tasks included: finding a list of majors/minors, locating the cost of tuition, applying for admission, and finding out how to get to Bethel.

We gathered a significant amount of data by testing 18 prospective
students. This data will provide valuable insight into terminology, page layout, and
navigation.

Although we scribbled plenty of notes on paper, we also used an application called Silverback to help capture information during testing.

Silverback records the video and audio of a test session—and records where the user clicks on a page. When we watch the video playback of the session, it gives us two views side-by-side; we can see and hear the user (including facial expressions and any thoughts they verbalized) and we can see a replay of the their mouse and where they clicked on the page as they were attempting to accomplish the task.

The web services team will continue to testing throughout the entire redesign process.