Move of website to WordPress

Refining the original design and removing unnecessary code

UX Designer desk

Project

My role:

Time:

Tools:

Scope:

Process:

Project overview

The client ID-hundar Team Skåne contacted me to request a move of their site from an unknown CMS-system to WordPress, in order to get a more user friendly system to update in. It was not possible to just copy the code from the other system, since it entailed a lot of unnecessary JavaScript. So I re-built the design from scratch in WordPress using a blank theme to create the custom design.

The original design was a bit messy, so I did an UX and UI audit and cleaned it up to make it more clear and accessible for all users.

The Challenges

The biggest challenge for this project was the time frame and the client's budget. The agreement was to just move the design into WordPress, but since that design wasn't very user friendly I also suggested that we did some quick refinements of the design. With more time and money I could have done some more refinements, and hopefully this will be the next step for the site, when the budget is less tight.

Image of landing page pratakuten.se

My Approach

Research & Hypothesis

I researched the original website and this is what I looked at:

  • Discovery & Research: To see what type of coding was used in the original website. Could it be easily moved in order to save time and money for my client? Could I just download and save images (which was the client's request)? What could be improved in the design and code?
  • Rebuild in WordPress: Started a local project using Local By Flywheel on my local computer to set up WordPress there. And also a GitHub project to save files for backup purposes. Using a blank theme to build the project on. Using Visual Studio Code.
  • Client input: We had weekly meetings along the way, in order for getting all necessary input and client wishes in place.
  • Extra blog feature: The client wished to have a blog feature on the new site, so I added and designed a blog page and blog article pages.
Wireframes first ideation

Solution

ID-hundar Team Skånes new webpage built in WordPress is easy for the client to access and update.

With WordPress as a CMS it is now easy for the client to update with new ID-hundar Teams and write blog articles to publish easily.

Outcomes

Key insights

The website is now ready for the client to take over.

The project was more difficult to work with that what I first thought, since the original website used solutions for the design which were unnecessarily complicated.

Next Steps

Recommendations

The next steps is up to the client to decide, but my recommendations are to keep updating the blog in order to optimize the SEO, Search Engine Optimization.

Learnings

Reflections on the project

The move from an existing design might at first glance look really easy. Everything is done, so just move it. But there is no easy move. Old code can be to messy, and not applicable to the new system.

So in this project, I learnt that moving a site into WordPress might take as long as doing a new design from scratch.