Oaklands Hotel Website Redesign

2019 - 2020

After forwarding a proposal, to begin redesigning the Oaklands website, I was quickly greenlit and began gathering feedback from staff. From my experience of maintaing the obsolete website, I felt that this redesign was overdue in addition to a variety of issues. The overall focus was to improve the user experience and navigability of the website by rewriting it from the ground up to focus on improving the conversions, discoverability, accessibility with the guidance of several years of analytical data.

View the live website: oaklands-hotel.co.uk


Ahead of creating the initial wireframes, with the help of our lead developer, we began to map out the websites new content management system by grouping pages by their content type and assigning naming conventions for our model view controller, allowing us to structure the entire project before writing a single line of code. Additionally, we mapped out all possible redirects to prevent as many errors as possible.

As part of my proposal, I suggested that we consider merging our subsequent brands, to theoretically improve our SEO and discoverability of aforementioned brands, while continuing to sustain their existing domains as shortcuts in marketing material.

alt txt 2

Design & wireframing

I commenced the design by sketching an assortment of low fidelity layouts while employing analytical data (click through rates & heatmaps) to guide key element positioning. From which I began experimenting with a select number of design styles to create a framework of mix and match elements. Utilising Adobe XD, I created interactive prototypes for mobile and desktop, which given feedback, helped me to create the final prototype to present to management.

alt txt 2


Using HTML & CSS, I began creating a simple framework for layout and functionality. From there I imported it into our ASP.NET Core (C#) environment to begin integrating all database reliant elements with the help of our technical director. After many weeks of development, we had a functioning website on our hands, which I began testing for bugs on multiple browsers and devices. By fixing these bugs, it gave us the opportunity to refine our code and styling site wide, while adding a handful of quality of life features for users and staff. Additionally, at the request of management, more features were added, which we were able to accommodate speedily by having a robust modular framework structure in place.

alt txt 2alt txt 2

CMS & dashboard

Expanding upon our existing websites" content management system, we were able to create a full-fledged dashboard with access to edit almost every page on the website, this helps by allowing all staff to swiftly edit of content and imagery. The dashboard was primarily built using C#, Vue.JS and a small amount of vanilla JavaScript.

One of the key features, the menu (dining) pages, was added as the previous website was heavily reliant on PDF files, which are highly inaccessible to screen readers, and as one of our goals was to improve accessibility this was essential feature.

alt txt 2

This website has yet to fully launch, due to critical internal projects taking priority, causing it to be temporarily put on hold. However, the website is feature complete with as many bugs as we could find being eliminated, and is ready to launch at any time, and I hope I will get to see it live soon after many months of work put into it.

Interested in working together?

Contact me