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 freetime 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.
The homepage for the global training & learning system at Nestlé. Based on the Cornerstone On Demand SaaS platform.
First step was research. A series of usability tests with inexperienced users and interviews/contextual inquiries with more experienced users. Ideally this should be conducted in person however to get an international dimension much of it was also conducted over Skype.
Once a write-up of the findings from testing was complete, the next step was to consider a broad variety of redesign alternatives; at this early stage there is no such thing as a bad idea, even the worst ideas may potentially have something that can be recycled within them. A mistake some people often make with wireframes is trying to make even the initial sketches works of art; this is not what wireframes are for! Steadily these ideas were refined and a few alternatives produced with Illustrator that could be presented to stakeholders and discussed.
Whilst this was going on, I was also in contact with developers to actually make the end product. The received quote was enormous. Thus t was decided I should experiment myself and see what I could do within the CSOD system.
Developing within the CSOD SaaS framework proved far more difficult than making a stand-alone website. There are lots of idiosyncrasies to deal with; something not helped when part way through my development the software was updated necessitating large changes in my code. The original plan called for modifying the default widgets and navigation bar however this was beyond my abilities and the intention was to use external developers for this. Utimately stakeholders decided the end result as it stood was good enough.
My final solution was intended to be a glocal one; the same broad design and code base is used for all markets, however there is the option for slight modifications to reflect local needs- primarily in the right hand 'market information box' however also on the left, with some markets needing access to Skillsoft (external training).
This screenshot shows the page that was existing previously.
I have added annotations from usability testing to the page.
A selection of the many mock-ups that were produced; the purpose of mock-ups is to investigate possibilities, not produce end-product-quality images right away.
One of my less favoured designs is included here. Even bad ideas can help with investigating possibilities!
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 in use at Nestlé globally.
For the first few months, covering planning and much of the heuristic evaluation, I was working together with an experienced user experience consultant. For much of the project however I was working alone on the UX side of the project (there was also a more technically focussed 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 my first 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 via a visit to a Nescafé factory.
This work was the basis of the consideration of 'non-connected employees' in Hire to Retire.
Heuristic evaluations are certainly one of the less sexy jobs in UX, yet they present a useful way to get the lay of the land cheaply before going to users.
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.
Far from the most interesting discovery from the survey, nonetheless it is one of the few slides of my final report which can be safely shared publicly.
One of our more interesting discoveries was, contrary to our initial expectations, that there was little difference in the navigation methods of those who are new to the company and those who have been at the company for several years.
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 a 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.
At time of writing (Feb 2018) my main job is as the User Experience Designer for the Hire to Retire (H2R) HR Transformation project at Nestlé.
A major part of this project has been in the production of personas & user journeys and the research needed to get to this point. Much of this draws from survey data from HR Solutions Review and other surveys- the comments section in such surveys is a gold mine. Interviews and contextual inquiries are also heavily used.
Also part of my responsibilities here is proselytizing for the use of user centred design and design thinking in HR. I have made headway here, using Design Thinking methodology for a key workshop. I also played a key role in the preparation of a key presentation to global HR heads, which was done from a persona-based, user centric POV to great success.
Tracking our SuccessFactors system for usability flaws is another task to be accomplished as part of the project. These issues are identified in a wide variety of ways, such as user feedback, personal discovery, and testing.
Usability Testing has featured heavily in this project. Usability testing was generally organised on a component by component basis. One such usability testing project which I have recently completed called for organising a global evaluation of a key component; this served both to get feedback from beyond Switzerland and for me to train other people in the organisation 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 to expose them directly to user feedback and attempt 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 is handled has proven an interesting challenge. Sometimes changes can be made to the 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.
This project has also often saw my Axure abilities called into use for non-standard purposes; in producing mobile app mock-ups suitable for presentation.
Unfortunately, due to this being an ongoing project subject to NDAs, more detailed information cannot be published here.
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 the theming and configutation of the homepage of our Success Factors instance.
Success Factors being a SaaS system I was very limited in what could be done. I also had to stick to Nestlé brand colours.
A major problem encountered in this configuration was that a colour that fills one purpose in one module might fill a different purpose in another. For instance a header that sits on a dark background in one place might sit on a light background in another.
Theme customisation options on SF are limited.
A key piece of stakeholder feedback to my early configuration attempts was the blandness of the homepage; every single icon looked the same.
Unless graphical icons are used (which has many problems of its own) this is the way things must be however.
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 radically different 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 make a system that allows them to accomplish their goals effectively and efficiently.
This should not be taken to mean that every single detail should be intensely researched before any practical work can begin. The best way to research user needs is often to dive right in; after some preliminary research to get to work producing prototypes and then validating them with intended users as part of your research.
The key is not to be afraid of failure. Even simple prototypes can provide valuable feedback.
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 more experimental and unlikely to be anything like the final design. A key guideline that I always try to keep in mind when interviewing 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.
As noted above with my thoughts on user experience, 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 also limits on the amount of typical portfolio-fare end products available to show on this site. When I find the time I will follow some personal projects to provide a more rounded portfolio-experience.
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 one of Sweden's largest newspapers.
Full usability study of the top selling newspaper in Scandinavia's foray into streaming video. Conducted in a usability lab, with its results being used in the redesign of the system.
During my time as a masters student at Uppsala University I was part of a team project to improve the web TV player of aftonbladet.se.
This project took the form of a full lab based usability test. The test contained the following components:
1: Participants perform a number of tasks on the website to determine how easy to is to do certain things and which of the multiple possible routes people tend to follow.
2: A post-test interview to ask about people’s thought processes whilst they were completing the tasks. To help with this several further questions are asked using screenshots and questions such as “Which link would you click to view a video clip about the story?” and then asking which style they preferred.
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, evaluating the Ace Project website for International IDEA.
First we interviewed 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...
After this we decided given the limited resources and time allowed for the project to use Jakob Nielsen's Heuristics as a basis for a heuristic evaluation of what was then the current website and screenshots of a to-be prototype.
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. An overall rating was given to each issue from an average of the four team members evaluations.
In the final report annotated screenshots of significant issues were provided.
This image grabs screenshots from two different places in the report.
This report was the first bit of UX project I ever worked on.
Looking back now, 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 being hard to read.
In this issue we felt it very confusing that links were all formatted differently, even where they were in the same menu.
Additionally 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.
A project originally started during my time in Japan to teach myself about precision drawing on Illustrator. As the years have gone by I have came back to it several times. The project is basically 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 in Newcastle Central Station where many lines all meet in a very congested area bounded by a east-west river to the south and a 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.
SJ AB (Swedish railways) took a very interesting approach with the route planner dominating their site. An intriguing idea considering this is (I guess) the reason a majority of visits to the site would 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.
The various 'special offer' tiles were included, as in my experience, stake-holders often do levy requirements to have spaces for content such as this. Again, if this was a real project these would be investigated thoroughly.
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 lie at the core of the design, it would be a grievous error for a designer to just assume they are right without first checking with users.
I was somewhat able to bring user input into my map- requesting feedback online and checking if people understood the meaning of everything. I made several big changes to my design due to these ad-hoc checks.
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, 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.