End to end complete rebuilding of Nestlé's global training and learning homepage.
End to end complete rebuilding of Nestlé's global training and learning homepage.
User experience evaluation of the existing Nestlé HR ecosystem.
Enterprise 2.0 Usage: A CSC Case Study.
The major part of my work at Nestlé; I was in charge of user experience for the largest HR transformation ever.
Information about UX and this site.
A university project on the website of a newspaper's web TV player.
Evaluation of aceproject.org
Minor involvement in a training and learning project at Nestlé.
A low on UX free-time project for a fictional company.
Various Design Thinking workshops.
Various hard-prototypes made with Axure
Minor consulting on a Nestlé intranet site.
In-progress mockup mobile app project.
I was responsible end to end for the redesign of the homepage of iLearn@Nestlé; Nestlé's global training & learning system, built on the ‘Cornerstone On Demand’ (CSOD) SaaS platform.
The first step in my plan was research on the existing system; a series of usability tests with novice users, and interviews & contextual inquiries with more experienced users. Where possible I conducted this research in person, however given a lack of travel budget and the need to avoid an overwhelmingly HQ-centric point of view, a lot was conducted over Skype.
Additionally, at this time Google Analytics was setup with the existing site in order to gather direct quantitative data on how users navigate.
Once the research was analysed and written-up the next step was to consider a variety of possible redesigns and produce some low-fi mockups. A common mistake to make here can be to put too much energy into making a single idea a work of art; at this early stage I was primarily focussed on experimenting with a variety of alternative layouts rather than rushing towards a complete-looking final design. Steadily these ideas were refined from sketches into ever fewer and higher definition alternatives that could be discussed with stakeholders.
Whilst this was going on, I was put in contact with an agency to develop the end-product, with whom I presented and discussed my intended mock-up and wireframes. After some discussion with them it was realised that they didn’t have the ability to deliver much of what we were asking; a problem with developers only being introduced late in the design process. They said that it would not be possible to alter the default widgets and navigation bar. Given the 10,000chf quote that was being asked for work that went little beyond basic css and html, it was decided that I would produce the UI myself.
Developing within CSOD proved far more difficult than making a stand-alone website. There are lots of idiosyncrasies to deal with. Nonetheless I was successful in producing my modular ‘glocal’ design. Each market has broadly the same page however there is an option for some slight modifications to fit local needs – a three tile and a four tile version of the left hand navigation section, and a customisable 'market information box' on the right.
The final parts of this project were knowledge transfer to an India-based offshore team that would be responsible for maintaining the page (many markets update their market information section on a quarterly basis), the initial setup of the page over a weekend of work, and validation with some stakeholders and representative users.
When presenting what we wanted to the development agency a design document was produced.
This is an example of a 'clean' wireframe, also presented were wireframes containing measurements and more in-depth details of what these widgets would contain.
A selection of the many mockups produced.
A: A very early sketch from when I was experimenting with a variety of ideas. The idea of customisable floating tiles was carried forward from this design.
B: A more advanced mockup which was liked by one particularly large market due to the huge market-customisable section. For the same reason it was unsuited for smaller markets who don't really need this section.
C: My initially preferred design, excluding the to-do list widget which from usability testing seemed to lack utility. Some markets however presented a clear need for certain user-groups to have this.
D: The final mockup.
Final site, designed and built by me end to end.
A key challenge lay in trying to get my code to work despite the idiosyncrasies of the CSOD platform.
Much of my first year at Nestlé was taken up by this project; a comprehensive review of HR Systems globally in use at Nestlé.
For the first half of the project, covering planning and much of the heuristic evaluation, I was working together with an experienced user experience consultant. Following their departure, I took sole responsibility for the UX side of the project, working alongside others who were dealing with the technology side.
There were 4 main activities in this project:
• Survey - Covering a representative sample of employees and line managers globally (2000<). My responsibilities covered writing the survey, sampling the target audience, building the survey on Opinio, and running and analysing the survey. I also assisted with running another survey concurrently; sampling was performed in such a way that we could examine the same markets without contributing to the problem of 'survey overload' which can afflict large companies.
• Heuristic Evaluation - Based on a greatly updated version of the "HSS Web Design & Usability Guidelines" (much of which proved very outdated for our purposes), a full heuristic evaluation of each system was performed. Sadly, we were only able to complete the evaluation with 2 people per system, more would have been preferable for a more reliable evaluation.
• Interviews & Contextual Inquiries - Gathering feedback from as broad a variety of people as possible via in-person and remote interviews, and visits to their place of work. This helped me to gain perspective on the problems that Nestlé employees face. These interviews formed a principal data source for the creation of a set of personas and user journeys for Nestlé.
• Usability Testing - The original plan called for performing usability testing of every system. Before I reached this stage however it had become clear that the project was heading in the direction of completely replacing the HRIT ecosystem at Nestlé. As a result, the only usability testing conducted in this project was the testing which was used for the iLearn redesign (iLearn being one of the few systems not destined for replacement).
There was no definite end point to this project, rather as results began to appear it gradually morphed into the Hire to Retire project.
A map of the 5 'blue collar' personas made from interviews conducted on site at a Nescafé factory.
This work was the basis of the consideration of 'non-connected employees' in Hire to Retire.
Contrary to my initial expectations there was little correlation between being technologically-adept and being open to more self-service technology. We found examples fitting into each quadrant except the low-ability, low-acceptance quadrant.
Heuristic evaluations are a useful technique to cheaply get the lay of the land before involving to users for more in-depth studies.
It is important to remember that heuristic evaluations must always be performed by multiple user experience specialists, the utility of just one person's evaluation is rather limited.
In this case we had only 2 evaluators, which is less than ideal; research suggests around 4 gives the best cost-benefit return.
User Journeys produced in project took a variety of different formats. e.g.
• Day in the Life: Pictured here. How the transactions we are interested in fits into a person's overall daily situation.
• Transactional: The journey of a individual part of a larger process. For example submitting a leave request.
• End to end process: The full end to end of a process conducted over a number of sessions and potentially by multiple actors.
• As-is vs to-be: Side by side showing how the current situation compares to the future situation, this can be based around single transactions or entire processes.
My Masters thesis project, conducted in 2010 and 2011, involved investigating the C3 'enterprise 2.0' or corporate social media system at CSC, and whether it fulfilled its potential to ‘cross boundaries' and enable collaborative working.
Though such systems are now the norm in many companies, at the time it was still unfamiliar territory, C3, based on Jive software, had only been in place for two years, and without analytics tools it was not known quite how people were using the Jive collaboration tool that they had been given.
Conclusions included that the system had not yet reached critical mass and that this would be a very difficult thing to achieve in such a closed system where your possible userbase was limited to your employee base. A conclusion which gels with future experience of such systems in other companies.
One of the things I looked at was the extent to which the system fit Nielsen's 90-9-1 rule; a starting assumption being that perhaps many users would sign up due to orders from above only to never use the system.
Broadly, looking at the left graph, the system seemed to beat the trend, the number of contributers not being too much lower than the number of pure consumers.
Looking to the extent to which people contribute however 90-9-1 tended to apply more, for instance in number of posts in each blog, as shown in the right hand graph.
Though my later studies at Nestlé have tended to find that age matters little (different corporate culture? a case of older age groups just taking longer to adapt?),
there was a stand out contrast in this study with younger people being significantly more likely to use the system.
My largest project as a User Experience Designer at Nestlé was working on the Hire to Retire (H2R) Global HR Transformation project.
This project was a direct continuation of the HR Solutions Review, with much of the research from that project being carried over to this; In particular, the comments section from the survey proved to be am excellent early source of interesting qualitative data.
Interviews and contextual inquiries featured heavy in this project. A plethora of personas and user journeys were produced attempting to capture a broad image of every type of employee in the company.
It was in this project that another key part of my responsibilities came into play; proselytizing for the use of user centred design and design thinking in HR. Big headway was made, using Design Thinking methodology to lead the planning for a key workshop where the project was unveiled to market and HR heads using a user-centric point of view. Something that was met very positively.
Design thinking was also used in the kick-off of the “Plan and Prepare” module, one of the five key streams of H2R.
Tracking our SuccessFactors system for usability issues is another task I was responsible for on this project. These issues are identified in a wide variety of ways, such as user feedback, personal discovery, and usability testing.
Usability Testing has also featured heavily in this project. Usability testing was generally organised on a stream by stream basis. Where possible I strove to arrange for usability testing to be performed both by myself in Europe and by others in varied parts of the world. This served both to gather feedback from beyond Switzerland and for me to train other people in the organisation on user experience and how to perform usability testing.
A major innovation in this project has been the development of customer experience testing; focus groups ran jointly with representatives of the process and change management. This helped in exposing the business-side of the project directly to user feedback, and allowed us to look at the whole solution holistically, taking into account the system, process, and communications.
Given we are working on a SaaS system, the way UX feedback can be handled has proven an interesting challenge. It is sometimes possible to make changes to our system, however other times it is beyond our control and must be taken to SAP. In cases where changes cannot be made the discoveries of User Experience Testing feed heavily into change management and training, inserting help messages on the system in places where the usability may not be the best.
The key rule of making personas: base them on real employee data!
The 'about' section exists purely to give the feeling of a real rounded person which helps with empathy. The metrics and the text to the right however contain insights from interviews.
The use of metrics allows the persona to be understood and compared to others at a glance. The text to the right meanwhile is very detailed, giving a complete story of the work and problems of an HRBP.
A major use of these personas was in presenting the project to HR managers from around the world.
I was responsible for all UX matters of of our Success Factors instance, including the homepage and theming.
Due to SF being a SaaS system I was very limited in what could be changed. I also had to stick to Nestlé brand colours.
A major problem encountered was that in SF a colour that in one module may fill one purpose, in another module might do something different. For instance a header that sits on a dark background in one place might sit on a light background in another.
A key piece of stakeholder feedback to my early configuration attempts was the blandness of the homepage; every single icon looked the same. Nonetheless theme customisation options are limited.
However, unless graphical icons are used (which has many problems of its own) there is no changing this.
An improvement to the homepage configuration would be to add a bit of colour to the tiles. Distinguishing one from another in this minor way would enhance usability as well as appearance.
Currently this site is a major work in progress due to my time being spent on full-time work.
This site is designed to be simple. Good User Experience isn't just about beautiful graphics or radical new navigation methods that show off the creator’s coding abilities. These elements, properly used, can certainly contribute to an effective UX, but they are not the core of what UX is.
The key to good UX lies in research. It is critical that you attempt to understand your intended users and their needs. From this we can figure out how to produce a solution that allows them to accomplish their goals effectively, efficiently, and hopefully, with delight.
This should not be taken to mean that every single detail should be intensely researched before any practical work can begin; there are always constraints of time and resources. Indeed, the best way to research user needs is often to dive right in; after some preliminary research to get to work producing basic prototypes and then gathering feedback from representative users. At this stage even a complete failure can provide valuable feedback that brings you closer to an effective solution. The key is not to be afraid of failure.
I find that a very useful thing to do in the early stages is to produce a myriad of low-fi prototypes; some an actual best-guess of what will work, and others that are more experimental and unlikely to be anything like the final design. When presenting these to users, a key guideline that I always try to keep in mind is that most people like to be the expert. Let them talk and share their superior subject knowledge with you, let them tell you why certain parts of a design won't work in their particular situation.
An issue with the idea of a 'portfolio' is that much of my work has been heavily focused on research as part of large projects rather than in producing an array of end products. Additionally, much of my work has been behind the implementation of SaaS solutions rather than in producing an entirely new product. This limits the amount of typical portfolio-fare end products available to show on this site. Sorry about that. I'm hoping that the future brings more end products, and am working on some examples towards that end!
This version of my homepage was created in February 2018. Given the goal of users on this site is simply to gain a brief understanding of work I have performed, a basic one page grid seems a logical solution.
If you want to email me, you can do it at email@example.com.
In creating this site I was originally thinking to go with a borderless, 'whole page as a giant colourful image' look.
On reflection however, clearly distinguishing elements seemed better for usability.
The 2016 version of this site was a parallax one pager with fancy floating images.
The menu on the left was something I was very unsure about; the length of the page seemed to suggest a menu was needed but this was a very inefficient use of space.
On examination I realised that though the parallax effect was very pretty, the demand to scroll to discover was not great for UX.
After this I began thinking in the direction of the current design; what possibilities were there to give a preview of everything right away?
One of the many slides I use to help educate the unaware on what User Experience is.
A particular mistake many often make is to confuse User Experience Design with Graphic Design.
This simple graph shows User Experience as an iceberg, with the highly visible Graphic and UI design work resting on the large amount of less visible UX work beneath the surface.
Basically if you're looking for a Graphic Designer; that's a different set of skills to a UX Designer. UI however rests in between and it can be approached from either a graphic design or a UX Design angle, that a UX Designer (like me!) can do.
A usability study from my time at university, contributing to the redesign of the web-TV player of Afton Bladet, one of Scandinavia's largest newspapers.
This was a team project where usability testing lay at the core. Participants were recruited via an ad on the site with free cinema tickets offered as compensation. The tests were conducted in the university's usability lab.
The test contained the following components:
1: Usability Test Participants perform a number of tasks on the website to determine how easy to is to do certain typical activities. The site contained multiple possible paths to perform some of these activities, we designed our tasks to analyse which path was the most popular.
2: Post-test interview to ask about people’s thought processes whilst they were completing the tasks. In addition to a standard post-test interview, several screenshots were presented and questions asked about them such as “Which link would you click to view a video clip about the story?”.
3: A System Usability Scale (SUS) survey
4: A further follow up interview to gain feedback on the test.
Our test uncovered several pieces of information that were incorporated in the complete redesign of Afton Bladet’s web TV player. For instance we found that people prefer to use thumbnails to navigate and that many buttons are completely ignored.
This is a typical screenshot of the system we tested.
The highlighted areas reflect the several possible ways to navigate to a new video, we sought to discover which option users most typically used.
This sample from the final usability testing document refers to the previous screenshot containg highlighted navigation options.
As well as a standard SUS survey and general questions, our post-test interview also contained a screenshot-based quiz.
A team project conducted as part of my HCI masters degree, evaluating the Ace Project website for International IDEA.
This was a small-scale evaluation looking at the then live-site and some mockups of the new, in-development site (the design of which remains up today).
The first step was an interview with an employee of the project. During this interview we discovered the project's purpose, who they envisioned typical users of the website being and their goals, etc...
A more ideal world situation would have been to gather data directly from users rather than from this employee, however that was not possible.
After this we decided that given the very limited resources and time allowed for the project to use Jakob Nielsen's Heuristics as a basis for a heuristic evaluation of the as-is (as-was?) site and the mockups of the to-be site.
Each member of the team conducted an independent evaluation, identifying as many potential issues as possible. A combined list was then compiled and each of the evaluators provided a rating on the severity of the issues. From an average of the four team members evaluations an overall rating was given to each issue.
In the final report and presentation to International IDEA, annotated screenshots of significant issues were provided.
As one of the first projects with a real client conducted in my UX career this project does not stand out as the best example of how to do things, nonetheless at the time it proved a valuable learning experience.
This image grabs screenshots from two different places in the report.
This was the first UX project I ever worked on.
Looking back, I can see some examples of things I would now do differently. The description of some issues isn't the clearest for instance.
In the appendix we featured some annotated screenshots of some of the larger issues.
In this example standard text was behaving very strangely with a hover-effect for no discernible reason and the default text was hard to read.
In this issue we felt it very confusing that links were all formatted differently, even when they were in the same menu.
Another issue came from there being too many repeated links across the site, with both a top and a left menu being used. This wasted valuable screen real-estate for no benefit.
Bernician Railways is a free-time project quite unrelated to my work in UX. It originally started purely as something to teach myself Illustrator. As the years have gone by however, I have come back to it several times and given it some fairly serious thought. The project is basically a map of the Tyne & Wear Metro expanded along realistic lines into a pan-North East network. Oh, so gloriously nerdy, but not completely irrelevant to UX. Studying the way different networks draw their maps provides valuable insights into design.
As mentioned, the core of this project was the map. Transport maps are an intriguing design challenge. It went through several iterations, the big challenge I had was around Newcastle Central Station where many lines all meet in a very congested area bounded by an east-west river to the south and an east-west line to the north. There was a lot of sketching with paper to work out how this could work.
An 'add-on project' I did for this, was a mock-up of a website for this fictional company. To design the site, I thought about the typical needs of someone looking to a railway company's site and looked towards other rail sites for inspiration.
For example, SJ AB (Swedish railways) took a very interesting approach with the route planner dominating their site. An intriguing idea considering this is (I hypothesise) the reason most visits to the site take place. However, this is perhaps a bit overly minimalist- other popular reasons to visit such a site would be to contact the company, find out about service disruptions and, if such a system exists, to top up your travel card.
If this was a real project rather than simply something I have made in my free time, then the approach would have been rather different. User research would have to sit at the core of the design; user needs properly identified via rigorous research rather than merely guessed at.
A simple Axure mock-up of a front page.
This was a casual project, with the goal of improving my Illustrator skills and indulging in my (ultra nerdy) interest in maps, and not directly UX related.
I decided whilst the project was in my mind that it presented a good opportunity to get some practice producing a high-res mock-up on Axure.
In hindsight the text boxes on top of the images should have a darker background as the images have made readability quite poor.
There really is something that appeals to me about metro maps. Alas there is not enough space here to discuss them. Making simplicity of complexity perhaps?
At times I have gotten quite into this project. The section depicted here is the most complicated part of my map, envisioning a separate HS rail station in the area of the current Arena that is connected to the mainline and metro stations at Central (themselves two separate but connected stations) via both rail and lengthy walkways.
This very ugly page presents some random snippets from my map development thought process; how to display the busy area around Central Station where multiple lines converge at multiple stations was a big challenge.
Another key question in the design was in the best way to represent stations. The red lines show a few possible alternatives of this.
I originally come from County Durham in the UK.
My academic background is in Human Computer Interaction.
I have also lived in:
• The Netherlands- 6 months
• Sweden- 2 years
• Japan- 3 years
• Switzerland- 3.5 years
I have traveled to, as of 21/02/18: 30 countries
I like football. I support Sunderland AFC. As of 21/02/18 this is not a pleasant experience.
I like history and science fiction. I have never actually travelled in time nor space myself. These areas of study, together with travel, offer great insights into people and design.
If you wish, you can contact me at firstname.lastname@example.org.
As a part of my Nestlé; I've gained experience in Design Thinking methodology on both the participant and preparation & coaching side of workshops.
Nestlé is a major part of the Design at Business community, with management at Nestlé actively encouraging awareness of DT methodology in the company in the hope that this can spur innovation
Design Thinking as a methodology features heavy overlaps with standard User Experience methodology; the core of DT being basically to try to extend UX ways of working to all fields of work. Given this is something which I was already actively pursuing in my role as the User Experience Designer for HR, DT presented a natural match for me.
Personas built during DT workshops are very quick affairs, drawn from around 2 hours of ad-hoc interviews with only an hour of prior preparation.
Nonetheless, despite being so quickly built, the empathy that can be built even from such basic personas can really help with keeping teams on track when it comes to producing a prototype.
There's no such thing as a bad idea.
This is view lies at the centre of Design Thinking. It is vitally important to encourage people to bring forth every possible idea they have; even the absurd. This was perhaps best put by the founder of Airbnb; "Big ideas sound stupid in the beginning".
Nevertheless, there does come a point where the truly bad ideas need eliminating. Voting is often a good way to get to this. Even once these ideas are 'killed' however, they should not be completely removed from view. For a variety of reasons The Idea Graveyard should stand.
Though 'harder' axure produced mockups are more standard in UX, in DT it is encouraged to build very fast and 'soft' mockups.
Often these are produced from cardboard and string, LEGO, or even acted out like a play. SAP Scenes is another tool that can be used to demonstrate flows. In this case we demonstrated the flow with Scenes alongside basic sketches of a proposed app.
This was one of the first projects I was faced with at Nestlé, I recall first encountering it even during my interview.
The "Rive Rein Virtual Campus" was being developed as an add-on to the Nestlé's CSOD-based training and learning system as part of a broader project to modernise the Rive Rein corporate training centre.
The design and development was already done when I got involved with the project, leaving me to perform usability testing.
I was asked to produce some mock-ups of potential improvements, however none of these were ever implemented with the technical limitations of CSOD being the primary factor in the decision not to go ahead with this pilot.
A first mock-up made with the ultra-professional... ms paint.
It took some time after starting work at this company to get more powerful tools installed. Whilst I waited I made do with what I had and embraced the nature of the tool to make a rather silly looking mock-up.
Despite its amateur appearance...it worked. There should be no shame over such basic mock-ups, they aren't meant to be works of art. Mock-ups are solely meant for early sharing of ideas and rapid feedback.
During my time at Nestlé the company transitioned its SAP setup to the new Fiori portal technology.
Not long after the beginning of this project a small workshop was held involving the team responsible for configuring this system, myself as user experience designer, and an external UI developer.
Prior to this workshop I had performed some small ad-hoc tests with representative users and the existing default system.
Many of my suggestions for the system were taken into account as the project went forward with a separate team whilst I had to spend my time on other projects.
During my time at Nestlé I've been called upon to make Axure mock-ups on many occasions. After a demonstration of the capabilities of the tool people soon began to look to me to produce demo versions of systems for use in presentations.
This came where the real system was not yet working and for mobile systems where linking up a mobile to a projector would require sourcing additional equipment.
This is not exactly the intended use of Axure, it being meant more for the producing of mock-ups of new systems before investing in development, and I did use it for this purpose on occasion. Usually however the way Nestlé's development process works meant the niche for hard-prototypes was small, nonetheless I have developed these skills at every opportunity.
During the H2R project I was asked to create many clickable mock-ups of the mobile system for demonstration purposes.
In this one, used for presentation to HR & Market heads, we are demonstrating the flow of a process between a manager (blue) and an employee (red). This setup with two windows and two prototypes allowed for a very effective presentation.
Here is a screenshot from an exercise where I was requested to make a clickable prototype of a system I'd never seen in action for a demonstration to HR heads.
The prototype was to fit into our standard scenario of the Malaysia & Singapore market, and it was built based on US-market screenshots of the system.
The prototype was able to fit seamlessly into the demo with the audience not realising it wasn't a working system.
Me@Nestlé with its distinctive orange branding is a key part of Nestlé's intranet.
Designed and launched before I joined the company, a key problem stands with Me@Nestlé it relies on hover-menus thus is incompatible with touch-screen systems.
As part of a project looking at mobile access to Nestlé systems, a simple mock-up was made in Axure of a tablet-friendly version. The prototype is graphically basic, its intention being to
1: Show a viable alternative navigation system.
2: Remove links to items that are themselves not mobile-compatible.
An outgrowth of a project that came up during a Design Thinking workshop at Nestlé, this is a purely theoretical project I'm looking at in my free time.
The idea here is for an app that is used for buying and selling eggs. The original idea in the workshop was for a more general app to connect farmers and customers, however for the sake of simplicity and allowing me to create something complete I have scaled this back.
My primary priority in this project is to show examples of wireframing and app-focussed user journeys/user flows.
This is currently a work in progress thus is a incomplete page. Watch this space!
Produced on a train (sans ruler...), these are my quick working sketches where I figured out what to do for this project.
Basic first page wireframe done using Axure.
Rather than pure wireframes where you have a square labelled 'image', I prefer to put placeholder images in place from an early point, this helps to get a better understanding of how things will look once polished.
My main priority in this project is on the user flow, graphic design elements should always come last. I will look towards adding them to this mockup to give a version with a more polished, final feel after the rest is done.