Web presentation for Fosters Solicitors

Web-based interactive presentation | HTML, CSS, JavaScript | Graphic and web design | Designed to inform and persuade


Fosters Solicitors required an engaging, interactive and exciting presentation to present to company board members and staff members showing ideas on how to improve company culture at Fosters Solicitors to attract new talent. The presentation needed to be eye-catching and use modern and interactive methods of presenting data and sharing ideas.


A web presentation was chosen because it could be easily animated, easily presented and made to work with a range of devices. Additionally, links to external sources could be easily added and the presentation distributed easily to those who wanted to refer to it after the meeting.

Competitor research showed that Fosters already provided a good culture compared to other Norwich law firms. Research into office and company culture showed:

91% of US and 90% of Canadian managers said culture fit is more important than experience or skills.

86% of employees would not work for a company with a poor reputation.

65% of employees would leave their company if it was portrayed negatively in the media.

33% higher revenues can be achieved by cultures that attract talent.

27% higher revenue per employee can be achieved by hiring talented managers.

43% (in a sample of 2,000) said corporate culture was the main reason they’d leave their job.

Only 12% said they’d leave their job because they wanted more money.

4x revenue growth was seen in companies with strong cultures.

21% greater profitability from highly engaged teams.

A group of people graphic.

The strategy therefore was to use this information to encourage the board to invest more in company culture and convince them that not much extra needed to be done because Fosters already provide a good culture. However, a little more investment could improve culture further, reaping some of these social and monetary benefits.


From the beginning, myself and the Fosters team were keen for the presentation to show a journey and for key statistics to be represented as interesting graphics that would captivate the audience and help aid their retention of the information.

Shown are some of the original drawings from December 2019. Many of these ideas would make it into the final presentation.

Timeline ideation of the presentation.

Initial ideas of events and cultural references that could be featured on the timeline to depict the age of Fosters' employees.

Four of the final timeline slides.

Most of the ideas conceived were included in the final slides, but many slides were 'scaled down' with less content to make the data presented easier to read.

Slide idea for the gender split, showing an image of a woman 75 percent larger than a man (to represent the difference).

The gender slide idea featured an image of a woman 75 percent larger than the man, to show that the gender split at Fosters is 75 percent female, 25 percent male.

The final version of the gender slide shows the male and symbols, but with the female symbol 75 percent larger.

The final design for the gender slide shows the female symbol 75 percent larger than the male one to represent the gender split of the firm.

The design idea for the 1970s slide featured the Saturn V rocket, moon, Millennium Falcon and the Star Wars titles.

The design idea for the 1970s slide featured the Millennium Falcon going along a path made of stars to represent the timeline, the Saturn V rocket, the moon and the Star Wars titles.

The final version of the 1970s slide featured just the Star Wars logo.

The final design for the 1970s slide was much more reserved and featured the data shown in the infamous blue text shown before Star Wars movies, followed by the Star Wars logo.

Slide idea for 1980s events, including the fall of the Berlin Wall, the rise of electronic music and Concorde.

Ideas for the slide depicting the 1980s included the fall of the Berin Wall, the rise of electronic music and Concorde flying over the scene as well as a Ford Sierra RS Cosworth.

The final version of the 1980s slide included only the Berlin Wall.

The final design included only the Berlin Wall, but its fall was animated. The other elements were not included in order to keep the slide's information easier to read.

Slide idea for the staff retention data, showing one foot representing one year an employee would stay at Fosters.

Staff retention data for males and females would be shown by feet walking out of the door. One foot equals one average year of service at Fosters Solicitors LLP.

The final version of the retention slide also represented the data by showing feet leaving a door.

The final design for the slide showing staff retention also shows the data represented by feet walking out of a building, but shows this in the context of a room.


JavaScript was used to trigger CSS animations that moved graphics across the screen and hid and show HTML divs containing information and/or graphics. No frameworks or libraries were used, beside the Scroll-Animate-To JavaScript library which animates sliding transitions between divs. The vast majority of the graphics are original and ideas are presented in interesting ways, such as showing the age of average Fosters employees through illustrations of events that happened when they were born and using videos and 3D graphics to ‘fly around’ Norwich to the other solicitors to learn about what they do.

The presenters wanted to show this as a journey, so the car at the bottom that moves across the screen represents the progress of the journey. The presentation follows a journey that determines why good culture is vital, who is currently working at Fosters and what kind of things each generation want, what local competitors doing, what sort of values should Fosters hold and finally how these values can be implemented through culture.

The presentation is compatible with a presenter device.


The presentation was completed in early February 2020 and rehearsed throughout the month, finally being delivered on February 28th 2020 to the board and an external organisation called SGFE who had been helping Fosters Solicitors facilitate the programme requiring this presentation. Those who saw the presentation said that it was convincing and were impressed by the graphics and the information presented.

Fosters will use this presentation and the information presented in it to consider improvements to their culture.


The age of employees was depicted with graphical representations of events, items and technology that were current at the time of the birth of employees.

The group that Fosters Solicitors LLP were working with suggested categorising words to describe the business into 'buckets'. These were represented in the presentation.

Information about the benefits that Fosters offers compared to other Norwich solicitors was displayed on a 3D map, powered by Google Earth.

Fosters Solicitors LLP had come up with values that they wanted their company to stand for. The 'dos' and 'don'ts' were represented in traffic light fashion.


Enjoyed this case study? Have a look at some similar work!

Helping The Visually-Impaired Read

'Expensive, difficult to use and incompatible with some platforms'. This is what visually-impaired users said about using technology to read. How can this be improved?

Nellie's Nursery Website Prototype

From a hastily-made Wix website to a fully functioning prototype of how a nursery site could look and feel - based entirely on formative user research, research into existing conventions and customer needs.

Redgate Database UI Project

As part of my application process for an internship, Redgate tasked me with designing a new interface for a database, based on user research that they provided for me. This is what I came up with.