DTA Project

Goal

This project occured to a request from an ex-student, the developer of the site left and the company they were working for was in trouble. The site is a wordpress site. When I recieved the work, the primary issue was that the SEO changes required, when implemented, broke the website. As such, the primary goal was to fix this solution. In addition to this issue, there were a multitude of design issues that needed to be rectified.

As such this project is based on two primary end goals; seo/data appearance and layout fixes.

Site Address: http://dreisetuckeratol.com/

Research

Primary research went into locating the correct plugin for wordpress that was causing the issue. Inital research was on the plugin authors site, information there indicated that the plugin was being used in a manner that it was not created for. To determine if this was correct a lot of time was spent testing and following of the data to determine what was occuring.

Layout design requests were submitted via a google docs. These changes required modification of the style.css file.

Planning

As the site was live, the inital planning involved getting a backup of the entire site before anything was examined. As such, the planning of the work load was as follows:

  1. Backup Site
  2. Track the SEO bug
    • Use Developers site
    • Implement data tracking in site
    • Resolve issue
      • Implement fixes
  3. Resolve Design and layout issues
    • Major design errors
    • Minor design errors
  4. Report back on all changes and modifications
    • Recieve feedback on changes.
      • Prioritise feedback
      • Resolve based on priority
  5. Repeat steps 3 & 4 for until completion

Timeline

The original timeline for the site was 2 months. The primary issue required a rewrite of the backend code to ensure that SEO objectives were reached, and as learned, rewriting aspects of plugins and ensuring there were no side effects with testing, this took a lot of time. This particular site required a rework as the company Dreise Tucker merged with ATOL, hence a name change and new elements were asked to be added and reviewed. Overall, the site took approximately 4 months as there were delays between submitting completed work and recieving feedback, new features and changes had to be added to the scope of the project as well.

Visual Design

As this was a developer job not a designer job, the visual design was already settled upon. My task was to ensure that there would be a working site with correct SEO on all devices. The mock ups I recieved to work with are as such:

portfolio portfolio portfolio

These mock ups and screenshots were integral with tracking design issues throughout the site.

Development

Developing for this project was extremely time consuming and unique, when compareed to various other projects I have undertaken. This is the only project where a rewrite of the core code of a wordpress site was required to such an extent that it changed the core functionality of the plugin and yet maintained the graphical interface that the end user wanted whilst reaching the SEO goals required.

The design issues were resolved quickly, with issues being reported, fixes being implemented and tested within 24 hours and a report sent back for confirmation.

A local copy of the site was implemented during the early stages to resolve the plugin issue. With design issues being resolved locally, then upload to be confirmed by the company.

Testing

Testing was carried out throughout development in an agile mode, with sections of the project being put on hold to quickly resolve any small minor issues that appeared. Errors were shown and updated in a shared google document, so all members of the team had quick access.

Below is a snapshot of a list of design issues that were worked on during the project.

dta testing

Browsers

  • Edge
  • Chrome
  • Firefox
  • Safari

Devices

  • Desktop - 4k -> 1366, windows, apple
  • Tablet - Surface, android,apple
  • Mobile - Windows, android,apple

Browser development tools where used to assist with responisveness of the website.

A section would be developed and then tested. With feedback reducing or increasing issues as located by the team. Once deployed the site went through online validation for html, css and accessibility.

Deployment

Deployment consisted of maniuplating a currently online website.

Site look

First two images of a desktop view, final two images are mobile views

portfolio portfolio portfolio portfolio