We're building a website: What makes good design?

When we last talked about design Toben had presented a preliminary set of concepts and we chose the 'magazine' style layout and "finding the way" as an overall design concept to lead specific elements of the design.

Based on our decisions, Toben delivered the following design ideas. 

They expanded our brand colour palette so we could choose more than pink, green and blue. Not only our website but all our marketing and designed collateral can shift from the existing modern, corporate qualities to a warmer experience (yay!)

 They suggested how the colours could harmonise. 

They suggested design elements based on "wayfinding" and tourism "brown signs". 

And they began to look at how these various elements would come together to display designed, aggregated modules-

And designed interactive features. For example, if the user rolls over a carousel/slideshow item the arrow pushes out with information on it. 

Last week, I asked what designers do in the website building process. Another question I've asked myself constantly in this process is what makes good design? 

Folded into Toben's visual response is research about our sector, about our audience (those we have and those we want to reach) and a clear understanding of our brand, and its potential to influence and engage the public. On top of this Toben needs to consider technical requirements, the user experience and information architecture.

Good design is doing all of the above and making it look easy. 

In the next blog, as we gear up to begin populating the site with your content, we'll take a look at the designed homepages and organisation profile pages. 

We're building a website: Design

If you're anything like me you may wonder about the boundaries that exist between different roles in website production. 

What do web designers do?

Obviously the designers are responsible for all aspects of visual communication on the website. But when website layout and communication are intrinsic to usability the designer's job can blur very quickly with information architecture (the structure and display of information and data) and user experience design (how users encounter and interact with the interface to fulfill tasks). 

Early in the website development, while the research team Pure and Applied collected qualitative data from our audiences, the designers from Toben did their own research to prepare the visual response.

What animal are we?

This research started with Katja Hartung from Toben interviewing Michael Rolfe, Katie Duncan (Info and Resources Officer) and me about M&G NSW's brand identity. There were plenty of normal questions but  there were also some more abstract ones. For example, Katja asked us what animal M&G was. 

There was a moment's hesitation before Katie offered "cattle dog." At first I was suspicious that Katie's near obsession with canines was colouring her response but she then explained that M&G was like a faithful dog steering people towards the best resources and services, and the public ("the cattle"???) towards your wonderful places. Michael and I had to agree that cattle dog sounded pretty good.

What does this have to do with design?

Katja was collecting information about M&G's "personality." Unlike the qualitative data Pure and Applied were pulling, this profile was more expressive, and very much about our own sense of identity. What does the organisation aspire to do? What new audiences do we want to reach? 

When we saw Toben next they had responded to these personality traits with a range of conceptual and visual responses - ways forward in expressing our brand online. What fascinated me was how these conceptual design solutions also informed the user experience. 

'Magazine" versus "Explorer"

Toben discussed two types of user experience, and how they could be visually displayed on the page; the "magazine" and "explorer". The magazine style embraced the diversity of our sector by foregrounding rich editorial and visual content, but maintained a useful browsing function. 

Examples of 'magazine' style design.

The second option was the "explorer" interface. This experience allowed visitors with a particular point of interest in the museum and gallery sector to surface and focus on different content. The keyword search would become an interactive feature, surfacing different content types related to the search. With this version the user leads the content.

Examples of  'Explorer' style design.

As you can see, Toben may be designers but their remit extends to how users interact with the content on the website. Armed with these concepts and Adrian's research and experience we concluded the "magazine" style was our direction forward. M&G would lead the audience to the best stories. 

The concept

Toben also introduced us to four concepts that would "colour" or "personalise" the website - providing visual motifs that could emphasise the user experience.

Showing the Way

Make your own journey

A cultural melting pot

Surfacing treasures

Of the four concepts the first took hold. We appreciated the playfulness of "surfacing treasures" but felt that "showing the way" was a good fit with our online directory and the "magazine style" user experience we were promoting. 

In the following weeks, Toben responded to our first impressions and built up a strong visual brand identity. Next fortnight, we'll introduce you to the look and feel of our new website.

We're building a website: Wireframes and Use Cases

Like every profession in the world, website development is filled with insider words, acronyms and abbreviations (for example, UX is short for User Experience). My education into the world of website buzz words was like anyone learning a second language. First of all I was bewildered, then I tentatively picked it up and used it very, very hesitantly ("is that what you mean by UX? Is that thing I'm pointing at right now an example of UX?"), then I grew confident with select words and phrases ("the home page will aggregate content", "the responsive design will showcase the aggregated content on tablets"). I never even used the word "aggregate" before March last year and now my life is one big aggregation.

I've basically spent the last year and a half nodding sagely in meetings while people say words I don't understand and then rushing to Wikipedia to find out what I've just agreed to (I'm kidding- sort of). 

Sometimes Wikipedia didn't help. Here's a description of the web application framework Django that the Interaction Consortium are using to build our website:

"The core Django MVC framework consists of an object-relational mapper which mediates between data models (defined as Python classes) and a relational database ("Model"); a system for processing requests with a web templating system ("View") and a regular-expression-based URL dispatcher ("Controller")."

Sure.

Us and them

A massive gulf exists between my humble grasp of words and terms like "responsive design", "information architecture", "UX", "content management system", "agile development" and the world of actual programming, building and engineering. And it begs the questions: How do we find a shared language for developers to discover accurate insight into client needs? How do developers convert these needs into a meaningful system of functional explanations and granular steps necessary for engineering?

There are three very important solutions to this question. First, choose a development team that doesn't consist of egotistical geeks who play the jargon game to bewilder you into submission (M&G has been very, very fortunate in choosing a smart friendly team with Pure and Applied, Toben and the Interaction Consortium). 

The other two solutions are wireframes and use cases. These valuable development tools have helped us discover exactly what we want in collaboration with the website team. 

Crossing the gulf 

Wireframes represent the interface without getting swamped in design detail. This sketch concisely articulates the user experience in a visual language shared by designers, engineers and lay people. But because wireframes are simple and don't get bogged down in design detail their focus is function, and the process is discussion and intensive reiteration. 

Early wireframes sketch - early-December 2012.

Finding our way

As you can see above, we were still juggling with our original conception of the website. The directory of places and associated events leads the content on the homepage. The carousel features individual places and underneath are buttons that take us to museums, galleries and Aboriginal cultural centres. There is generic content in What's On and News (Video, Event, Touring Exhibitions) but there's no commitment to a style of content production, no definitive approach to the homepage. We're missing that X factor that makes the website stand out.

The X factor

Final wireframe for the M&G NSW homepage.

You don't need to know anything about the magical wizardry that goes into website development to immediately see the difference between this version of the public home page and the one above. When users come to our front door they are greeted by a selection of stories (interviews, onsite travelogues about regions, exhibitions, festivals, opinion pieces and videos highlighting programs). The content is thematic and formatted (Ask a Curator, Off the Beaten Track, Hidden Treasures), invites users to visit individual museums or galleries or highlights the connections between organisations. Simply put, the front door is like a "magazine" rather than a directory.

But the genius of the above sketch is the right hand column: despite all the exciting content this ubiquitous feature provides users with a consistent doorway to your places, trails and events across NSW. If the user doesn't want the stories on the page they still have direct access to the hard data. 

Why wireframes work

These very visual tools allowed everyone to collaborate and agree on functions intuitively rather than abstractly. It gave everyone a real sense of what the website would be like and provided the necessary detailed script for designers and developers to work off.

What happened next?

Pure and Applied finished the wireframes in January and Interaction Consortium converted them into Use Cases.

What exactly are use cases?

"In software and systems engineering, a use case is a list of steps, typically defining interactions between a role (known in UML as an "actor") and a system, to achieve a goal. The actor can be a human or an external system."

Thank you Wikipedia. 

In early February, Alastair Weakly and Simon Johnson from the Interaction Consortium laid out all the use cases on our meeting table. It wasn't long before we ran out of table:

Alastair Weakly, IC and Katie Duncan, M&G lay out the use cases.

The use cases close up.

A couple of use cases:

"As a sector editor I have an easy way of picking opening hours times."

"As a user I can see a list of the organisations mentioned in an article at the bottom of the article (created manually not automatic)."

We can break down these sentences into their "Actor" who is defined by their user status to our website. So a "sector editor" is the person chosen by an organisation to upload content onto our website, a "user" is anyone visiting the website. The rest of each sentence describes an action related to a goal. 

The list of use cases need to be comprehensive and exhaustive to define the scope and goals of the project in minute detail. M&G and the developers prioritised some use cases over others (though most were regarded as must-haves) and with a clear list of functions the engineers had what they needed to start building the beast.

But enough about the research part of the process. Next week we'll look at the sexy stuff: the design of the website. 

We're Building a Website: Users

I want to begin with a confession. For some time I've felt guilty, perhaps even a little ashamed, about my internet use. I have access to thousands of well-written scholarly articles and interviews at the touch of a button but can't bother committing to read more than a single paragraph. Instead, I feel compelled to click everything feverishly like a five year old with a new toy, onwards and upwards through a labyrinth of pages and hyperlinks and rich media.

What's happening to me? Do I have ADD? Am I lazy? Is the internet making me even more stupid?

As it turns out, I'm just a typical user.

The typical user
When it comes to reading content on the web, we've all got ADD, all a bit lazy. Or rather, we're all task-orientated, enjoy interacting with a range of content, and wish to do everything in the shortest amount of time possible without expending effort thinking about things. Steve Krug wrote a book in 2000 on exactly this topic called Don't Make me Think in which he clearly explains that fundamentally the best user experience is one where everything on a website is self-explanatory and self-evident. 

Where am I? The current M&G Website Experience  
Along with audience research, M&G NSW has spent the last few months reorientating its priorities to learn more about what users want. This has been extremely eye opening for our organisation, revealing the perils of densely written copy, confusing navigation headings, and an unintuitive search function. 

Let's take a look at our current website from a user perspective:

The columned website design with a main menu and second tier sub menu is an effective and simple way of articulating navigation but problems quickly arise. Look what happens if you're in Exhibitions and you click on the Exhibitions Register. All of a sudden you're in Publications. 

Not a big problem but, as Steve Krug writes, confusing people's sense of place on a website is a big no no. Our interpretation of virtual space is analogous to physical space; we look for signposts and directions. This is why "breadcrumbs", the trail that you see at the top of website pages, is so important. Like in the story of Hanzel and Gretel, breadcrumbs provide a path from where you started to where you are. 

Above: An example of "breadcrumbs" on Trip Advisor.

And let's not even get into the label "Publications." What value does this present to you? We're not in the business of publishing so its strange this takes up the ultra premium place in the first tier of our menu. Why wouldn't publications be under "resources"? 

What about the search function? I'll type "Museum" in the search field and see what I get:

Excellent. 

The point I'm making is that every website is made to be USED and when a website like ours has a range of little anomylies that cause momentary confusion or undermine the user's trust, it does not fulfill its fundamental goal. 

So how do we make a usable website?

Designing a website for users
Working with Adrian Wiggins from Pure and Applied we began describing the user experience (UX) visually with simple page layouts called wireframes. These are page schematics depicting the website’s content, interface elements and navigational systems, with a focus on functionality, user behaviour and information architecture. 

Early wireframe of the public homepage. Click to enlarge.

Wireframes
Wireframes represent the interface without getting swamped in design detail, concisely articulating the user experience but allowing for rapid iterations. Adrian made prototypes of pages that offered layout suggestions and also potential types of content. After feedback he would remove, improve and rearrange items. 

In the wireframe above you can see the homepage displays event information, social media updates and quirky items like Object of the Day and Little Known Fact. It also clearly displays access to a map and database of museums, galleries and Aboriginal cultural centres in NSW. 

Our discussions with Adrian ranged from broad conceptual discussions and strategic goals to the nitty gritty details like button placement and menu labels. At every point we needed to meet a simple criteria: Could a user come to our Homepage and know exactly what to do without thinking?

By the end of January, Adrian had compiled an 90+ page document that provided a blueprint for Toben (the designers) and Interaction Consortium (the engineers) to begin building the new website. 

A Typical User?

At the beginning of this post I described the "typical user". Apart from the broad generalizations about UX, most users are an idiosyncratic, contradictory bunch who will respond to webpages in ways that designers and developers never imagined. M&G can hypothesize about user needs till the cows come home but its meaningless until we actually test the website. 

Further information on website user experience:

Steve Krug's website: Advanced Common Sense

Information Architecture for the World Wide Web

Nielsen Norman Group

This blog was updated on March 28 2013.