Your SlideShare is downloading. ×
0
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Igor Freeke Portfolio20100224
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Igor Freeke Portfolio20100224

1,028

Published on

Examples of User Experience Design

Examples of User Experience Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,028
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Portfolio 2010.02.24 Examples of User Experience Design igor freeke User Experience Design
  • 2. 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 igor@freeke.net Feel free to contact me at igor@freeke.net 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. igor freeke User Experience Design Portfolio 2010.02.24 2
  • 3. PROJECT: Intranet Site and Website for Alumni 2009 (Dec) – 2010 (Feb) | User Experience design | Hogeschool van Amsterdam Domein Economie & Management 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) Clickable prototype and documentation igor freeke User Experience Design Portfolio 2010.02.24 3
  • 4. 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) igor freeke User Experience Design Portfolio 2010.02.24 4
  • 5. 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 Scope SDU 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 Vacancies overview Vacancy 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 Aplicants overview Applicant igor freeke User Experience Design Portfolio 2010.02.24 5
  • 6. 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 Applicant rating Rating overview 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 Invitation igor freeke User Experience Design Portfolio 2010.02.24 6
  • 7. 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 Home Animation runs at mouseOver 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. 2nd level page 3rd level page (infographic by Animation stills igor freeke myself) User Experience Design Portfolio 2010.02.24 7
  • 8. PROJECTS: tomtom.com/whytomtom, 2 TomTom Product Launches (2/3) 2008 (Jan – Apr) | Project manager, content specialist | TomTom International, Amsterdam 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 Storyboard for product banner (by myself) Text writing, editing igor freeke User Experience Design Portfolio 2010.02.24 8
  • 9. PROJECTS: tomtom.com/whytomtom, 2 TomTom Product Launches (3/3) 2008 (Jan – Apr) | Project manager, content specialist | TomTom International, Amsterdam 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) igor freeke User Experience Design Portfolio 2010.02.24 9
  • 10. PROJECT: Implementation of Hylo Knowledge Management System (1/3) 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. Nuon / Hylo change management Slides from a presentation about Hylo’s working principles and project workflow document) course (1/2) igor freeke User Experience Design Portfolio 2010.02.24 10
  • 11. PROJECT: Implementation of Hylo Knowledge Management System (2/3) 2008 (Jan – Apr) | Project manager, information designer | Nuon, Amsterdam (gas and electricity company) 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 Top: Slides from a presentation about Hylo’s working principles and project course (2/2) (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) Right: Hylo statistics document 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; igor freeke the process approach had a more pragmatic character (time boxing) User Experience Design 11
  • 12. PROJECT: Implementation of Hylo Knowledge Management System (3/3) 2008 (Jan – Apr) | Project manager, information designer | Nuon, Amsterdam (gas and electricity company) 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) New workflow for Content Management department Key Performance Indicator document (management dashboard) Technical issue document (all both for Nuon Retail as Nuon Business) Pages from hand-over documentation igor freeke User Experience Design Portfolio 2010.02.24 12
  • 13. 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 planning Planning of staff for logistical rolling stock displacements (displacements without passengers like shunting) Illustration for Building Blocks Splitting up a train service, taking out the middle of the route In case of an accident in the middle of the route, 2 services are Scope planned on both ends, which also demands for two new A good while, NS was replacing their various planning tools by one turning points on the borders of the removed mid section 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 (3) Making visual explorations based on business cases, acting as hired to improve the user interface of an application that was sparring partner (for business consultants), making a starting point already partly build. for further technical elaboration. Building blocks Contribution System for reservation of infrastructure for cargo transporters On this page, you will find a description of my project contributions (independent companies that hire infrastructure from NS) for various subprojects, on the next pages, you will find a subproject Phase transitions in planning put in the spotlight. Roll out of a weekly train pattern to specific days (with a day) User interface for time-displacement diagrams (see next slides) (1) Designing and writing directions General User Interface and labeling directions Window behavior in multi-monitor configurations: The window behavior (open/close, enlarge/ diminish, docking) needs to be defined for 1, 2 and 4 monitor sets. igor freeke User Experience Design Portfolio 2010.02.24 13
  • 14. PROJECT: Redesign Planning Process (planning tool for infrastructure, rolling stock and crew) (2/3) 2005 (Apr) – 2006 (Feb) | User interface designer, information architect | Nederlandse Spoorwegen (NS - Dutch rail), Utrecht Highlight: displaying Time-Displacement diagrams Mo Problem (1): Tu Mo Tu Tu Tu Tu We Tu Tu Tu Tu Half of the planners prefer to work with a ‘Stacked’ Time- Displacement Diagrams (TDD) that shows 24 hours, with a We mixture of all possible services. Because non-existing collisions can show-up, the planner needs to have the possibility to also -3 0 3 6 9 12 15 18 21 24 +3 look at actual days only (for sake of the concept visualisation, a Mo Tu We week only consist of 3 days: Mo, Tu, We). Current situation in 3 II: TTD with services that actually run on Tuesdays + / - 3 hours - besides the illustrations: fact that we see 12h MoTuWe service again, we also see the21h Mo service Mo that passes midnight Tu We Mo Mo Mo Mo We Mo Mo Mo Tu Mo Tu Mo Mo Tu Mo Mo Tu Tu Mo Tu We Tu Mo Tu Mo Tu Mo Tu -3 0 3 6 9 12 15 18 21 24 +3 Mo We Mo Tu We -3 0 3 6 9 12 15 18 21 24 +3 I: TTD with services that actually run on Mondays + / - 3 hours (can be set with Mo Tu We 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 III: Stacked TTD with services that actually run on Mondays and Tuesdays + / - waiting times – see a more realistic display at the page bottom. 3 hours - the collision that appears between the 4 h Tu and the 6h Mo service • Tu and We means that this service also runs on Tuesday and Wednesday is hardly making sense, the collision between 2 Monday services that actually • The fundamental idea of planning with a TDD: avoiding collisions starts at the run on 2 different days keeps even more puzzling.. * planning board. • Services are named (Mo, Tu, We) after the day they start at. Terminus Puzzle solution: Intermediate station 2 Intermediate station 1 Tuesday; the service that starts at 0h starts 21hrs earlier.. Departure station starts at -3h (=21h) will actually passes midnight and continues on igor freeke 0 3 6 The two Monday services will never meet because the service that User Experience Design TTD with intermediate stations and stops 14
  • 15. PROJECT: Redesign Planning Process (planning tool for inf rastructure, rolling stock and crew) (3/3) 2005 (Apr) – 2006 (Feb) | User interface designer, information architect | Nederlandse Spoorwegen (NS - Dutch rail), Utrecht Highlight: displaying Time-Displacement diagrams Problem (2): Other planners prefer a Continuous Time-Displacement diagrams (TDD) Mo Mo Mo Tu Tu Tu We Mo Mo Mo Mo We Mo Mo Mo Tu Tu Tu Tu We Tu Tu Tu Tu We We We We We We We We We M 0 3 6 9 12 15 18 21 0 3 6 9 12 15 18 21 0 3 6 9 12 15 18 21 24 Monday Tuesday Wednessday Mond Solution: Offer an effortless switch between a day-by-day view and a stacked view (both continuous scrolling): Slash indicates the 2 different lines (services) – MouseOver shows which line belongs to which service Mo Mo Tu Mo/ We/ Tu Mo Mo Mo Tu Tu Tu Tu We Tu Mo We Mo Tu We Tu We We Tu We Mo Mo Tu TuWe Mo Tu We We Tu W 18 21 0 3 6 9 12 15 18 21 0 3 6 9 12 15 Tuesday Tuesday w Stacked view Stacked vie  Mo Tu We Stacked   Mo Tu We Stacked  Scrolling speed increases Pushing one of these buttons Stacked button is disabled until user with MouseDown time shows the corresponding day clicks a Mo, Tu or We button igor freeke User Experience Design Portfolio 2010.02.24 15
  • 16. 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: Homepage header 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 Internet style of Leiden University Homepage of the existing Oclc The Aleph OPAC is delivered as a rudimentary application. It was Pica OPA 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 Alepg out-of-the-box homepage New Aleph homepage according of the application has been delivered in design. to the Leiden University internet style igor freeke User Experience Design Portfolio 2010.02.24 16
  • 17. PROJECT: Online Public Access Catalog (2/3) 2004 (May ) – 2005 (Jan) | User interface designer, information architect, usability engineer | Leiden University Library 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. Persona presentation Concept presentation: low fidelity wireframes Concept presentation: medium fidelity wireframes igor freeke User Experience Design Portfolio 2010.02.24 17
  • 18. PROJECT: Online Public Access Catalog (3/3) 2004 (May ) – 2005 (Jan) | User interface designer, information architect, usability engineer | Leiden University Library 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. igor freeke User Experience Design Portfolio 2010.02.24 18
  • 19. 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.). Package design 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 igor freeke User Experience Design Portfolio 2010.02.24 19
  • 20. PROJECT: Premium Cd-rom (2/3) 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’. igor freeke User Experience Design Portfolio 2010.02.24 20
  • 21. PROJECT: Premium Cd-rom (3/3) 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' igor freeke User Experience Design Portfolio 2010.02.24 21
  • 22. 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 Real Yes, 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 better Though 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 ambitions Without 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 igor freeke User Experience Design Portfolio 2010.02.24 22

×