Behance LinkedIn Instagram
Home Portfolio Contact

UX/Website design and development
for the poorly functional website

Case study brief

Quad safari Costa del Sol wished to have their site updated due to the following reasons:
  •  The site did not always load and the customer would get a white screen with a failure message instead.
  •  The video did not load.
  •  The header was too chunky taking at least 40% of every page's height.
  •  Poor quality images.
  •  Font colour was harsh on the eye.

UX research techniques used

The expert review

Phone interviews

Usability testing

Solutions used

Hosting solution

UX design

Web design

WordPress website development

Mobile website development

View Quad Safari site

Project details

Issue: Site not loading

Customers complained of not being able to access the site. Instead of the front page they would occasionally get a message that the server could not load the website.

The message the clients would see when the site was not loading


The problem was caused by poor php code and plugin conflicts within WordPress, so the site had to be made redundant. The client was offered a different hosting company that provided better service and value for money. The content of the site stayed the same, but the styling was updated and made more user-friendly and attractive. Below is the GTMetrix report showing the stats on the site's speed shortly after its publication.

GTMetrix report rating page's speed A View full report here

Issue: Video not loading

The video on the gallery page was not accessible and the customers would only see an empty placeholder.

An empty placeholder instead of a video


The new site had a proper video embed in place hosted by youtube to reduce server loading times.

The video on the gallery page showing fully

Issues: oversized header, poor font colour, empty footer and poor quality images

The site’s fixed header took around 40% of every page’s space and the header items did not align properly giving it a messy look. The font colour was not easy on the eye, and the images’ quality was mediocre, which was particularly noticeable on full-size images that span across the whole width of the page.

The image of the site's header on the Tours page


The new header took around 20% of the site page’s height that contracted to 5% on scroll. The header received a balanced structure with all items aligning around the site’s logo in the middle. The red font colour was changed to dark grey to make it easier on the eye. Poor quality images were used sparingly, and good-quality images were sourced for sections taking the whole width of the page. The footer was filled with useful information such as full contact details of the venue with a link to google maps, social links, and the menu.

The image of the new Tours page

Issue: Redundant booking options

The only way customers could book a tour was through filling out an enquiry form or calling the company. Some people would rather avoid calling due to language barrier and filling out an enquiry form is currently viewed as a redundant form of making a booking, even though it is quite common in Spain still.

An empty placeholder instead of a video

Fixes: Introduction of online booking

I have installed and customized a booking plugin that would allow the users to see real-time availability and book online. The menu was given a ‘Book now’ option that would take to customers directly to the calendar.

Screenshot of the booking calendar