UX Portfolio. UX Portfolio

Transcription

1 UX Portfolio UX Portfolio

2 Index Bentley Motors Site Redesign... 3 Intel - IT Manager Game IV... 6 Department of Works and Pensions Barclays Mobile Banking App Barclays Personal Debit Card Designer Mobile Version User Research For Peugeot Lean UX For Land Rover Downloads and Links... 27

3 Bentley Motors Site Redesign I was contracted to redesign the Bentley Motors Website as part of a major rebrand aiming to reposition the company as more aspirational, contemporary and fashionable. The design was to be both desktop and mobile accessible, which meant the removal of a great deal of preconceived plug-in interaction. 1. At this stage the Business Requirements and System Design had been largely agreed, which was unfortunate as the system design was based on mouse not touch interaction. So my first task was to take the existing interaction design including mouse-overs - and introduce finger friendly navigation and interaction. 2. The existing designs were drawn up in Adobe InDesign, perfect for presentation but less so for rapid interactive prototyping, so my second task was to recreate and redesign these in Axure. Given the time restraints this meant that a certain amount of the polish had to go as well, however that wasn't a bad thing as it allowed the Stakeholders to concentrate on the UX rather than the style of the UI.

4 3. The underlying site structure and navigation was the next step, luckily I was working with an exceptional IA and together we developed the taxonomy and reconstructed the content map, making it simple, more manageable and logical. 4. A series of rapid prototypes, including mobile versions, were created and tested with the results feeding back into my designs to ensure that user requirements shaped the new site structure and interface design and also ensuring that changing business needs were continuously met.

5 4. As the wireframes became closer to the final iteration I started working with the Creative Design Team to construct a real High-Fidelity prototype and with the Development Team to produce Functional Specifications, marrying the graphics to the interaction and content and then on to the code, a mixture of HTML5, CSS3 and JQuery. The final solution was handed over in October

6 Intel - IT Manager Game IV Intel have created several games to showcase their products and services, one of these is a series of IT Manager titles, the fourth such game is IT Manager Duels, and was based on Magic: the Gathering. I was bought on to create the game interaction, the flows and user journeys and of course help shape the UI. 1. I started by studying the previous games data to understand the nature of the audience being targeted. From this I created a series of Personas on which to sanity check my designs as they evolved. 2. Next step was to understand the gaming principles involved and to apply game theory to the original concept to see how robust the idea was.

7 3. I started to plan the user journeys and scamp out the initial UIs, working closely with both the Creative and Development leads. As is often the case these started to make their way on to the walls in the 'War Room' so that an end-to-end journey could be easily seen in one place. 4. I storyboarded the processes from start to finish, both for the development and design teams and for Intel to show proof of concept. A series of online workshops were held with Intel in the US to both show progress and to explain design decisions.

8

9 5. Final wireframes with annotated interactions were produced for the final gameplay before handing over to the development and creative teams. The game is currently live and at time of writing has regularly has several thousand international players.

10 Department of Works and Pensions The DWP were bringing all of the UK benefits online as part of the Directgov web portal (now just gov.uk). I was bought in to replace the lead UX designer who was coming to the end of her contract. My first priority was to analyse and push back on the existing design, which proved to have been created by rigorously following existing office based protocols; naturally they did not work well in a digital environment. 1. I started by refining the existing wireframes into a series of lengthy hi-fi prototypes, heavily annotated to show where experience told me the system would fail. Repeat user testing consistently showed a correlation with the results I had predicted and major changes to the system were made. 2. I began to work more closely with the SME s (Subject Matter Experts) modifying text and user stories and journeys and explaining where and why user behaviour would require a slightly different approach.

11 3. In addition the accessibility of the site proved to be less than desirable, making basic but easily rectified mistakes, such as Call to Actions only being available halfway up at page. I ran reports and tests and the results changed the way the site was coded and laid out. This in turn was carried on through to the Directgov site. 4. My final act was to hand over the much improved and much better documented system to a new team of designers. The system went live at the end of 2011 but has since been replaced by the Universal Credit system, which I m happy to report kept many of the underlying structures I created.

12 Barclays Mobile Banking App g&hl=en_gb I was originally bought in to help establish best practice UX within the UK Retail and Business Banking digital department (UK ROLB), with particular focus on the Bank s mobile offerings. As part of my duties I was tasked with evaluating and driving forward both the BMB and Pingit app designs, which had a lack of consistency and some very basic usability errors, where style had overcome substance. 1. My first task was to produce a series of flow diagrams, until this point all user journeys were 'happy path'. When flow diagrams were produced various pain-points became easily recognised and could eliminated or at least streamlined from the process. 2. I now moved on to creating a series of Personas, as the existing ones did not have any mobile usage data, with these in place it was relatively easy to establish an interaction design process based around mobile banking needs.

13 3. I continued to evaluate the apps' UI design, using a mixture of Ming Hwan Yun s and Hampton Catlin s mobile heuristics, to refine the wider user experience, which again was fed back into the build process. Is the system as simple as possible but not too simple? Is there a good balance between brevity and comprehension? Is the core value proposition the primary focus? Where is more important than who, is this balance reflected in the UI? Is the system status clearly visible? Do the system terms and features match their real world counterparts? Are controls and options obvious? Is there consistency in both controls and layout across the systems? Can errors be avoided? Does the system help users recognise, diagnose and recover from errors? Are the system controls easily recognisable rather than learnt? Are the aesthetics of minimalist design? Is help documentation easily found?

14

15 4. My final work on BMB was to provide ipad design guidance. It is a mistake an UX sees regularly to believe that user behaviour does not change between phone and tablet and scaling a phone s UI to a tablet size rarely works. All this was part of an iterative design and test program with my final work being completed in November 2012, before I moved on to other parts of Barclays. The apps have now gone from strength to strength and have garnered many digital awards; something that pleases me no end at all. g&hl=en_gb

16 Barclays Personal Debit Card Designer Mobile Version 83 Barclays offer their customers the ability to personalise their debit cards with their own photos, unfortunately their initial desktop application for doing this was created in Flash and wasn t suitable for mobile access. I was asked to redesign the application for mobile devices using HTML5, CSS3 and JQuery. This was a relatively new concept for the stakeholders and lot of explanatory discussions were needed to explain mobile vs. desktop, especially over scaling, swiping and the concept of the page-fold being superfluous. 1. The first step was to analyse the function, features and interaction of the desktop version of the app and simplify them for mobile usage. The differences between mobile usage and desktop are often a surprise to Stakeholders and the rationales for my findings often were longer than the evaluation itself. A significant part of being a UX is education and breaking apart, gently, preconceptions and old thinking.

17 2. I started a series of rapid wireframe designs, as opposed to a prototype, as stakeholders requested printed documentation. These complete with rationales were then part of the Specification documentation I produced, it also allowed for easy dissemination of my designs as Stakeholder were behind a lot of security and often had legacy systems to view designs on, as you would expect in massive banking environment. 3. An agreed functional flow was produced, which eliminated the a lot of new feature requests, none of which were needed. Again one of the core tenants of Mobile Design is to strip away the unneeded, leaving a sharp focus on what users want and need, adding desktop features simply 'because we can' is not a good idea.

18 4. A series of iterative designs were produced and tested, streamlining the functionality until a final version was agreed by all Stakeholders. 5. The UX design was fully documented and handed over to development in November The final design is now live and was the focus of a major advertising campaign in

19 User Research For Peugeot Peugeot wanted to make the move from a wide range of national sites to one global brand. I was bought on to help research the pitfalls and high points of this strategy as it pertained to the UK market. There are major differences between nations; I doubt for instance that many in the UK even know that Peugeot make motorcycles, while German labels simply would not fit in to the real estate offered in English speaking sites. 1. My first task was to analyse the obvious English weaknesses of a direct translation from the French. There were several problems, not the least of which was that the client was determined to use the word 'Mobility' in their design, a phrase that has a different connotation completely in Britain. These differences were quickly identified and a different labelling applied for testing purposes. 2. Secondly I devised a series of card-sorting exercises to both test the existing structures and naming conventions and also to see if there were any patterns in user perception that we hadn t predicted. As usual the user testing threw up a few wildcards, the term hybrid car, for instance, was simply not as familiar as first assumed, but if we substituted hybrid with 'environmentally friendly' there was no confusion at all. The more obvious results were used to refine the final testing prototype(s) so we could see if variants showed a similar pattern with different users.

20 3. Thirdly I created a series of clickable prototypes to see how the proposed redesign(s) operated in real life, both in terms of navigation but also in interaction and engagement. 4. I set-up two rooms as impromptu testing labs and the tests were conducted over four days with me acting as Facilitator to a range of user type. The Observers were a mixture of both system architects and developers and stakeholders from Peugeot UK. I have in the past been both Observer lead and Facilitator and both roles have their strengths, with both reactions of Users and Stakeholders often proving to be illuminating.

21 5. All sessions were recording, both from an environmental view (the lab) and screen capture, for more deeper review after the testing. Facilitator (1) conducts the test and ensures candidates are at ease Candidate (2) Asked to talk out loud so that reactions and though processes could be recorded Workstation (3) All sessions were recorded on Camtasia Card Test (4) The use reorganised and renamed the existing structure in a logical - for them - layout CCTV (5) Sessions were recorded and observed in another room Screen (6) Large screen projection from the Testing Room Observers (7) Interested parties taking notes Notes (8) Observations reactions and points of concern that were recorded during the test Cards overhead (9) an overhead projection of the card sorting materials and exercise Room feed (10) a real-time view of the session broadcast from the camera (5) Finally I analysed the tests, reporting on my findings, explaining how they had been reached and giving recommendations of how to proceed. The final site went live in 2012, with a much closer aligned Branding style, one that is both consistent yet flexible enough to allow national requirements.

22 Lean UX For Land Rover Land Rover are of course a globally known brand, with a longevity that few can rival. They are not however known for their digital presence. This was a challenge taken up by Ogilvy, who created an entire digital vision piece utilizing the best of current interaction and engagement models. I was bought on firstly to ensure that this vision was met but secondly as I'm well versed in working Lean UX for Agile. Typically my first task would be a briefing with the Product Owner as to the nature of the upcoming Sprint. As we talked I'd produce quick scamps of potential solutions, so we could rapidly identify pain-points, both from a Business perspective but from a User perspective too and flesh-out a potential solution. I'd start to work these scamps up into more detailed solutions, consulting with the Devs. and Creatives, still on paper, which I'd present during Sprint kick-off. Each design decision being matched again a User Story. It was at this point that Dev. and Design teams became fully involved, bringing their knowledge to bear and challenging or refining the wide solution. When we had reached agreement these decisions were documented and the now heavily annotated paper designs were placed on the wall for instant reference. 1. Once the Sprint had kicked off, I'd take the agreed designs and start to wireframe them properly using Omnigraffle. This served two purposes, one it created a papertrail so that any designer who came after me could follow the designs when the wall poster were taken down and secondly it allowed more detailed annotations for team members who had questions but because the broad-sweep designs had already been discussed production was not halted.

23 1. The wireframes would also clearly define both Responsive and Adaptive solutions, so that Content Authors could start to produce long and short form content pieces.

24 2. Variations in components were clearly documented, the behaviours, the results and visual interactions all clearly defined, but in a very quick and inclusive document so that the behaviour became more important that the UI, the look and feel of which was clearly defined in discussions between UX, Creative and Front end.

25 3. Variations in components were clearly documented, the behaviours, the results and visual interactions all clearly defined, but in a very quick and inclusive document so that the behaviour became more important that the UI, the look and feel of which was clearly defined in discussions between UX, Creative and Front end. The final site went live in the UK in June 2014 and at the time of writing is being rolled out globally.

26

27 Downloads and Links This is a brief introduction to my work, for more information about me, my work and my previous clients please visit the following links. Professional Website: Contact: bob.powell@usabilitybydesign.net Linkedin: My CV: