Case study on UX, web design and development
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.
- ◍ Visually unpleasant font color
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 siteProject 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.
Fixes
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.
Issue: Video not loading
The video on the gallery page was not accessible and the customers would only see an empty placeholder.
Fixes
The new site had a proper video embed in place hosted by youtube to reduce server loading times.
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.
Fixes
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.
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.
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.
