Design Library

On June 18, the TLT Web Site Redesign committee conducted paper-prototyping sessions with faculty. Paper prototyping is a relatively quick usability test and highly effective way to incorporate user feedback into your Web page designs.

The process involved recruiting up to 3 faculty (middle adopters) and ask them to complete 2-3 basic tasks on paper versions of the web pages we've drafted. These pages included two different home page drafts, several springboard pages, a site map, and a profile in success. The sessions were 30-60 minutes. At end, we asked them to critique the Home Page designs from the point of view as a first time visitor and then as a 4th time visitor. We modified a script that Steve Krug mentioned at the Web Conference 2008, found on his website http://www.sensible.com/

The sessions were enormously helpful, thanks to the very enthusiastic faculty participants. Here were some of the observations:

These wireframe drafts for the TLT home page and faculty profiles in success were created in early June. After their creation, the web committee set out to conduct paper-prototyping user testing to work out some design, architecture, and terminology issues (but that's a whole other post).

The TLT Web Site Redesign team just conducted our third successful Card Sorting session with an undergrad student, an instructional designer and an instructional technologist from World Campus. Our team also started thinking of how to approach the information architecture of the site from a task-based scenario, meaning "what is it that a using is asking when they come to the TLT site?" At the same time, we are thinking of what the end point will be, which led to this draft wireframe for a service or resource landing page.

As part of the marketing campaign for the new Collaborative Learning Spaces, screensaver ads were created and will be broadcasting on student lab computers.

This week the TLT Web Site Redesign committee conducted card sorting sessions to get feedback that will enable user-centered design. Card sorting is a tried-and-tested technique for investigating how best to structure information on web sites so that users can easily find what they want. The process involves sorting a series of cards, each labeled with something the site might contain, into groups that make sense to the person sorting them. It is crucial that sites are designed to reflect the ways that users (rather than designers) think about the world. Card sorting provides a window into the minds of web site users.

So far, we have had several faculty, staff and students work together and the experience has been very successful, positive and enlightening. We will be doing a few more in the next week or so, but here's a look at what we saw:

card sort 1

The following slides represent the remaining content: Open Computer Stations, Testing Schedule, and Step 1 of the Exam Check-in Process (instructional slides). They will undergo testing and final proofing in the following week.

Open Computer Stations

Testing Schedule

Exam Check-in Process (step 1)

The Pollock Testing Center has a unique sign display set-up in which they use high-definition lcd tv's to display general messages (e.g. hours of operation) and an instructional tutorial on how to attend a test. Some of the key goals for this project include accessibility (text readability standards), clear and simplified instruction, image standards, and standards for displaying signs in this manner. Also, that these slides be create using HTML/CSS in clean code for use as a template so that the content can be edited and manipulated by other staff without worrying the design.

I've been working with a team to figure out some of the aspects that extend outside of my web-based knowledge. Dave Stong uncovered some useful resources on text sizing and interesting official documentation for Penn State physical signs. This led me to choose Helvetica and Helvetica Neue Condensed Bold as the fonts and aim for 1- to 3-inch visual size of the text for readability. Justin Miller helped to identify any display standards or typical issues that I should keep in mind, such as title-safe areas and how to avoid burn in. Also, new content ideas would be explored as well - a few that we came up with were adding a Clock, a Test-in-session notice, and a Testing schedule. The first two new ideas were included in the entrance display signs below and the testing schedule is in the works which will display much like an airport departure/arrivals monitor.

Testing Center hours

ITS Computer Lab hours

Collaborative Learning Spaces hours

Digital Commons - Studio 204 hours

Over the weekend, Cole was playing around with some WordPress templates and I have to say what he came up with (top) is far more impressive than the current ETS site design (bottom). The new design looks more professional and I think it's easier to see some of the previously-hidden elements such as the list of whitepapers. I'm interested in hearing other reactions if anyone wants to leave a comment.
ETS New Design

ETS Old Design

A new mini-site about TLT's Collaborative Learning Spaces has gone online yesterday. The site is primarily intended to give students some information about new spaces around campus where they can meet as a group and work on technology-based projects together, practice presentations, conduct research, etc... Mary Ramsey was the content expert. Audrey did the Web design. I was the photographer (nothing fancy). Mary Janzen and Derick Burns were on the team to help craft the message. Overall, I think the resulting site looks pretty good.

I started at colourlovers.com for some initial color palette inspiration, but from there I created 3 original palettes based on green, orange and blue that would work together cohesively for 3 major groupings of topics: audio & video, online communities, and new learning environments.

color palettes: