Portfolio
Imeh Akpan Interaction Designer, Design Researcher and Creative Technologist
WELCOME
I love getting ideas out and discovering what happens, which is what frames this portfolio along with some of my own experiences through the projects in the solid coloured dividers. Heading into the work itself, the projects depicted are a sample of things I’m most proud of. I hope you enjoy my journey so far and that by the end you’ll want to be part of it.
ERACTIVITY ART EMERGING TE ATIVE PASSIONATE AMBITIOUS stener observer team playe ERACTIVITY ART EMERGING TE ATIVE PASSIONATE AMBITIOUS stener observer team playe ERACTIVITY ART EMERGING TE ATIVE PASSIONATE AMBITIOUS stener observer team playe
ECHNOLOGIES EXPRESSIVE CURI innovative thinker persua yer fun enthusiastic ARTIST WHO AM I? ECHNOLOGIES EXPRESSIVE CURI innovative thinker persua yer fun enthusiastic ARTIST ECHNOLOGIES EXPRESSIVE CURI innovative thinker persua yer fun enthusiastic ARTIST I think we’re fascinating creatures full of unbridled potential when we dare to explore and experience. People and nature fascinate me; from a young age I’ve stared and got lost in the world around me, when I was young it wasn’t so weird and creepy but my mum was convinced I had a hearing impairment (my hearing is perfectly fine by the way). As I’ve grown older experimentation, artistic expression and design research has allowed me to capture and view the world in new and insightful ways.
MY CRAZY AMBIDEXTROUS MIND RESEARCHER Analytical Curious
• Crave data, frameworks and methodologies that inform design • To discover, empathise and experience through listening and observation • Observing human behaviour and relationships • Advocate of user-centred design processes and interaction • Knowledge Sharing
• Imagining and creating new experiences with emerging technologies • Not afraid, to fail, to look stupid, to learn something new • Attracting, engaging and captivating the audience • Invoking expression and creativity from the audience
INTERACTION DESIGNER CREATIVE CODER Expressive Ambitious
EDUCATION
2004 - 2007
2011 - 2012
QUEEN MARY, U. OF LONDON
UNIVERSITY COLLEGE LONDON U. OF LONDON
BSc (Hons) Computer Science with Business Management, School of Electronic Engineering and Computer Science.
MSc Human-Computer Interaction with Ergonomics, Division of Psychology and Language Sciences
TECHNICAL - SELF TAUGTH
WHAT I’VE LEARNT
WHAT I’VE LEARNT
WHAT I’VE LEARNT
Software Engineering Object Oriented Programming(JAVA), Logic and Discrete, Structures, Systems Analysis, Database Systems, Networks and Operating Systems, Graphical User Interfaces (C++ Image processing), Artificial Intelligence, Software Risk Assessment, Fundamentals of Management, Economics for Business, Marketing, Strategy and Human Resource Management.
Ergonomics for Design Design Experience Applied Cognitive Science Design Practice Affective Interaction Interfaces and Interactivity User-Centred Evaluation Methods MSc HCI-E Project
HTML5 CSS Javascript ( jQuery) openFrameworks Processing(.js)
SKILLS
GENERAL Presentations, communication negotiation and persuasion consultancy skills workshop/ Focus group management TECHNICAL C++: openFrameworks Java: Processing(.js) Back-end: PHP, PostgreSQL Front-end: HTML5, CSS, jQuery Hardware: Arduino Libraries: OpenCV RESEARCH Observation Field notes, Sketch notes Contextual enquiry interviews, Questionnaires ANALYSIS Quantitative analysis Task analysis Personas, Scenarios DESIGN Sketching Storyboards, User journeys Low & high fidelity prototypes Balsamic, Axure Pro, OmniGraffle Illustrator, InDesign Photoshop EVALUATION Cognitive walkthrough, Think aloud protocol Card sorting Usability testing, Remote usability testing
READ BOOKS
BEGINNER
INTERMEDIATE
ADVANCED
PRO
10
11
DATE: June 2013, 2 Days PLATFORMS: Mobile DELIVERABLES: Expert Review, Report
EE Shop Checkout process
I was asked to identify UX issues with their current online checkout process and produce a simple visual way of outlining these for a client presentation underlying reasoning and possible solutions.
MY RESPONSIBILITIES: Design
research, Usability testing, Expert review, Wireframing.
THE BRIEF
WHAT I DID
I was asked to identify and assess the current UX issues in the EE Checkout screen and produce a simple visual way of outlining these for a client presentation. Develop UX solutions for indentified UX issues and represent these in a clear visual format that expressed both the solution itself and the underlying reasoning.
14
•
Brief benchmaking exercise consisting of screen shots of competitor checkout screens.
•
Heuristic analysis of EE’s current checkout screen annotated with call-outs that covered issues, solutions and questions.
•
Wireframe mock ups using OmniGraffle, of potential UX solutions for some of the identified issues.
•
Prepared the presentation pack for client sign-off.
This is a sample set of wireframes from the UX solution pack (release pending). The recommendations were well received by the EE shop team
Including a list of what the customer would need to complete the checkout process.
Allowing the customers to easily view and modify their order at all stages of the purchase without taking them out of the checkout process.
15
Designing with content and mobile in mind, removing unnecessary steps for simplification and ease of use for mobile.
“If you don’t think about what kind of space the display commands, or how people flow through the space and how their attention is taken, then we really end up with a dead work.”
UCLIC Thesis Project
DATE: Jun 2012 – Sept 2012 PLATFORMS: Public Screen Projection DELIVERABLES: Report, CHI Paper
Exploring the effects of space and place on engagement with an interactive installation
This was an individual research project investigating display interactivity in public spaces. This project allowed me to explore my personal interest in emerging technologies.
MY RESPONSIBILITIES: Research,
planning and negotiation, openFramework coding and Arduino building, ethnography and analysis.
THE BRIEF User participation is critical to the success of interactive displays in public space, how we successfully encourage user engagement has been a big question in the HCI community. Previous research has identified an interaction between spatial structures and the kinds of social activities enacted within them, but there are also questions around the importance of the place and the social behaviours it affords. The main reason for exploring these questions was to gain insight into how space influences and affects the way passers-by interaction with public installations and displays. We addressed this issue with a novel approach: studying how people engaged with the same interactive installation in ten situations with varying spatial and social properties.
20
THE INTERACTIVE INSTALLATION SHADOW WALL Shadow Wall aims to evoke an audience’s sense of memory. It captures an instance of an individual’s or group’s movement as shadow silhouettes. Moving shadows stack up into different layers creating a collage, forming a coherent piece of art that is projected onto any clear white wall.
THE BUILD Coded with openFrameworks by Gareth Hallberg for loop festival 2008 using a Passive Infrared (PIR) motion sensor, a firewire camera and a projector. Using an Arduino micro-controller and a ledPin, I sketched code to detect the state of the PIR motion sensor and integrated it into Shadow Wall so that motion determined when to record and when to play.
21
THE LOCATIONS • A fun informal space of Adrenaline Alley Skate Park in Northamptonshire • Vibrate clothes store of Urban Outfitters on Oxford Street, London • Professional dance performance space, Danceworks dance studio • University campus: Print Room Cafe and during events in the Engineering Building Foyer and Cloisters .
Urban Outfitters Oxford Street
The results of collabration with the display manager to ensure the Shadow Wall fitted within the existing style of the space.
WHAT I DID
Group interaction
22
Expression
•
Sourcing locations for the study
•
Negotiation and successfully planned 10 studies
•
OpenFramework coding
•
Arduino build and coding
•
Ethnography and analysis conducted over four weeks
•
10 days of ethnographic observations
•
Qualitative observations: making field notes sketches and photos where possible
•
Qualitative Analysis: Deriving Qualitative themes.
OUTCOMES The main finding across these studies was that place trumps space: a conducive social context could overcome a poor physical space and encourage interaction; conversely, an inappropriate social context could inhibit interaction in spaces that might normally facilitate engagement. We discussed this finding in terms of the salience of the display within the space, the visibility of incidental interactions with the installation, the different understandings of place that people had in the same location and the role of emergent champions and comperes in encouraging interaction.
This thesis was later made into a paper and was approved for publication in CHI ‘13 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems in which I presented.
23
“Be someone else. To create relevant experiences, you have to forget everything you know and design for other.� -Niko Nyman, The value of User Experence
DATE: Mar 2012, 2 weeks PLATFORMS: Mobile DELIVERABLES: Poster, Report
Linking people through content
As part of the Design Experience 2 module; this was a group concept project to design and evaluate an interaction through which additional media content might be experienced on a mobile device.
MY RESPONSIBILITIES: Design
research, Design, Focus group lead, Graphic design
THE BRIEF
USER-CENTRED PROCESS RESEARCH
With smart phones becoming more ubiquitous and with increasing network capability, the potential to link content using multiple devices is increasing.
DVLA regulations W3C WCAG & Mobile Patterns & Guidelines Online questionnaire Interviews
BBC Future Media asked us to design and evaluate an interaction through which additional media content might be experienced on a mobile device while listening to the radio and driving. They were interested in how they could help audiences discover and contribute to relevant content and how sources of information and mechanisms for participation could be linked to radio.
ANALYSIS
Affinity diagrams Eliciting requirements Provisional personas Scenarios Storyboards
DESIGN
Ideation techniques Sketching Scenario based design Interactive prototype
As part of a 2 week Design Experience module, we were asked to focus on linking to additional content related to a given programme. The client wanted us to imagine the future 10 years from now, for me there is no better task; the challenge to be innovative excites and drives me in design which means gaining a true understanding of user needs and wants.
EVALUATION
Scenario based user testing Paper prototyping
28
WHAT I DID Using character profiles for persona development James Smith Family Man
Understanding the target audience Through interview based questionnaires with members of the public, we discovered a social aspect existed within families when it came to listening to the radio, together or apart. We saw this interaction was not currently supported and with families spending less time together this was one of the target groups we decided to design for.
Starts work early, misses morning time with the family
Mark Jones Taxi Driver Alway misses interesting mentions on the radio when keeping up a fare.
29
• I was involved in creating personas grounded in user research. • I took a lead role during contextual enquiry with members of the public and led several scenario based focus groups. • I created several prototypes and Wireframes, representing core functionality going through iterative user -testing. • I worked with Adobe Illustrator CS5 and InDesign to create the final concept poster • I presented to module supervisors and members of the BBC R&D team in a poster and demo presentation.
Scenario based design and evaluation through storytelling.
It’s 6am on a Monday morning, you and the family are all up to the sound of 5 live breakfast and getting ready for the day ahead. Your partner is listening in the kitchen while preparing breakfast and you’re listening from the bathroom.
The presenters on the radio start talking about a topic that catches your attention and you push the tag button on the steering wheel. This happens several times during your journey to
You hate to leave the family at the breakfast table but you need to be in work for 8:30am. In the car you turn on the car ignition and the car radio automatically goes to the same station
Meanwhile at home, your wife/husband has switched the radio station to Radio 4. This change can be seen on your car radio display. Would this be useful?
as the kitchen radio. What do you think of this
feature? The family can see on the kitchen radio that you’re listening to the same
News about an issue you and your partner had been discussing the night before is being reported. Your wife/ husband tags it with a message and puts it up on both her profile and yours,
station. How does this feature make you feel?
How would you feel about this?
You place your mobile into the car’s mobile cradle and your profile is automatically linked to the in-car
You’ve been listening to a captivating discussion and it’s getting interesting but you’ve arrived at work. As you turn off the car radio, you can resume from the exact point on your mobile phone.
system. What do you think about this feature?
Using scenario based design, I took the role of lead narrator, describing features of the system in relation to different situations so that we could identify different user emotions.
work. (Talking point).
Your daughter/son loves drawing, as an image of your favorite radio presenter appears on the kitchen’s radio she/he draws a funny picture over it and sends it to your profile with a message. When you stop at a traffic light, you receive a notification popup and you choose to view the message from your car radio,
How do you feel? As you begin driving again the radio fades back to driving state.
30
How would you feel about this? At the end of a very busy day you relax with your wife/husband. You go to your BBC profile page on your iPad and view the day’s content. Given your viewing habits, the service pulls content related to your tags from all BBC services (iPlayer, radio, podcast and BBC websites) You opt to listen and explores the related content sent by your wife/ husband and begin chatting about it.
(Discussion).
OUTCOMES “Do fewer things better.” - BBC
Taking the BBC R&D motto ‘Doing fewer things better’. We design a mobile app with very clear elegant interface in drive mode the interface was minimised to reduce distraction, buttons were larger and moving imagery was removed. Social connections were added to the BBC profile allowing you to Tag connect for others as well as yourself. Sharing and Tagging functionality was linked to the BBC profile. We designed functionality that allowed the user to connect with others over radio waves by tuning in with what they were listening to.
31
Systems4All
DATE: Dec 2011, 2 weeks PLATFORMS: Ergonomics DELIVERABLES: Bid Pitch, Report As part of the Design Experience 1 module; this was a group proposal project where I gave a presentation pitching for the full contract, in which our team won.
Ergonomics design for a library workspace
MY RESPONSIBILITIES: Project
manager, Interviews, Findings Analysis, Reporting, Iterative design, Prototyping and User testing.
THE BRIEF
USER-CENTRED PROCESS RESEARCH
This mini-project was an intensive ten-day group activity which would see us assess and develop a self-service terminal for off-the-shelf sales to public libraries, to reduce queues to the main desk. We built and tested a full size model of the workstation. Ergonomic guidelines provided a conceptual basis for good workstation design.
Observation Interviews Contextual Enquiry
ANALYSIS
Identify limiting users Eliciting requirements Task Analysis Spatial Analysis
DESIGN
Sketching Wizard of Oz prototyping Low fidelity prototyping Interface design 3D modeling
EVALUATION
Fitting trials Paper prototyping
36
Contextual Enquiry was carried out in a large public library in London that had several self-service terminals.
Task Analysis
Staff were interviewed about peak time library use and support given to limiting users.
Sketching and creating a Mock-up with dimensions informed by fitting trials data. Human-Machine Interaction (HMI) features informed by stated requirements as well as relevant HMI guidelines.The mock-up and wireframes validated design/functional spec and decisions that came out of the initial static data.
37
Spatial Analysis enable us to explore the physical movements of each user group along with the possible interactions they would have with the terminal and staff in terms of movement sequence, frequency and importance. We could then experiment with possible workspace layouts and the effect they would have on queues at the desk, identifying the layouts that would reduce queues. This analysis also allowed us to identify the target group for the self-service machine.
WHAT I DID • I organised several observational field studies and interviews section with users through networks. • I was involved in the contextual enquiry, observational research and analysis. • I produced several operational sequence diagrams and the illustrations from spatial analysis. • I helped in creating a low fidelity cardboard prototype of the standalone terminal which was used in evaluations. • I Presented the pitch to module supervisors and clients.
Spatial Analysis
Prototyping
38
OUTCOMES A flexible standalone terminal was designed with a simple usable and accessible interface. It incorporated a detachable book bin with automatic slot that would open when a book was scanned for return. Smartcard facilities for payment and other library services, cash/card facilities were also provided. Clearance is given for wheelchair users.
Our solution and bid presentation was recognised as the winning pitch.
Iterative design was key to our approach: there was value in getting users in front of our design concepts. In each
phase we refined 3D mock-ups based on user testing, further incorporating appropriate HMI guidelines and creating detailed user journeys in Balsamic.
39
Thank You
for taking the time and making it to the end. If you would like further information about any of the projects, feel free to contact me at. E. hello@imehakpan.com T. twitter.com/imeh_akpan B. www.imehakpan.com