Article
0 comment

New portfolio website

Ben Crothers portfolio website

It’s been ages since I’ve shown anything I’ve been working on. Plus, there’s a growing amount of stuff like sketchnotes, storyboards and bits and pieces that don’t really have a home on this website. So I’ve done up a new portfolio site at bencrothers.com.

It was also a great opportunity to get my hands dirty with some HTML5/CSS/CSS3/responsive design coding. I’m a big believer in having a decent working knowledge of the platforms, frameworks and code that ultimately bring to life the digital experiences I design, so it made sense for my latest code project to include HTML5 and responsive design.

Take a look, see what you think. I’d also be interested to know what it’s like on your mobile device – feel free to let me know if anything looks kinda wrong…!

Article
1 comment

Wireframes: treat ‘em rough for best effect

With all the great prototyping tools that are around these days, some people are heralding (or bemoaning?) the demise of the humble wireframe. But if we play to their strengths, I think they can do what fancy prototypes can’t.

My understanding of wireframes is that they are conceptual illustrations displaying the visual structure, priority and arrangement of all the elements needed for each page type in a website or other online product. They also display differences in appearance and behaviour for each state needed (logged in or not, an administrator’s view as opposed to a manager’s view, and so on).

Standard user experience design practice is to produce wireframes before the final visual design for many reasons, not the least being you can solve all (OK, most) interaction design issues at this ‘bare bones’ level before committing to the visual design. And changes to visual design are more fiddly and expensive than to wireframes.

Great for us…not so great for clients

So wireframes suit our processes. But let’s face it: clients are typically underwhelmed by wireframes, and would much rather see the finished result first, with the visual design implemented. Wireframes are typically plain, boxy, and – well – ho-hum. They don’t have the pizzazz that clients are eagerly waiting for. And we haven’t even mentioned clickable prototypes yet, which would be more preferable for clients still.

If we try to dress them up, we run the risk of confusing clients, making them think that they are looking at the visual design, rather than the conceptual design.

The strengths of wireframes

There are several ways out there to approach this dilemma, and most of them involve trying to leap-frog the static wireframe stage. But I think there’s merit in not only retaining this as a vital step in the design process, but levering off the strengths that wireframes actually provide:

  • Wireframes are great for encourage ideas-capture – firstly, wireframes are fast; you can pump out a lot of wireframes illustrating your ideas and solutions quickly. This means you can communicate ideas to clients early and often. Internally, it also means you can bin the ideas that don’t work and bullet-proof the ideas that do work efficiently.
  • Wireframes encourage collaboration – wireframes are conceptual, so they should actually encourage client collaboration and a sense of co-ownership in the design process. Presenting clients with something too polished can run the risk of leaving them feeling left out of what is probably the ‘fun part’ of their job in engaging with designers.

One solution: treat ‘em rough

The key, then, is to keep wireframes quick, sketchy and informal. I’m a big fan of Dan Roam’s book The back of the napkin, and one of the key take-aways for me is the power of a simple sketch to communicate a lot of information.

So for wireframes, here are a few ideas that have helped me in my projects:

  • Sketch and scan hand-drawn wireframes and show to client project teams as early as possible, to discuss solutions and ideas with them
  • Sketch up figures representing different personas next to wireframe sketches, showing the link(s) between persona tasks and scenarios, and how that particular wireframe design achieves the tasks
  • Try to have a whiteboard handy when discussing interaction design ideas with clients, so that you can instantly sketch up what you’re talking about (and try not to stage it… or if you do make it look spontaneous, not contrived)
  • If you’ve been brainstorming using whiteboards and sketches, take photos as you go, and share these photos with clients (in emails, reports, etc) if it helps to communicate your design thinking

A couple of examples

Here are two of the rough wireframes I did for a website about information and action to live more sustainably. The purpose of the sketched set of wireframes was really to quickly ensure that we and the client meant the same thing when we talked about ‘hero areas’, page zoning, and so on. Turns out they really liked the sketched approach.

LivingGreener sketched wireframe - example 1 LivingGreener sketched wireframe - example 2

Sketched example of the home page

Sketched example of a content page

I could expand on those points, but I’ll leave that for another time.

Article
0 comment

TAFE Northern Sydney Institute website redesign

TAFE Northern Sydney Institute website

TAFE Northern Sydney Institute website

The brief to redesign the website for TAFE Northern Sydney Institute was essentially to connect students with the right courses at the right campuses, and to promote the business services that TAFE NSI has to offer. Results of requirements workshops clearly indicated the search and browse paths that people preferred, as well as the various scenarios that are in place when they are looking for courses and campuses.

These lessons helped me and others at PTG Global to redesign the search and browse workflows and all page wireframes, so that they would display the right information on the right pages, to make course information as clear as possible to find, read and respond to.

There were several challenges in the interaction design. The main one was trying to unite all the different ways that people searched for course information in a clear, consistent pattern. This was overcome by organising an ‘advanced search’ (at the time titled more options) as a dynamically overlaid panel with options separated as course details, location details, and course delivery. Having in-page tabs for several column panels allowed us to stick to client’s requirements of including access to a lot of information in a relatively small space. Including a ‘super footer’ in the design was also a good opportunity to re-cut the content and functionality available on the website in ways not otherwise available through the navigation.

The information architecture schema, screenflows, wireframes and technical specification were then handed over for another company to create the visual design.

Go to: nsi.tafensw.edu.au

Article
0 comment

LivingGreener website

LivingGreener.gov.au home page

LivingGreener.gov.au home page

LivingGreener.gov.au centralises a lot of knowledge available on living more sustainably, especially government information about rebates, grants and loans available. Although there are many websites out there that tackle various aspects of sustainability and what we can do about it, this website’s unique strategic goal is to centralise lots of disparate informatio, encourage further activity, and increase the community’s awareness and uptake of rebates and grants available from the government.

I and other consultants were involved at PTG Global with the user experience design for LivingGreener, including:

  • Personas and want maps design based on user research, website traffic analysis and statistics from the Australian Bureau of Statistics
  • Information architecture, including an overall conceptual model based on leading people at whatever point they were at, on a journey towards being more active to live more sustainably
  • User interface design, with wireframes and prototypes and working with content writers to structure content to integrate action points throughout the website

Go to: livinggreener.gov.au

Article
0 comment

Classic mystery meat: the new Adobe icon set

I stopped by Dave Shea’s blog and read his post about the (possible) new set of application icons for the Adobe CS3 product suite. What’s interesting for me is the challenges the designers must have faced and the result they’ve arrived at.

Firstly, have a look at the whole lot placed on a colour wheel (from the icons announcement on an Adobe blog). Dave’s blog has in situ shots of them too. The reaction out there has been mostly “What the…?”. There’s good reasons against these designs, like accessibility issues and cognitive issues, which I won’t replicate here.

But what’s the first thing you notice about them?

There are A LOT.

Anyone who’s designed icons knows that the more there are in a collection, the harder it is to maintain design unity and keep them all distinguishable. That’s issue one.

Issue two, I think, is that since Adobe bought Macromedia, you can imagine the talkfests and meetings about how to rationalise the two product stables into one. How to blend two different design ethoses (ethi?) and brands into one? Designer nightmare.

Issue three is that because there would have been so many stakeholders involved, design-by-committee has resulted in an icon set leached of any flair or individuality. A lot of people never liked the feathers, shells and such of the Adobe Creative Suite CS2, but they had flair and panache.

So the new icon set looks like squares from the periodic table of elements. And when it comes to international standardisation, there’s a design project that would have been design-by-committee, and rightly so. Should we be surprised then, that these new icons are so similar?