igor freeke portfolio20100224

igor freekeUser Experience Design

Portfolio 2010.02.24

Examples of User Experience Design


INTRODUCTION

This document aims to give some background to a variety of projects from the last decade.

This variety has the side effect that this document cannot be completely structured - as every project has it own parameters when it comes to time and roles.

For a complete and more compact / structured list of projects please:

take a look at my LinkedIn profile: http://nl.linkedin.com/in/igorfreeke - where you will also find updates of this document

send me a resume request at [email protected]

Feel free to contact me at [email protected] for:

business opportunities

professional interest

any remarks on / questions about this document

When you have seen enough or you don’t have the patience to browse this portfolio from cover to cover, I still have a few profundities to conclude, on the last page.

Portfolio 2010.02.24 2

http://nl.linkedin.com/in/igorfreeke

mailto:[email protected]

mailto:[email protected]


PROJECT: Intranet Site and Website for Alumni

Scope

2009 Hogeschool van Amsterdam (University of Applied Sciences) Economie & Management (15k students) wanted a redesign of their intranet and a new website for alumni. Ideas and demands were scattered in many documents and peoples heads.

Approach / results

I interviewed stakeholders and built fully clickable prototypes and added a descriptive document. This prototype is now used as a starting point for technical and graphic design.

Technical features:

Modal dialogs (working in prototype)

Personalisation (working in prototype)

Login dialogs that pop up at certain pages in the alumni site

Soft features:

Personalisation was possible in the existing CMS, but it was too complex in use and was therefore neglected – this resulted in the need for UX in CMS (proposal delivered)

2009 (Dec) – 2010 (Feb) | User Experience design | Hogeschool van Amsterdam Domein Economie & Management

Clickable prototype and documentation



PROJECT: Online Banking Web Application for South African Client

2009 (Okt –Dec) | Analysis / User Experience design | Backbase, Amsterdam

Originally, I was hired for User Experience (UX) Design (at Backbase). At the beginning, it seemed that use cases (from the bank) that formed the starting point for UX Design were far from complete. Furthermore, there also existed a Flash demo prototype made by the bank that was incomplete and still in the making.

Backbase and I agreed on the fact that the UX as proposed in the prototype did not meet our level of ambition, so the focus should be on aiming for higher standards.

After a little while. the bank emphasised that their prototype should be leading in UX, which altered the process at Backbase, and made me concentrate on analysing use cases and demo prototype to get the specs complete. This was conducted in close collaboration with the business analysts at the bank. I finally ended doing UX work (wireframing/storyboarding).

Wireframe, part of a storyboard (client name under embargo)



PROJECT: Online Recruitment Centre Amsterdam City Council (web application that facilitates back end of recruitment process) (1/2)

2008 (Jul) – 2009 (May) | User interface designer | SDU Jobsrepublic, Alkmaar

ScopeSDU Jobsrepublic provides a customisable web service that facilitates both the front end (web job board) and the back end (management, administration and communication).

The Amsterdam authority wanted a heavily customised version, tightly interwoven with their recruitment process, in which hiring managers and selection committee members have their own input on the process, with its own interface. This besides a view/version for a more centralised personnel and recruitment department.

The recruitment process roughly consisted of the following (all system supported) tasks:

Writing a vacancy by Hiring Manager (HM), editing by recruiter, approval by HM

Selecting a Selection Committee (SC) by HM

Publishing (department wide, company wide and external)

Letter selection round: quick filter by HM, individual quick scan by SC, HM/SC selection meeting

Planning interview date(s) by HM, writing and sending invitations and rejections / fall back statuses by Recruitment Department

Vacancies overview Vacancy

Aplicants overview Applicant



PROJECT: Online Recruitment Centre Amsterdam City Council (web application that facilitates back end of recruitment process) (2/2)

2008 (Jul) – 2009 (May) | User interface designer | SDU Jobsrepublic, Alkmaar

Evaluating interviewees, making appointments for 2nd

interview round (which can be the last meeting round for employment conditions) by phone (HM), writing and sending invitations and rejections / fall back statuses by HM

Eventually followed by 3rd round..

Sending job offer(s) and / or rejections statuses by HM

Eventually followed by a 2nd or 3rd phase (company wide and external publications).

Contribution / results

I adapted the changes and designed new functionality for both (hiring manager’s and recruiters) applications, in a task-oriented way. I.e., after starting a recruitment process for a certain position, both hiring manager’s and recruiters see what they have to do at any moment.

Deliverables

Full clickable prototypes

Applicant rating Rating overview

Invitation



PROJECTS: tomtom.com/whytomtom, 2 TomTom Product Launches (1/3)

2008 (Jan – Apr) | Project manager, content specialist | TomTom International, Amsterdam

Scope

At TomTom, I was responsible for the realisation of a new sub site that communicates TomTom’s – mostly technical - unique selling points in a playful manner: tomtom.com/whytomtom, and further for the product launches of TomTom ONE and TomTom XL 2008.

Results

Whytomtom – online by the end of the hiring - consisted of 4 'pillars' (Best Maps, Smart Routing, Easiness, Safety ) These pillars all had their of 15 sec cartoonish 3d animation movies to tease the visitor to click and read further. On a second level these pillars were divided in several sub items and explained in short, in text and video. A 3rd level offered an in-depth explanation. This resulted in "the best web experience ever seen so far at this company" as said by the former VP e-commerce Oscar Diele.

Home Animation runs at mouseOver

2nd level page

3rd level page (infographic by myself)

Animation stills





CMS / XML reference guide for Whytomtom (by myself)

The product launches consisted of more straightforward banner development and feature description.

My contribution for both projects consisted of:

Project management: management of internal and 3rd parties for delivery of:

textual content,

page design,

illustration,

animation,

translation, and

technical realisation

Gathering internal information

Text writing, editing Storyboard for product banner (by myself)

8Portfolio 2010.02.24




Project features:

I felt very at ease in my role because I could do much more than what I was initially hired for – e.g.:

Drawing storyboards (see page 2/3)

Helping marketers briefing the 3d modelling agency making a demo movie (‘Easyport’)

Helping marketers with naming conventions

Easyport mounting device demo movie: storyboard (by Refunk) / 3d animation (by Addikt)

Naming conventions guidelines (by myself)



PROJECT: Implementation of Hylo Knowledge Management System (1/3)

Portfolio 2010.02.24 10

2008 (Jan – Apr) | Project manager, information designer | Nuon, Amsterdam (gas and electricity company)

Scope

Nuon wanted to implement a knowledge management system on their retail and business websites in order to enhance ‘findability’ of information on these websites and in consequence:

enhance client satisfaction;

save money by reducing communication costs made by other channels (e-mail, call centre, mail) – business case studies showed that a 1% call centre reduction resulted in a 240k Euros per year profit.

What Hylo roughly speaking does, is delivering a webservice that can disclose a Frequently Asked Questions (Faq) database by answering clients’ search questions, and representing these questions on forehand at pages where these questions are posed earlier.

To be precise, a Faq is a piece of text that consists of both a question and an answer.

The system is supposed to automatically index Faq’s, and to interrogate the user to make his question more specific in order to reduce the amount of Faq’s presented.

Slides from a presentation about Hylo’s working principles and project course (1/2)

Nuon / Hylo change management workflow document)



11


Approach (for Nuon retail site)*

Collecting about 500 Faq’s from various sources (existing website, call centre, marketers)

Reformatting the Faq’s to my own style – to find duplicates

Deleting the duplicates, the useless and adding useful Faq’s

Dividing the (300) Faq’s over 15 content owners

Editing the Faq’s with the content owners

Creating final writing style rules

Final-editing (in close collaboration with a professional editor)

Implementing the Faq’s into the Hylo application, i.e. connecting the Faq’s with words and word combinations and building a Nuon specific thesaurus –much more work than foreseen.

Making blueprints for the procedures for adding, editing and deleting faq’s(initialized by various Nuon departments and carried out by Content Management department)

Initial operating: making a start with:

Checking statistics, and from there:

Tailoring, deleting and adding questions

(Dis)connecting the Faq’s with words and word combinations and tailoring the Nuon specific thesaurus

Do the same with requests from marketers (via content managers)

Providing content managers with documentation

Providing content managers with a factsheet to distribute company wide to explain possibilities, limitations and rules of Hylo

Training content managers

Providing management with a key performance indicator dashboard.

* For Nuon Business, my role was more focussed on project management; the process approach had a more pragmatic character (time boxing)

Top: Slides from a presentation about Hylo’s working principles and project course (2/2)

Right: Hylo statistics document



Portfolio 2010.02.24 12


Other tasks

Coordination between Hylo (as external supplier) and Nuon Content Management and ICT departments

Lobbying the project within Nuon to create support

Final deliverables (documentation):

Documents for campaigning related Faq’s

Introduction into Nuon / Hylo for various stakeholders

Extensive user guide for Content Management department

Document with administration of thesaurus and word/concept-Faq-connections (unfortunately Hylo lacked a good overview)

Key Performance Indicator document (management dashboard)

Technical issue document

(all both for Nuon Retail as Nuon Business)

New workflow for Content Management department

Pages from hand-over documentation


PROJECT: Redesign Planning Process (planning tool for infrastructure, rolling stock and crew) (1/3)

2005 (Apr) – 2006 (Feb) | User interface designer, information architect | Nederlandse Spoorwegen (NS - Dutch rail), Utrecht

(2) Writing Use Cases (description of user input and system reactions, with flow charts and screen designs) for the planning of infrastructural maintenance, and screen designs for use cases written by others.

Crew planningPlanning of staff for logistical rolling stock displacements (displacements without passengers like shunting)

Splitting up a train service, taking out the middle of the routeIn case of an accident in the middle of the route, 2 services are planned on both ends, which also demands for two new turning points on the borders of the removed mid section

(3) Making visual explorations based on business cases, acting as sparring partner (for business consultants), making a starting point for further technical elaboration.

Building blocksSystem for reservation of infrastructure for cargo transporters (independent companies that hire infrastructure from NS)

Phase transitions in planningRoll out of a weekly train pattern to specific days (with a day)

User interface for time-displacement diagrams (see next slides)

ScopeA good while, NS was replacing their various planning tools by one application that could plan - during different stages like year, month and day - infrastructure, rolling stock and crew. In team of 50 people, and working together with a UX colleague from Informaat, I was hired to improve the user interface of an application that was already partly build.

ContributionOn this page, you will find a description of my project contributions for various subprojects, on the next pages, you will find a subproject put in the spotlight.

(1) Designing and writing directionsGeneral User Interface and labeling directionsWindow behavior in multi-monitor configurations:The window behavior (open/close, enlarge/ diminish, docking) needs to be defined for 1, 2 and 4 monitor sets.

Illustration for Building Blocks



PROJECT: Redesign Planning Process (planning tool for infrastructure, rolling stock and crew) (2/3)

Problem (1):

Half of the planners prefer to work with a ‘Stacked’ Time-Displacement Diagrams (TDD) that shows 24 hours, with a mixture of all possible services. Because non-existing collisions can show-up, the planner needs to have the possibility to also look at actual days only (for sake of the concept visualisation, a week only consist of 3 days: Mo, Tu, We). Current situation in 3 illustrations:

Mo Tu We

I: TTD with services that actually run on Mondays + / - 3 hours (can be set with the checkboxes)• The X-axis represents time, the Y-axis, the route or displacement. • For sake of concept visualisation, the diagram lacks intermediate stations and

waiting times – see a more realistic display at the page bottom.• Tu and We means that this service also runs on Tuesday and Wednesday• The fundamental idea of planning with a TDD: avoiding collisions starts at the

planning board.• Services are named (Mo, Tu, We) after the day they start at.

II: TTD with services that actually run on Tuesdays + / - 3 hours - besides the fact that we see 12h MoTuWe service again, we also see the21h Mo service that passes midnight

Mo Tu We

Mo Tu We

III: Stacked TTD with services that actually run on Mondays and Tuesdays + / -3 hours - the collision that appears between the 4 h Tu and the 6h Mo service is hardly making sense, the collision between 2 Monday services that actually run on 2 different days keeps even more puzzling.. *

Puzzle solution:

0 3 6

Intermediate station 1

Intermediate station 2

Terminus

Departure station

The two Monday services will never meet because the service that starts at -3h (=21h) will actually passes midnight and continues on Tuesday; the service that starts at 0h starts 21hrs earlier..

TTD with intermediate stations and stops


Highlight: displaying Time-Displacement diagrams

Mo MoMo Mo Mo Mo

Tu

Mo

9 12 15 18 21 24 +30 3-3 6

We

MoTuWe

9 12 15 18 21 24 +30 3-3 6

Mo Tu Tu Tu Tu Tu Tu Tu

We

MoTuWeTu

9 12 15 18 21 24 +30 3-3 6

Mo Mo Mo

MoTuWe Mo Mo Mo

Mo

Mo Tu Tu Tu Tu Tu Tu Tu

We

MoTu

14


PROJECT: Redesign Planning Process (planning tool for inf rastructure, rolling stock and crew) (3/3)


Highlight: displaying Time-Displacement diagrams

Problem (2):

Other planners prefer a Continuous Time-Displacement diagrams (TDD)

StackedMo Tu We

Stacked view

StackedMo Tu We

Scrolling speed increases with MouseDown time

Pushing one of these buttons shows the corresponding day

Stacked view

Stacked button is disabled until user clicks a Mo, Tu or We button

Solution:Offer an effortless switch between a day-by-day view and a stacked view (both continuous scrolling):

Mo Mo Mo Tu Tu Tu

MoTuWe

0 3 6 9

Monday

12 15 18 21 0 3 6 9

Tuesday

12 15 18 21 0 3 6 9

Wednessday

12 15 18 21 24

Mond

Mo Mo MoWe Tu Tu Tu Tu

MoTuWe We We We We We We We

MoTuWeWeTuMo M

18 21 0

Mo Mo

3 6 9 12

TuWe/Tu Tu Tu

MoTuWeTuWe We Tu

Mo/We We MoMo We WWe

15

TuWe Mo

18 21 0

Mo Mo Mo

Tuesday

3 6 12

Tu Tu Tu Tu

MoTuWe

Tuesday

15

Tu

9

Slash indicates the 2 different lines (services) –MouseOver shows which line belongs to which service



PROJECT: Online Public Access Catalog (1/3)

2004 (May ) – 2005 (Jan) | User interface designer, information architect, usability engineer | Leiden University Library

Scope

Early 2004 University Library Leiden started an important project: the switch to a new library automation system: Oclc Pica exchanged for Ex Libris Aleph. Advantages: more standardised disclosure of the library collection – which makes the collection more accessible for the outside world and external systems – and a more flexible system layout.

Important aspect in this project is the design and building of a new Online Public Access Catalog (OPAC), the search and order interface, the shop window of the University Library.

Approach / results

The Aleph OPAC is delivered as a rudimentary application. It was necessary to decide which functions to be kept, to be left out or to be tailored. For this purpose, I interviewed users and other stakeholders within the library, which leaded to personas(archetypical users). I carried out user research into students and scientific staff; both with the existing Oclc Pica OPAC, and with Aleph OPAC’s already in use in other libraries in the world. For important usage scenarios, I created functional, graphical and interaction design. At the same time, I worked on the implementation of important usage scenarios and the design of the rest of the application. I realised the implementation to a large extent, the rest of the application has been delivered in design.

Internet style of Leiden University Homepage of the existing Oclc Pica OPA

Alepg out-of-the-box homepage New Aleph homepage according to the Leiden University internet style

Homepage header

Portfolio 2010.02.24 16




Project challenges

Crystallized ideas about the future OPAC within the University Library complicated the contribution of new ideas.

Absence of Aleph documentation made it hard to see through the Aleph OPAC’s working concept – without a lot of trial and error

The limited possibilities to tailor the Aleph OPAC: in quite a lot of situations, the interaction patterns were settled. In that case, graphical and textual directions were the only tools to give the user guidance.

Tight staffing and budget.

Concept presentation: low fidelity wireframes Concept presentation: medium fidelity wireframes

Persona presentation

Portfolio 2010.02.24 17




On this page, you will find some examples from the final delivery document: some pages are delivered as Html code and documented here, some pages need better design implementation (then they exist both wit and without ‘ONTWERP’ = ‘design’ stamp) and some pages (with ‘ONTWERP’ stamp) only exist in design.

Portfolio 2010.02.24 18


PROJECT: Premium Cd-rom (1/3)

2000| User interface designer, information architect, multimedia developer |LogicaCMG Interactive Media, Amstelveen

Scope

CMG's Telecommunications (a.k.a. Unwired Solutions) needs a contemporary ‘business card' as a premium for stakeholders(clients, future employees, etc.).

Approach / results

I made business card sized cd-rom with:

Company presentation (focused on CMG's Telecommunications)

Four product presentations consisted of introduction texts and an animations of main products.

Because (even in that era) people are overloaded with premiums and information, the entertainment factor is key. This is elaborated in the fresh animation style and the addition of a externally produced screen saver (by Globz.com).

The opening scene ends in a loop in which two girls endlessly move from right to left, whispering something inaudible

Package design

Portfolio 2010.02.24 19



2000| User interface designer, information architect, multimedia developer | LogicaCMG Interactive Media, Amstelveen

Company presentation and various product presentations have various background visuals. When navigating between these various topics, the background moves along. In meanwhile, a jingle plays representing a world region, in ‘CMG’s world’.

Company presentation and various product presentations have various background visuals. When navigating between these various topics, the background moves along. In meanwhile, a jingle plays representing a world region, in ‘CMG’s world’.

Portfolio 2010.02.24 20



2000| User interface designer, information architect, multimedia developer | LogicaCMG Interactive Media, Amstelveen

stills from demo animation for Wap Service Broker (‘symplified mobile internet’) - application: ‘offerings and transactions on the go'

stills from demo animation for Cell Broadcast System (‘location based messaging’) - application: ‘traffic information and rerouting'

Portfolio 2010.02.24 21


EPILOGUE

Having project experience for more than a decade, I have been heavily involved in a large number of projects resulting in both success and failure. This does not make me cynical, but strengthens my vision on the importance of User Experience Design, and project approach:

Met Prince and Got RealYes, I have Prince 2 experience, which in itself might be a good method, apart from the fact that one of its fundamentals' is a watershed between management and execution. Personally, I rather believe in the incentives that arises from changing tasks and roles, by which talent can be exploited in an optimal form – also when it comes to management and execution. Rather the method Getting Real (http://gettingreal.37signals.com/).

ICT staff can make interfaces – even betterThough I think that ICT should not have the lead in projects that have computer-human interfaces, I believe in close collaboration with ICT staff. User Experience is about structuring information, a common ground with ICT. Close contact guarantees that the designs can be built: that it is known what is possible within a reasonable budget and time, in an early stage. Furthermore, programmers often can make a difference in the interfacing with a few lines of code, as I often make a difference in coding, slightly adapting the interface and saving pages of code. But most of the time, we both just perform better in what we where hired for.

The art of breaking down ambitionsWithout any restrictions of staff, and budget, anything can be realized – sooner or later. Unfortunately, in reality we have to cope with restrictions. Although, I too often see digitally illiterate clients, wildly brainstorming with ICT-staff who feel highly respected and challenged by so much unbridled imagination. You think it – we’ll make it. Finally realising the impact on budget, staff and time, the project is often more than half way. At that time ICT-staff are most involved in the project, because building is their job – while the client is heavily distracted by daily routine – and so ICT is at the helm when it comes to determine what to build and what not to build . Certainly no guarantee for success. I rather see restrictions as source of inspiration, to focus on what really matters. Needless to say that this is where a UX designer comes in: at the start of the project, to find out what is really important to the user and the client’s business, and to find out what the ICT effort will be. This is why I say in jest that I come ‘to break down ambitions’, or when the audience is more serious: to focus ambitions.

Thanks a lot for your attention – if you feel like seeing more or getting in contact, see further contact details on the introduction page.

Igor Freeke, February 2010

Portfolio 2010.02.24 22

http://gettingreal.37signals.com/