Clive K. Lavery / Portfolio 2016

Clive is a Freelance UX Person based in Berlin with 10 years of experience helping various agencies and in-house teams to make their users and clients happy.

He particularly enjoys working in collaborative environments where designers, developers and stakeholders break out of their silos for the best results with as much fun and little ego as possible.

He is not quite sure why all this is written in the third person but is most surely looking forward to meeting you and talking about worldwide freelancing, teaching and speaking opportunities or collaborating on interesting projects.

Transcript

1. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 CLIVE K. LAVERY / PORTFOLIO 2016
2. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 Clive is a Freelance UX Person based in Berlin with 10 years of experience helping various agencies and in-house teams to make their users and clients happy. He particularly enjoys working in collaborative environments where designers, developers and stakeholders break out of their silos for the best results with as much fun and little ego as possible. A self-proclaimed Digital Do-Gooder he is also constantly looking for ways to use his experience for social good and as the son of a German mother and an English father he is also very good at being annoyingly pedantic while drinking large amounts of tea. He is not quite sure why all this is written in the third person but is most surely looking forward to meeting you and talk about worldwide freelancing,teaching and speaking oppor- tunities or collaborating on interesting projects. CLIVE K. LAVERY
3. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 3 EDUCATION ‣ Workshops & Training ‣ 1 to 1 Mentorship & Coaching ‣ Public Speaking ‣ Writing UX & INTERACTION DESIGN ‣ Concept Development ‣ Information Architecture ‣ Wireframing & Prototyping ‣ User Research & Testing T H I N G S I D O F O R M O N E Y CONSULTING ‣ Digital & Social Media Strategy ‣ Expert Reviews & Audits ‣ Process Optimisation ‣ Trend Reports
4. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 S E L E C T E D C L I E N T S
5. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 SOFTWARE ROLL-OUT I have trained 400+ local users and European superusers in a new global sourcing software and related processes and was involved in extensive black-box testing and initial first-level support. DIGITAL STRATEGY I have raised client awareness for digital trends and helped them to establish strategies and social media competencies on various occasions. T H I N G S I ’ V E D O N E O V E R T H E Y E A R S UX LEAD FOR AGILE TEAMS Embedded in mobile and web teams I have helped introduce agile methodologies and worked in established structures for a couple of large clients. NDA WORK I have to be vague about some projects and clients due to strict contractual agreements but am happy to discuss general insights on request. LARGE (RESPONSIVE) WEBSITES Built on 700 page specifications to lean documentation I have seen many websites go-live and the odd one fail during my career. IOS & ANDROID I have worked on smartphone and tablet apps and have investigated the potential of beacons in this field. I also had a short glimpse at wearables.
6. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 6 A T Y P I C A L U X D A Y O F T H I N G S
7. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 T H I N G S I ’ V E L E A R N E D A L O N G T H E W A Y JOB TITLES Mean nothing. I’d rather just know what you can do and get stuff done together. If I saw a ninja unicorn in real life I’d probably shoot it. PORTFOLIOS People don’t spend more than 5 minutes looking at your carefully crafted portfolio. It should raise curiosity then the rest is down to power of persuasion and mutual sympathy during an interview. METHODS AND TOOLS Are no religion. Being agnostic about them and picking what helps solving the problem in question is healthy and sensible. DESIGNERS AND DEVELOPERS Are my friends. Ignore or involve them too late at your own peril. Hell hath no fury like a geek scorned.
8. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 8 A bit of a do-gooder at heart I think digital folks can do more with their skills than just make rich companies richer. I volunteer for Germany’s largest donation & fundraising platform betterplace.org and support akinda, an organisation that helps unaccompanied refugee kids find a legal guardian in Berlin. 
 
 For a fundraising event I lost 11kg and thereby raised 600 EUR for akinda and am continuously helping with their website thereby dabbling a little in Squarespace.
 I put on 10kg again since - but that’s a different story. Finally I have set up the aptly named Digital Do-Gooders group on LinkedIn which aims to connect like minded individuals. I am a qualified IHK instructor for apprentices (AEVO) and have mentored 4 young talents during their internships at Publicis Pixelpark. 
 I engaged in the IxDA’s Education Summit in Amsterdam and have spoken at Hyper Island in Manchester, btk Berlin, my old vocational college in Cologne and have taught at the European Media and Business Academy (EMBA) in Düsseldorf. As a current UX mentor for Career Foundry I help students via regular Skype sessions with their course work and general questions.
 
 Watching people grow as a person and a professional really excites me and I want to do much more teaching and training in the near future. O T H E R T H I N G S I C A R E A B O U T As a member of the planning team for Europe’s largest UX barcamp (aptly named UXcamp Europe) and initiator of UX Book Club Berlin I am proud to give something back to this lovely professional and friendly community. I can often be found with a bottle of beer Mate at UX, Service Design and similar meet-ups in Berlin or wherever my love for travelling leads me. I have held sessions at various events across Europe (Berlin, Copenhagen, Düsseldorf, Brighton), was invited as a speaker at World IA Day in Copenhagen and as a coach for the Global Service Jam 2016 in Berlin. SOCIAL GOOD COMMUNITY EDUCATION
9. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 THAT WAS ME IN A NUTSHELL The following slides contain a couple of case studies and should give you a better impression of how I approached recent projects. Or you can jump directly to slide 20 and find my contact details.
10. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 C A S E S T U D Y / P F I Z E R . D E R E L A U N C H pfizer.de is the first port of call for patients, job seekers, media and 
 healthcare professionals who want to know more about Pfizer in Germany and their offerings. During the 7 months of the initial project phase I was responsible for sharpening and translating the digital strategy into a concept thereby reducing content clutter and improving the information architecture in close collaboration with the client, designers, developers and editorial team. ‣ Strategy ‣ Concept Development ‣ Information Architecture ‣ Storytelling ‣ Workshop Facilitation ‣ Workflow Optimisation PROJECT BACKGROUND & SCOPE
11. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 11 During an initial kick-off workshop at the client’s HQ we established the major pain points of the current site and helped shape a new strategic approach for the main website.
 
 It was key to distinguish it from the various brands and micro-sites living under the Pfizer umbrella. I started by analysing the current content structure whereby Site Orbiter was a very handy tool for creating a rough content inventory that I could discuss further with the client. C A S E S T U D Y / P F I Z E R . D E R E L A U N C H
12. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 12 Making sense of it all It became apparent that a lot of content was obsolete, the information architecture pretty bloated and the site lacked a clear cut profile. This is quite common for a lot of corporate websites I have come across during my career so defining the top tasks for users and aligning the website with the digital strategy goals was paramount to a successful relaunch. I then laid out the main page types, modules and elements (my names before atomic design became a buzzword) new information architecture and initial wireframes. Axure still seems like a good tool for larger websites with a deep page structure although I am currently aiming to switch to Sketch in combination with e.g. InVision, Principle or Framer. 
 But that’s a different story altogether and with what I`ve seen from Adobe Comet there will probably some interesting things to come in 2016. Laying the groundwork C A S E S T U D Y / P F I Z E R . D E R E L A U N C H
13. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 13 No matter what condition, most patients undergo a journey leading them from having symptoms, seeking and getting diagnosis, making sense of it all and finding a plan to optimising/adjusting to the new circumstances and then living with it. I developed a template that incorporates many elements for telling a lively story and at the same time provides access to further information for patients to help them on their journey e.g. expert interviews, patient organisations or dedicated micro-sites like wegweiser- rheuma.de, ichbeimarzt.de, impf2.de or pfizermed.de for healthcare professionals - all sites I was also the responsible UX person for. The story template is flexible enough to present e.g. R&D or employer branding content in a more engaging way and there are 4 core templates that ensure all other information incl. product information, company news and a restructured media center can be displayed. I also set up a working document for our editorial team so they could create and deploy content into the Typo3 backend according to the new website structure. C A S E S T U D Y / P F I Z E R . D E R E L A U N C H
14. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 14 Internally I established a workflow in JIRA that enables early collaboration and understanding between the design and developer team. For each major page there is a master ticket that briefly describes its raison d’être and has a screenshot of the current scribble, wireframe or design attached. The individual modules (or Content Elements in Typo3 speak) are created as sub-tasks to this master ticket so it is immediately clear what constitutes each page. The sub-task ticket is divided into a brief conceptual description and a basic technical description of the requirements. I made a point of writing each ticket together with a developer to ensure we shared a common understanding and language early on in the project. The client could also review the content and status at every time so we could discuss and assign open questions in our weekly meetings. At the end of the project this format could also be exported to Excel thereby doubling as a high level specification and reference document.
 
 This workflow is now a blueprint for similar projects throughout Publicis Pixelpark in Berlin. C A S E S T U D Y / P F I Z E R . D E R E L A U N C H
15. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 C A S E S T U D Y / B E R L I N A I R P O R T A P P Berlin’s new international airport BER will someday (™) be Europe’s most modern airport and requires an accompanying mobile app. From 2012 - 2015 I was responsible for the continuous conceptual development of the iOS app and later adoption to Android. Close collaboration with the client, product owner,designers and native developers was paramount to ensure a useful and timely mobile experience. ‣ Benchmarking ‣ Requirements Gathering ‣ Concept Development ‣ Interaction Design ‣ Workshop Facilitation ‣ Workflow Optimisation PROJECT BACKGROUND & SCOPE
16. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 16 Based on the client brief, a requirements gathering workshop and extensive benchmarking of other airport apps a content inventory was my framework for discussion and idea generation. 
 In this project it was also used to get all stakeholders on board and expanded to be a hands-on project planning tool before the team switched to JIRA and regular stand up meetings. Since the goalposts for the opening of Berlin international airport (BER) moved and moved and moved early on in the project it was soon clear the app had to cater for both existing airports Tegel (TXL) and Schönefeld (SXF).
 
 The same was true for the airports’ desktop and mobile website which I also worked on. But that’s a different story. Analysis C A S E S T U D Y / B E R L I N A I R P O R T A P P
17. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 17 „My Flight“ is one of the app’s core features as it lets travellers browse all screens without losing focus on their flight details. Critical flight updates also activate a Push Notification. Getting the required data from various sources was one of the main challenges during this project. I created a concept specification matrix for different „My Flight“ states in close co-operation with the client’s technical department to stay on top of all the different possibilities. The departures and arrivals list allows users to ‣ Search for flights ‣ See status changes to flights ‣ Save as “My Flight” ‣ See more details ‣ Forward details to friends & family Interestingly these features got a lot of positive feedback from taxi drivers and plane spotters, both persona groups I had not really factored in initially. C A S E S T U D Y / B E R L I N A I R P O R T A P P
18. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 18 As soon as there was a first prototype on TestFlight most changes e.g. Passbook integration for iOS were made there and discussed in regular standup meetings with the product owner, developer, designer and software tester. Features incrementally added include
 ‣ iCal export ‣ Live public transport times ‣ Passbook voucher integration ‣ Improved flight detail pages ‣ iBeacon specials I took a rather pragmatic approach to documentation and showed wireframes of 
 the screens and bullet points for each functionality to the client in regular workshops so they could be circulated easily if need be. 
 
 Amendments since the last meeting where highlighted with a star. 
 After sign-off the slides where used to brief the design and development team. C A S E S T U D Y / B E R L I N A I R P O R T A P P
19. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 19 Although iOS was seen as the leading app there where quite a few design tweaks necessary to make it feel an intuitive product for Android users. Many Android screens were directly designed based on scribbles and discussions with the developer which made most wireframes obsolete and is the right way to go when creating highly interactive products. 
 With the advent of Material Design having one operating system lead the way and the other one follow will probably be a thing of the past if the joy of use should not be compromised. In early 2015 the iOS App had been downloaded 70.000 times in the App Store with an average rating of 4.5 stars. The Android app was also successfully adopted and had been at 20.000 downloads from the Google Play store in early 2015, with an average rating 
 of 4.3 stars. So as far as I am concerned Berlin and airports go together like tea and biscuits. C A S E S T U D Y / B E R L I N A I R P O R T A P P
20. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 GET IN TOUCH Find my CV on LinkedIn or XING. 
 I live at www.cklavery.net and I’m @cklavery on twitter & most of the internet. Clive K. Lavery // Warthestr.15 // 12051 Berlin +49 (0) 151 230 297 08 // info@cklavery.net Skype: cklavery
21. C L I V E K . L A V E R Y / P O R T F O L I O 2 0 1 6 THE END 
 This portfolio was created in Apple Keynote 6.6.1. and set in Roboto and Inconsolata by Google while drinking 23 mugs of Yorkshire Gold tea. 
 The background for the cover and final page was generated
 with Trianglify by Quinn Rohlf.
 Icons used from the Noun Project under a Creative Commons (CC) license are People by Gregor Črešnar,Timer by David Pareja, Question Dialog by Viktor Vorobyev, Knight by Gyan Lakhwani, Agile Methodology by Nimal Raj,Unicorn by Polina Flegontovna, Cloud Upload by Austin Andrews, Hand by Creative Stall,
 Document by Francisco Garcia Gallegos,Wireframe by Mundo,
 Plant-Pot by Patrycja Kuracińska and Responsive Design by Christopher Holm-Hansen. No ninja unicorns were harmed during the production of this document despite what I said earlier.