Happy Students, Reading on Lawns

In 2001, I was an MDes student at the University of Alberta. Having worked as a web designer previous to my switch to Academia, and thanks to the digital bewilderment of my professors, I got the gig of redesigning the University of Alberta’s Department of Art & Design web site. At that time, the U of A wasn’t yet as particular about its brand or as adamant to control every line of its code, and Art & Design was permitted to, essentially, do its own on-line thing.

Thus, I was encouraged to think through the redesign project as both an information architecture and a usability problem and as an Art & Design branding problem. Figuring out the site’s organization was, in fact, the easier task: system design + user needs + Departmental structure. But the visual design? That seemed subjective. Bounderless. Frankly, kind of flaky.

I was craving something that resembled process. Better still, a system that resulted in data; data that could be tabled and analyzed.

What emerged was a strategy for developing a set of project-specific visual paradigms (within a larger design process adapted from the methods discussed by Goto and Cotler).

Visual paradigm: a category of representational imagery, deployed to implicitly support the communication goals of the organization responsible for a design.

The complete design process consisted of 7 phases:

1. Consultation and research;
2. Site structure and content rework;
3. Visual design exploration (iterative) and selection;
4. Consultation and testing;
5. Production and quality assurance;
6. Site launch; and
7. Post-launch evaluation.

How Things Look, Counts

Previous academic work in this area has emphasized the functional value of aesthetics in attracting and retaining site visitors. Kristiina Karvonen, for instance, suggests that the aesthetics of a web site are an important factor for site visitors making decisions about their own actions, including “whether or not to trust a service enough to conduct business online.” Jorge Frascara argues that design aesthetics impact the following:

1. Immediate response of attraction or rejection;
2. Communication;
3. Length of perceptual time commitment;
4. Memorization of the message;
5. The active life of the design; and
6. The quality of the environment.

Ruecker et al. concentrate on the role of the aesthetic in encouraging user confidence in the site and its designers. They characterize confidence as a composite state of mind that involves three factors:

1. Trust;
2. Willingness to persevere; and
3. Satisfaction.

So, assuming that these fine folks (and over two thousand years of aesthetic-related scholarship) have a valid point, and how something looks — what decision we make in terms of graphical content — matters, how do we (designers) make this decision?

My focus on the identification of possible visual paradigms should be understood within the context of meeting the communication objectives of the particular project / organization under design. Web sites are a form of public communication. In the case of web sites for university departments, two of the primary goals of that communication are to inform and to invite: to inform existing and potential students regarding relevant details of their program; and to invite potential students or faculty into the department. This combination of agendas often results in a hybrid Web site, with sections that contain more formal material (such as calendars, statements about policies and procedures, and forms), and informal material that is designed to set the tone for the department, conveying something of the culture that the newcomer can expect to find.

But Who Are You, Really?

Setting the tone of an academic culture may involve a number of factors, including the intellectual and pedagogical goals of the institution, the physical environment of the classrooms and labs, and information about the various people in the department and their areas of research interest. How a department or other organization chooses from among the various factors in order to portray itself in the public sphere will naturally be construed by some viewers as an indication of the nature of the department. Within these larger choices of aesthetically-related material, there will be other detailed considerations of design, from decisions as to colour palette, navigation system, and so on, to the choice of which material to emphasize in various ways, and which to background.

These details, while significant, will nonetheless fall within the context of the larger paradigm that has been used for the site. The elements that have been chosen to suggest the organizational personality will in essence establish the bounds of discourse for the rest of the site, and by implication, will communicate to site visitors some key information about the department.

Identifying the suite of possible paradigms already in use by similar organizations prior to beginning design of the web site can provide information in a number of areas:

1. It constitutes a form of competitive analysis — how similar organizations have attempted to position themselves in the public mind;
2. May reveal a new opportunity, where the organization will be able to establish a strong identity by adopting a strategy that has not already been used. This analysis tends to prevent the organization from selecting a set of imagery for the Web site based on current trends or personal preferences, but rather to choose imagery appropriate to the organization’s own positive attributes;
3. Help construct a strategy for discussing Web site design within a context that allows for objective analysis and debate. By foregrounding the issue of how the Web site paradigm will tend to establish bounds of discourse for the rest of the design, the significance of what might otherwise seem to be minor choices can be brought explicitly to the table.

How it’s Done (Method)

To research competitor sites (sites with a similar organizational model, audience, types of content), I used a modified version of Nielsen’s heuristic evaluation model that included aesthetic qualities. I created a web site review template to maintain consistency when reviewing sites.

Web site review template.

After analyzing 25 American and Canadian Art and Design colleges and departments, 6 different visual paradigms appeared to emerge (3 of the 6 are described below).

Not every web site designer had chosen a single option; many sites combined attributes from more than one paradigm. On the other hand, several sites were relatively pure examples of a single option.

Figure out which sites to analyze by looking at sites that:

1. belong to a similar organization;
2. are within a similar subject area or with similar content;
3. are within a similar subject area and geographical region;
4. are of a similar size; and
5. are within a similar target audience.

At the start of the analysis, the paradigm field contained a short description of the imagery found on the site. Eventually, however, a set of consistent categories emerged.

Happy Students, On Campus

Visuals falling within this paradigm consist of photographs of students engaging in enjoyable or thoughtful activity such as studying on school grounds, meeting with fellow classmates at the library, and attending classes.

Pros: Most institutions either have or can stage the appearance of happy students.

Cons: Students and their appearance tend towards the generic. It becomes challenging to communicate a unique sense of tone through this paradigm.

Misuse: In certain instances, institutions with a poor track record of inclusion have used — inaccurate —depictions of diversity as part of their on-line presence.

Two examples (on the right from 2016 and, on the left, from 2001, of the “Happy Students, on Campus” paradigm.

Pristine Surroundings

Visuals are focused on the physical appearance of the school or department, and consist of photographs of buildings, classrooms, facilities, and school grounds.

Pros: Images of campus grounds can be both unique and welcoming, especially to those planning to arrive there for the first time.

Cons: The choice of pristine surroundings only works if the campus is unique and welcoming (which isn’t true for many that have been based on brutalist architecture, including the U of A’s FAB). An additional conflict may exist — the Department of Art and Design at the U of A, for example, shares the building with the Department of Music and the Department of Drama. No noticeable separation exists between these three areas. Hence, using the building, its rooms, or its hallways would, in this case, create a misleading view of the Department.

Departmental Structure

Imagery which falls into this category consists of icons that have been selected to represent the different areas of a department. For example, painting is represented through an easel, photography through a camera, and design through a piece of lead type.

Cons: The understanding of an icon is based on previous experience, and text labels are often needed to reduce ambiguity. Since most departments have similar structure, it becomes challenging to move beyond the generic.

An example, from 2001, of the “Departmental Structure” paradigm.

We’re Creatives Here, You Hear!

The web presence itself becomes a symbol of the department’s creativity. It becomes a canvas, often demonstrating a high level of technical proficiency and attempts at innovation.

As the GUI has moved out of infancy and usability and web standards have gained popularity (must instead of nice to haves) web designers have, thankfully, felt less of a need to demonstrate their technical and creative prowess through code and the use of this paradigm appears to have fallen out of favour.

An example of the “We’re Creatives Here, You Hear!” paradigm from 2001.

Sometimes Mood Boards Aren’t Much Help

Last year, I was asked to sit in on a call between my colleagues, who run an academic entity in the Digital Humanities (the client), and an agency tasked with redesigning their web site. The agency presented a set of visual positioning mood boards, meant to express the agency’s pitch for the site redesign’s new tone. The boards consisted of bicycles, typewriters, bow ties, male figures in tweed coats, and books. This was for a site, run by highly-educated women academics, about digital scholarship.

As a way of constructive feedback, we suggested the following paradigms:

1. Technology but not just old: production and consumption (e.g. notebook, pen, typewriter, iPad, digital stylus);
2. Lone scholars looking scholarly;
3. Collaborative scholars having academic fun: working, communicating, celebrating;
4. Canadian identity;
5. Scholarly environments (e.g. the staircase in the library; Nines; Gutenberg);
6. Representations of the scholarly outputs (e.g. texts and images); and
7. Abstract representations of core concepts (e.g. Erudit).

The end result appears both unique and specific to this particular agency and a good fit to the landscape of on-line presence for DH scholarship.

Original authorship and (full-of-gratitude collaboration on the text) made by Dr. Stan Ruecker.

Still Curious?

I teach, design, and research as a feminist scholar, usually located in Calgary, Alberta, Canada. You can see some of my work, or find out more about me, at http://milenaradzikowska.com. I am on twitter as @candesignlove.