Update in the works

UX / Interaction Design portfolio, by Koen AT Claes

KoenATClaes / Portfolio

I am:

I'm a professional UX / Interaction Designer since 2007. I hold formal degrees in Economics and Human-Computer Interaction. It seems I'm an INTJ.

I have a keen interest in psychology and a particular one in human memory —specifically how memory impacts UX. I've spoken (IA Summit, EuroIA...) and written (UX Magazine) a bit about that.

I am...

I wouldn't claim to be an aesthetic/visual designer, nor a JavaScript ninja, Pullizer prize-winning copywriter or 'left-brained' developer/poet.

I enjoy tinkering with all adjacent domains – growing a healthy T-shape – though I focus on what I'm best at: UX / Interaction Design.

Navigation Design

#01

Conceptual sitemaps

Brief
Revamp airline booking website
Audience
General public (Travelers - B2C)
Issue
Stress USPs more clearly; Clarify navigation paths

'07'08'09'10'11'12'13 Spring 2011

As an internal working document, this conceptual sitemap acted as the redesign's foundation.

It restructured the website's main content according to the different needs of its different audience types and was meant to visualize section linkages and relative weights.

Based on that, we then started creating high-level page zonings. Then wireframes, a fully detailed sitemap, visual designs, etc.

Client
Brussels Airlines
Page zonings
Wireframes
Aesthetic design, by Mario Restrepo
Fully detailed sitemap
First concept

The trigger for this major Brussels Airlines redesign project was pulled after we did a competitor analysis (#1: Delta) and proposed a first alternative concept.

There were 2 main issues to resolve:

1) Stress BAir's USPs more clearly; this mainly meant bringing forward more prominently BAir's wide/unique range of destinations, particularly in Africa — historically.

2) Rearrange the content according to the different needs of the different audience types (example: those looking to buy a ticket vs. those who already have a ticket).

The trick was also to communicate the USPs (1) nearly implicitly via the way the content was structured (2) and presented through the main paths of navigation.

To help distinguish the different audience types and their associated content, a color coding was used in the initial working documents: red for the commercial angle, dark gray for all practical – post-sales – info, and light gray for any other tertiary corporate content.

Once approved, we used the conceptual sitemap also to indicate which pages would be most important to start wireframing in more detail. Not surprisingly, these matched the more 'weighty' elements on the conceptual sitemap.

First however, we also created high-level page zonings for all those page templates, using the color coding yet again. This way, we illustrated not only which content would fit where in the overall structure, but also where on a page level. Later, in the visual design too, the practical info section was intended to have its own distinct color temperament.

Along the way, a fully detailed sitemap was, of course, also assembled.

An earlier eye tracking test by my colleagues Hugues Peeters and Raphael De Robiano

For now, some technical issues seem to be holding up the launch of this new website, testing my patience too, because I'm dying to see the first real-life stats to learn what works, and what doesn't :-)

Application Design

#02

Niche audiences

Brief
Overhaul a financial trading tool UI
Audience
London City traders
Issue
Designing for experts in a domain of experts

'07'08'09'10'11'12'13 Spring 2011

This usability-focussed review / redesign project is probably the most instructive one I've ever worked on.

It's definitely the one where I had to listen most attentively to the end-users, as I was almost entirely dependent on their input because of the tool's highly specialized purpose: trading OTC products.

Client
BNP Paribas
Before ...
... After
Jargon: "Foreign Exchange" / "Forex" / "FX"

The OTC (or "Over-The-Counter") eTrader tool allows financial traders (mainly in London and Paris) to buy/sell certain financial products.

The 2 main product classes involved were interest "Rates" and "FX Options", which are not traded on a typical exchange, like Nasdaq, but between the parties directly; hence OTC.

Before ...
... After

Clearly, the end-user of this type of tool is highly knowledgeable about its subject and she will likely use it dozens of times per day. The UI contains plenty of abbreviations and jargon, like "Notional denomination", "Coupon floor", "Fixed" vs. "Floating", "Walk away", "30/360 Basis", "EURIBOR 3 Month", "Live spot" vs. "Spot reference", "Strike", etc.

Of course, jargon in itself is not necessarily a usability problem; that depends on who the audience is. But it can make things trickier for a designer. You must understand what you're designing for.

My formal education (I hold a degree in Economics) was helpful, a bit – I did not specialize in Finance though, but Business IT :-) And it's true that, starting from the existing UI, you can make some recommendations to iron out generic usability issues. But still, you're quickly confronted with your limitations.

It's also often about flows. For instance, when requesting a quote, you not only needed to know what the constraints are on the input fields (error handling) but also that a successful quote would expire after x amount of time.

That's why, for this project, I spent a few weeks in London to work on site.

I was seated, literally, next to the traders/end-users. This allowed me to experience the actual context-of-use, and the easy access allowed for redesign alternatives to be proposed and then rejected/refined in rapid iterations.

Some of the main changes we made together:

  • Adjusting the layout width to avoid horizontal scrolling
  • Rearranging the global nav: grouping & separating
  • Introducing the color coding ( + , already used offline) to – at quick glance – recognize the asset class involved
  • Rearranging the input field alignment
  • Reducing the prominence of input field labels
  • Introducing a ★ Favorite quick access feature
  • Improving error handling
  • Adding a ✔ Check indicator as positive feedback to see – at quick glance – which default values were manipulated (only rarely will all be changed)
  • Various other little clean-ups

Some of these changes may seem unorthodox, like making the labels less prominent, but are a result of the high frequency-of-use, where the expert-users will (almost like muscle memory) quickly know by heart what is where. The default values guide. The labels become merely a means to verify if need be.

Image courtesy or BNP Paribas, Marylebone, London

Like I said, this was an exceptional project because of its focus and the close collaboration with the end-users. And it was great fun working in London!

Persuasive Design

#03

Big picture w/ Axure

Brief
Expain pros/cons of nuclear tech
Audience
General public (Advocacy)
Issue
First & foremost: foster a rational, dispassionate, fact-based dialogue

'07'08'09'10'11'12'13 Spring 2011

Here our mission was to create a small universe of websites intended to support a campaign about nuclear technology (not only energy production). The aim was not so much to defend a position pro or con, but rather to enable a discussion based on facts. (The incident at Fukushima spread much misinformation.)

Client
Forum Nucléaire

More backstory-details coming soon...

There were 2 main angles of approach:

1) Remind that energy is only 1 of many applications of nuclear technology. This was done mainly implicitly via the layout of the navigation mechanism, presenting "Energy" as only 1 category, besides (and deliberately in between) "Medical", "In daily life", "Research" and "Environment".

2) Allow visitors to easily navigate between question/answer sets – more broadly, the campaign called for people to send in any questions they may have which would then get an objective reply – and give a sense of quantity (and popularity of particular questions).

More backstory-details coming soon...

Information Design

#04

Info graphics

Brief
Illustrate report on product piracy
Audience
General public (working doc)
Issue
Actual content still unknown

'07'08'09'10'11'12'13 Spring 2011

Here, the job was to assist in the creation of info graphics that would accompany articles (about illicit tobacco trade).

However, it was still unknown what exactly needed to be illustrated.

Thus the job was actually to create a set of visual metaphors, which later could be combined -- like Lego blocks -- to assemble the actual graphics.

Finding visual metaphors
Relying on our mental models
Combining multiple metaphors/symbolisms

More backstory-details coming soon...

Designing for Mobile

Responsively


#05

Shallow navigation

Brief
C
Audience
G
Issue
I

'07'08'09'10'11'12'13 Spring 2011

De

O

I.

Client
E

More backstory-details coming soon...

Human-Centric Design

#06

Storyboarding

Brief
Design a resto selection tool
Audience
Employees (Office workers)
Issue
Rapidly visualize scenarios and context(s) of use

'07'08'09'10'11'12'13 Spring 2011

Quickly (and badly) drawn storyboards can be enormously effective in building empathy and putting the product in its real-life context.

User testing
Rapid prototype
Design tweaks

More backstory-details coming soon...

Prototyping

#07

Iterative prototyping

Brief
Modernize Yellow Pages sites
Audience
General public / Advertizers
Issue
Illustrate (and communicate) entirely new interaction behaviors

'07'08'09'10'11'12'13 Spring 2011

During the Yellow Pages search directory redesign, multiple prototypes were made to illustrate new ideas: fixed vs. scrolling areas, filter options, hover effects, etc.

Different versions were made at different stages; at first very low-fi (based on paper sketches), adding more detail as the project progressed.

The final version shows the difficulties of struggling to cope with the many – and often conflicting – demands from the many stakeholders involved.

Client
Truvo (Yellow Pages)

More backstory-details coming soon...

KoenATClaes / Portfolio